2011-08-27 08:57:35 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Bootstrap, from Twitter< / title >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le HTML5 shim, for IE6 - 8 support of HTML elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le javascript -->
< script src = "http://code.jquery.com/jquery-1.5.2.min.js" > < / script >
2011-08-28 22:30:04 +02:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
< script > $ ( function ( ) { prettyPrint ( ) } ) < / script >
2011-08-27 22:03:06 +02:00
< script src = "assets/js/bootstrap-modal.js" > < / script >
< script src = "assets/js/bootstrap-alerts.js" > < / script >
< script src = "assets/js/bootstrap-twipsy.js" > < / script >
2011-08-28 02:22:49 +02:00
< script src = "assets/js/bootstrap-popover.js" > < / script >
2011-08-28 06:46:50 +02:00
< script src = "assets/js/bootstrap-dropdown.js" > < / script >
2011-08-27 08:57:35 +02:00
<!-- Le styles -->
2011-09-08 19:36:56 +02:00
< link href = "../bootstrap-1.3.0.css" rel = "stylesheet" >
2011-09-07 08:20:56 +02:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
2011-08-28 22:30:04 +02:00
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
2011-08-27 08:57:35 +02:00
<!-- Le fav and touch icons -->
< link rel = "shortcut icon" href = "images/favicon.ico" >
< link rel = "apple-touch-icon" href = "images/apple-touch-icon.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "images/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "images/apple-touch-icon-114x114.png" >
< / head >
2011-09-07 08:20:56 +02:00
< body id = "bootstrap-js" >
2011-08-27 08:57:35 +02:00
<!-- Topbar
================================================== -->
< div class = "topbar" >
< div class = "fill" >
< div class = "container" >
< h3 > < a href = "#" > Bootstrap JS< / a > < / h3 >
< ul >
< li > < a href = "#modal" > Modals< / a > < / li >
2011-08-27 22:03:06 +02:00
< li > < a href = "#alerts" > Alerts< / a > < / li >
2011-08-28 22:30:04 +02:00
< li > < a href = "#dropdown" > Dropdown< / a > < / li >
2011-08-27 22:03:06 +02:00
< li > < a href = "#twipsy" > Twipsy< / a > < / li >
2011-08-28 02:22:49 +02:00
< li > < a href = "#popover" > Popover< / a > < / li >
2011-08-27 08:57:35 +02:00
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
<!-- Modal
================================================== -->
2011-08-27 22:03:06 +02:00
< section id = "modal" >
2011-08-27 08:57:35 +02:00
< div class = "page-header" >
2011-08-27 22:03:06 +02:00
< h1 > Modals < small > bootstrap-modal.js< / small > < / h1 >
2011-08-27 08:57:35 +02:00
< / div >
< div class = "row" >
< div class = "span4 columns" >
2011-08-28 22:30:04 +02:00
< p > Our Modal plugin is a < strong > super< / strong > slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.< / p >
2011-08-28 03:09:03 +02:00
< a href = "assets/js/bootstrap-modal.js" target = "_blank" class = "btn primary" > Download< / a >
2011-08-27 08:57:35 +02:00
< / div >
< div class = "span12 columns" >
< h2 > Using bootstrap-modal< / h2 >
2011-08-27 22:03:06 +02:00
< pre class = "prettyprint linenums" > $('#modal-content').modal(options)< / pre >
2011-08-27 08:57:35 +02:00
< h3 > Options< / h3 >
< ul >
< li > < strong > backdrop< / strong > (< code > boolean< / code > ) - if true, it will include a modal-backdrop element.< / li >
< li > < strong > closeOnEscape< / strong > (< code > boolean< / code > ) - if true, it will close the modal when escape key is pressed.< / li >
< li > < strong > content< / strong > (< code > string< / code > ) - alternative way of supplying modal class with HTML content.< / li >
< / ul >
< h3 > Methods< / h3 >
< h4 > $().modal< / h4 >
2011-08-28 03:03:01 +02:00
< p > Returns an instance of the modal class. Accepts an optional options < code > object< / code > . If you want your modal to fade in and out, just add a < code > .fade< / code > class to your < code > .modal< / code > element (refer to the demo to see this in action).< / p >
2011-08-27 08:57:35 +02:00
< pre class = "prettyprint linenums" >
$('#modal-content').modal({
closeOnEscape: true
2011-08-27 22:03:06 +02:00
})< / pre >
2011-08-27 08:57:35 +02:00
< h4 > .toggle< / h4 >
< p > Returns an instance of the modal class. Toggle the modal open state.< / p >
< pre class = "prettyprint linenums" > $('#modal-content').modal().toggle()< / pre >
< h4 > .open< / h4 >
< p > Returns an instance of the modal class. Opens the modal.< / p >
< pre class = "prettyprint linenums" > $('#modal-content').modal().open()< / pre >
< h4 > .close< / h4 >
< p > Returns an instance of the modal class. Closes the modal.< / p >
< pre class = "prettyprint linenums" > $('#modal-content').modal().close()< / pre >
< h3 > Demo< / h3 >
<!-- sample modal content -->
2011-08-28 03:03:01 +02:00
< div id = "modal-from-dom" class = "modal hide fade" >
2011-08-27 08:57:35 +02:00
< div class = "modal-header" >
< h3 > Modal Heading< / h3 >
< a href = "#" class = "close" > × < / a >
< / div >
< div class = "modal-body" >
< p > One fine body…< / p >
< / div >
< div class = "modal-footer" >
< a href = "#" class = "btn primary" > Primary< / a >
< a href = "#" class = "btn secondary" > Secondary< / a >
< / div >
< / div >
2011-08-28 06:46:50 +02:00
< button id = "modal-from-element" class = "btn danger" > Launch Modal< / button >
2011-08-27 08:57:35 +02:00
< script >
$(function () {
2011-08-27 22:03:06 +02:00
var domModal = $("#modal-from-dom").modal({
backdrop: true
, closeOnEscape: true
})
2011-08-27 08:57:35 +02:00
$('#modal-from-element').click(function () {
2011-08-27 22:03:06 +02:00
domModal.toggle()
2011-08-27 08:57:35 +02:00
})
})
< / script >
< / div >
< / div >
< / section >
2011-08-27 22:03:06 +02:00
<!-- Alerts
================================================== -->
< section id = "alerts" >
< div class = "page-header" >
< h1 > Alerts < small > bootstrap-alerts.js< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4 columns" >
< p > The alert plugin is a super tiny class for adding close functionality to alerts.< / p >
2011-08-28 03:09:03 +02:00
< a href = "assets/js/bootstrap-alerts.js" target = "_blank" class = "btn primary" > Download< / a >
2011-08-27 22:03:06 +02:00
< / div >
< div class = "span12 columns" >
< h2 > Using bootstrap-alert< / h2 >
< pre class = "prettyprint linenums" > $(".alert-message").alert()< / pre >
< h3 > Methods< / h3 >
< h4 > $().alert< / h4 >
2011-08-28 03:03:01 +02:00
< p > Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the < code > .fade< / code > and < code > .in< / code > class already applied to them.< / p >
2011-08-27 22:03:06 +02:00
< h3 > Demo< / h3 >
2011-08-28 03:03:01 +02:00
< div class = "alert-message warning fade in" >
2011-08-27 22:03:06 +02:00
< a class = "close" href = "#" > × < / a >
< p > < strong > Holy guacamole!< / strong > Best check yo self, you’ < / p >
< / div >
2011-08-28 03:03:01 +02:00
< div class = "alert-message block-message error fade in" >
2011-08-27 22:03:06 +02:00
< a class = "close" href = "#" > × < / a >
< p > < strong > Oh snap! You got an error!< / strong > Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.< / p >
< div class = "alert-actions" >
< a class = "btn small" href = "#" > Take this action< / a > < a class = "btn small" href = "#" > Or do this< / a >
< / div >
< / div >
< script >
$(function () {
$(".alert-message").alert()
})
< / script >
< / div >
< / div >
< / section >
2011-08-28 06:46:50 +02:00
<!-- Dropdown
================================================== -->
< section id = "dropdown" >
< div class = "page-header" >
2011-08-28 22:30:04 +02:00
< h1 > Drop Down < small > bootstrap-dropdown.js< / small > < / h1 >
2011-08-28 06:46:50 +02:00
< / div >
< div class = "row" >
< div class = "span4 columns" >
2011-09-03 08:15:38 +02:00
< p > This plugin is for adding dropdowns to the bootstrap nav.< / p >
2011-08-28 06:46:50 +02:00
< a href = "assets/js/bootstrap-dropdown.js" target = "_blank" class = "btn primary" > Download< / a >
< / div >
< div class = "span12 columns" >
< h2 > Using boostrap-dropdown.js< / h2 >
< pre class = "prettyprint linenums" > $('#topbar').dropdown()< / pre >
< h3 > Method< / h3 >
< h4 > $().dropdown< / h4 >
< p >
Activates menus for given topbar navigation.
< / p >
< h3 > Demo< / h3 >
< script >
$(function () {
$('#topbar-example').dropdown()
})
< / script >
< div class = "topbar-wrapper" >
< div id = "topbar-example" class = "topbar" >
< div class = "fill" >
< div class = "container" >
< h3 > < a href = "#" > Project Name< / a > < / h3 >
< ul >
< li > < a href = "#" > Link< / a > < / li >
2011-09-09 04:13:08 +02:00
< li > < a href = "#" > Link< / a > < / li >
< / ul >
< form action = "" >
< input type = "text" placeholder = "Search" / >
< / form >
< ul class = "nav secondary-nav" >
< li class = "menu" >
< a href = "#" class = "menu" > Dropdown 1< / a >
< ul class = "menu-dropdown" >
< li > < a href = "#" > Secondary link< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Another link< / a > < / li >
< / ul >
< / li >
< li class = "menu" >
< a href = "#" class = "menu" > Dropdown 2< / a >
< ul class = "menu-dropdown" >
< li > < a href = "#" > Secondary link< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Another link< / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Tabs
================================================== -->
< section id = "tabs" >
< div class = "page-header" >
< h1 > Tabs < small > bootstrap-tabs.js< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4 columns" >
< p > This plugin is for adding simple dynamic tab functionality.< / p >
< a href = "assets/js/bootstrap-dropdown.js" target = "_blank" class = "btn primary" > Download< / a >
< / div >
< div class = "span12 columns" >
< h2 > Using boostrap-tabs.js< / h2 >
< pre class = "prettyprint linenums" > $('#topbar').dropdown()< / pre >
< h3 > Method< / h3 >
< h4 > $().dropdown< / h4 >
< p >
Activates menus for given topbar navigation.
< / p >
< h3 > Demo< / h3 >
< script >
$(function () {
$('#tab').tab('.tab-container')
})
< / script >
< div class = "topbar-wrapper" >
< div id = "topbar-example" class = "topbar" >
< div class = "fill" >
< div class = "container" >
< h3 > < a href = "#" > Project Name< / a > < / h3 >
< ul >
< li > < a href = "#" > Link< / a > < / li >
2011-08-28 06:46:50 +02:00
< li > < a href = "#" > Link< / a > < / li >
< / ul >
< form action = "" >
< input type = "text" placeholder = "Search" / >
< / form >
< ul class = "nav secondary-nav" >
< li class = "menu" >
< a href = "#" class = "menu" > Dropdown 1< / a >
< ul class = "menu-dropdown" >
< li > < a href = "#" > Secondary link< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Another link< / a > < / li >
< / ul >
< / li >
< li class = "menu" >
< a href = "#" class = "menu" > Dropdown 2< / a >
< ul class = "menu-dropdown" >
< li > < a href = "#" > Secondary link< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > Another link< / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
2011-08-27 22:03:06 +02:00
<!-- Tips
================================================== -->
< section id = "twipsy" >
< div class = "page-header" >
< h1 > Twipsy < small > bootstrap-twipsy.js< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4 columns" >
< p > Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!< / p >
2011-08-28 03:09:03 +02:00
< a href = "assets/js/bootstrap-twipsy.js" target = "_blank" class = "btn primary" > Download< / a >
2011-08-27 22:03:06 +02:00
< / div >
< div class = "span12 columns" >
< h2 > Using bootstrap-twipsy.js< / h2 >
< pre class = "prettyprint linenums" > $('#example').twipsy(options)< / pre >
< h3 > Options< / h3 >
< ul >
2011-08-28 03:03:01 +02:00
< li > < strong > animate< / strong > (< code > boolean< / code > ) - apply a css fade transition to the tooltip.< / li >
2011-08-27 22:03:06 +02:00
< li > < strong > delayIn< / strong > (< code > number< / code > ) - delay before showing tooltip (ms).< / li >
< li > < strong > delayOut< / strong > (< code > number< / code > ) - delay before hiding tooltip (ms).< / li >
< li > < strong > fallback< / strong > (< code > string< / code > ) - fallback text to use when no tooltip text.< / li >
< li > < strong > placement< / strong > (< code > string< / code > ) - position of tooltip - above | below | left | right.< / li >
< li > < strong > html< / strong > (< code > boolean< / code > ) - is tooltip content HTML?< / li >
< li > < strong > live< / strong > (< code > boolean< / code > ) - use live event support?< / li >
< li > < strong > offset< / strong > (< code > number< / code > ) - pixel offset of tooltip from element.< / li >
< li > < strong > title< / strong > (< code > string|function< / code > ) - attribute/callback containing tooltip text.< / li >
< li > < strong > trigger< / strong > (< code > string< / code > ) - how tooltip is triggered - hover | focus | manual.< / li >
< / ul >
< h3 > Methods< / h3 >
< h4 > $().twipsy< / h4 >
< p > Attaches a twipsy handler to an element collection.< / p >
< h3 > Demo< / h3 >
2011-08-28 02:22:49 +02:00
< div class = "well" >
< p class = "muted" > Tight pants next level keffiyeh < a href = "#" rel = 'twipsy' title = 'Some title text' > you probably< / a > haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel < a href = "#" rel = 'twipsy' title = 'Another twipsy' > have a< / a > terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A < a href = "#" rel = 'twipsy' title = 'Another one here too' > really ironic< / a > artisan whatever keytar, scenester farm-to-table banksy Austin < a href = "#" rel = 'twipsy' title = 'The last tip!' > twitter handle< / a > freegan cred raw denim single-origin coffee viral.
< / p >
< / div >
2011-08-27 22:03:06 +02:00
< script >
$(function () {
$("a[rel=twipsy]").twipsy({
live: true
})
})
< / script >
< / div >
< / div >
< / section >
2011-08-28 02:22:49 +02:00
<!-- Popovers
================================================== -->
< section id = "popover" >
< div class = "page-header" >
< h1 > Popovers < small > bootstrap-popover.js< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4 columns" >
< p > The popover plugin provides a simple interface for adding popovers to your application. It extends the < a href = "#twipsy" > boostrap-twipsy.js< / a > plugin, so be sure to grab that file as well when including popovers in your project!< / p >
2011-08-28 03:09:03 +02:00
< a href = "assets/js/bootstrap-popover.js" target = "_blank" class = "btn primary" > Download< / a >
2011-08-28 02:22:49 +02:00
< / div >
< div class = "span12 columns" >
< h2 > Using boostrap-popover.js< / h2 >
< pre class = "prettyprint linenums" > $('#example').popover(options)< / pre >
< h3 > Options< / h3 >
< ul >
2011-08-28 03:03:01 +02:00
< li > < strong > animate< / strong > (< code > boolean< / code > ) - apply a css fade transition to the popover.< / li >
2011-08-28 02:22:49 +02:00
< li > < strong > delayIn< / strong > (< code > number< / code > ) - delay before showing tooltip (ms).< / li >
< li > < strong > delayOut< / strong > (< code > number< / code > ) - delay before hiding tooltip (ms).< / li >
< li > < strong > fallback< / strong > (< code > string< / code > ) - fallback text to use when no tooltip text.< / li >
< li > < strong > placement< / strong > (< code > string< / code > ) - position of tooltip - above | below | left | right.< / li >
< li > < strong > html< / strong > (< code > boolean< / code > ) - is tooltip content HTML?< / li >
< li > < strong > live< / strong > (< code > boolean< / code > ) - use live event support?< / li >
< li > < strong > offset< / strong > (< code > number< / code > ) - pixel offset of tooltip from element.< / li >
< li > < strong > title< / strong > (< code > string|function< / code > ) - text for title in popover. Alternatively you can specify a < code > data-title< / code > attribute.< / li >
< li > < strong > content< / strong > (< code > string|function< / code > ) - text for content in popover. Also you can specify a < code > data-content< / code > attibute.< / li >
< li > < strong > trigger< / strong > (< code > string< / code > ) - how tooltip is triggered - hover | focus | manual.< / li >
< / ul >
< h3 > Methods< / h3 >
< h4 > $().popover< / h4 >
< p > Initializes popovers for an element collection.< / p >
< h3 > Demo< / h3 >
2011-08-28 06:46:50 +02:00
< a href = "#" class = "btn danger" rel = "popover" data-title = "A Title" data-content = "And here's some amazing content. It's very engaging. right?" > hover< / a >
2011-08-28 02:22:49 +02:00
< script >
$(function () {
$("a[rel=popover]").popover({
offset: 10
})
})
< / script >
< / div >
< / div >
< / section >
2011-08-27 22:03:06 +02:00
2011-08-27 08:57:35 +02:00
< / div >
< / body >
< / html >
