diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 1212 |
1 files changed, 535 insertions, 677 deletions
diff --git a/docs/components.html b/docs/components.html index e74e6d223..0aea4113e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1,70 +1,8 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - <title>Components ยท Bootstrap</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="description" content=""> - <meta name="author" content=""> - - <!-- Bootstrap core CSS --> - <link href="assets/css/bootstrap.css" rel="stylesheet"> - - <!-- Documentation extras --> - <link href="assets/css/docs.css" rel="stylesheet"> - <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> - - <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> - <!--[if lt IE 9]> - <script src="assets/js/html5shiv.js"></script> - <script src="assets/js/respond/respond.min.js"></script> - <![endif]--> - - <!-- Favicons --> - <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> - <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> - <link rel="shortcut icon" href="assets/ico/favicon.png"> - - </head> - - <body data-spy="scroll" data-target=".bs-docs-sidebar"> - - <!-- Navbar - ================================================== --> - <div class="navbar navbar-inverse navbar-fixed-top"> - <div class="container"> - <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="brand" href="./index.html">Bootstrap</a> - <div class="nav-collapse collapse"> - <ul class="nav"> - <li class=""> - <a href="./index.html">Home</a> - </li> - <li class=""> - <a href="./getting-started.html">Get started</a> - </li> - <li class=""> - <a href="./css.html">CSS</a> - </li> - <li class="active"> - <a href="./components.html">Components</a> - </li> - <li class=""> - <a href="./javascript.html">JavaScript</a> - </li> - <li class=""> - <a href="./customize.html">Customize</a> - </li> - </ul> - </div> - </div> - </div> +--- +layout: default +title: Components +--- + <!-- Subhead ================================================== --> @@ -123,27 +61,27 @@ <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<div class="dropdown"> - <!-- Link or button to toggle dropdown --> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> - </ul> -</div> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<div class="dropdown"> + <!-- Link or button to toggle dropdown --> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li><a tabindex="-1" href="#">Separated link</a></li> + </ul> +</div> +{% endhighlight %} <h3>Aligning the menus</h3> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> -<pre class="prettyprint linenums"> -<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> +{% highlight html linenos %} +<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... -</ul> -</pre> +</ul> +{% endhighlight %} <h3>Disabled menu options</h3> <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> @@ -155,14 +93,14 @@ <li><a tabindex="-1" href="#">Another link</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> - <li><a tabindex="-1" href="#">Regular link</a></li> - <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> - <li><a tabindex="-1" href="#">Another link</a></li> -</ul> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Regular link</a></li> + <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> + <li><a tabindex="-1" href="#">Another link</a></li> +</ul> +{% endhighlight %} </section> @@ -180,46 +118,46 @@ <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <div class="bs-docs-example"> <div class="btn-group" style="margin: 9px 0 5px;"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> + <button type="button" class="btn">Left</button> + <button type="button" class="btn">Middle</button> + <button type="button" class="btn">Right</button> </div> </div> -<pre class="prettyprint linenums"> -<div class="btn-group"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> -</div> -</pre> +{% highlight html linenos %} +<div class="btn-group"> + <button type="button" class="btn">Left</button> + <button type="button" class="btn">Middle</button> + <button type="button" class="btn">Right</button> +</div> +{% endhighlight %} <h3>Multiple button groups</h3> <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> - <button class="btn">1</button> - <button class="btn">2</button> - <button class="btn">3</button> - <button class="btn">4</button> + <button type="button" class="btn">1</button> + <button type="button" class="btn">2</button> + <button type="button" class="btn">3</button> + <button type="button" class="btn">4</button> </div> <div class="btn-group"> - <button class="btn">5</button> - <button class="btn">6</button> - <button class="btn">7</button> + <button type="button" class="btn">5</button> + <button type="button" class="btn">6</button> + <button type="button" class="btn">7</button> </div> <div class="btn-group"> - <button class="btn">8</button> + <button type="button" class="btn">8</button> </div> </div> </div> -<pre class="prettyprint linenums"> -<div class="btn-toolbar"> - <div class="btn-group"> - ... - </div> -</div> -</pre> +{% highlight html linenos %} +<div class="btn-toolbar"> + <div class="btn-group">...</div> + <div class="btn-group">...</div> + <div class="btn-group">...</div> +</div> +{% endhighlight %} <h3>Vertical button groups</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> @@ -231,11 +169,11 @@ <button type="button" class="btn"><i class="glyphicon-align-justify"></i></button> </div> </div> -<pre class="prettyprint linenums"> -<div class="btn-group btn-group-vertical"> +{% highlight html linenos %} +<div class="btn-group btn-group-vertical"> ... -</div> -</pre> +</div> +{% endhighlight %} <h3>Justified button groups</h3> <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p> @@ -246,11 +184,11 @@ <a href="#" class="btn">Middle</a> </div> </div> -<pre class="prettyprint linenums"> -<div class="btn-group btn-group-justified"> +{% highlight html linenos %} +<div class="btn-group btn-group-justified"> ... -</div> -</pre> +</div> +{% endhighlight %} </section> @@ -378,36 +316,45 @@ </div><!-- /btn-group --> </div><!-- /btn-toolbar --> </div> -<pre class="prettyprint linenums"> -<-- Single button --> -<div class="btn-group"> - <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> - Action - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <!-- dropdown menu links --> - </ul> -</div> - -<-- Split button --> -<div class="btn-group"> - <button class="btn">Action</button> - <button class="btn dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <!-- dropdown menu links --> - </ul> -</div> -</pre> +{% highlight html linenos %} +<!-- Single button --> +<div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + Action <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> +</div> + +<!-- Split button --> +<div class="btn-group"> + <button class="btn">Action</button> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> +</div> +{% endhighlight %} <h3>Works with all button sizes</h3> <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> - <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button> + <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown"> + Large button <span class="caret"></span> + </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -417,7 +364,9 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button> + <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown"> + Small button <span class="caret"></span> + </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -427,7 +376,9 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button> + <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown"> + Mini button <span class="caret"></span> + </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -437,7 +388,38 @@ </ul> </div><!-- /btn-group --> </div><!-- /btn-toolbar --> - </div> + </div><!-- /example --> +{% highlight html linenos %} +<!-- Large button group --> +<div class="btn-group"> + <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown"> + Large button <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> +</div> + +<!-- Small button group --> +<div class="btn-group"> + <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown"> + Small button <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> +</div> + +<!-- Mini button group --> +<div class="btn-group"> + <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown"> + Mini button <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> +</div> +{% endhighlight %} <h3>Dropup buttons</h3> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> @@ -466,18 +448,18 @@ </ul> </div><!-- /btn-group --> </div> - </div> -<pre class="prettyprint linenums"> -<div class="btn-group dropup"> - <button class="btn">Dropup</button> - <button class="btn dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <!-- dropdown menu links --> - </ul> -</div> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<div class="btn-group dropup"> + <button class="btn">Dropup</button> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <!-- Dropdown menu links --> + </ul> +</div> +{% endhighlight %} </section> @@ -501,15 +483,13 @@ <li><a href="#">Messages</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> - <li class="active"> - <a href="#">Home</a> - </li> - <li><a href="#">...</a></li> - <li><a href="#">...</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="nav nav-tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> +</ul> +{% endhighlight %} <h2>List</h2> <p>Swap the tabs class for <code>.nav-list</code>.</p> @@ -520,15 +500,13 @@ <li><a href="#">Messages</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-list"> - <li class="active"> - <a href="#">Home</a> - </li> - <li><a href="#">...</a></li> - <li><a href="#">...</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="nav nav-list"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> +</ul> +{% endhighlight %} <h2>Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> @@ -539,15 +517,13 @@ <li><a href="#">Messages</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-pills"> - <li class="active"> - <a href="#">Home</a> - </li> - <li><a href="#">...</a></li> - <li><a href="#">...</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="nav nav-pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> +</ul> +{% endhighlight %} <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-docs-example"> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> @@ -556,11 +532,11 @@ <li><a href="#">Messages</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-pills nav-stacked"> +{% highlight html linenos %} +<ul class="nav nav-pills nav-stacked"> ... -</ul> -</pre> +</ul> +{% endhighlight %} <h2>Options</h2> @@ -579,15 +555,14 @@ <li><a href="#">Messages</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-tabs nav-justified"> +{% highlight html linenos %} +<ul class="nav nav-tabs nav-justified"> ... -</ul> - -<ul class="nav nav-pills nav-justified"> +</ul> +<ul class="nav nav-pills nav-justified"> ... -</ul> -</pre> +</ul> +{% endhighlight %} <h3>Disabled state</h3> <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p> @@ -598,13 +573,14 @@ <li class="disabled"><a href="#">Disabled link</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-pills"> +{% highlight html linenos %} +<ul class="nav nav-tabs"> ... - <li class="disabled"><a href="#">Home</a></li> + <li class="disabled"><a href="#">Disabled link</a></li> ... -</ul> -</pre> +</ul> +{% endhighlight %} + <h3>Component alignment</h3> <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p> @@ -622,7 +598,9 @@ <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -633,21 +611,20 @@ </li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> - <li class="dropdown"> - <a class="dropdown-toggle" - data-toggle="dropdown" - href="#"> - Dropdown - <b class="caret"></b> - </a> - <ul class="dropdown-menu"> - <!-- links --> - </ul> - </li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="nav nav-tabs"> + ... + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> + ... +</ul> +{% endhighlight %} <h3>Pills with dropdowns</h3> <div class="bs-docs-example"> @@ -655,7 +632,9 @@ <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -665,22 +644,21 @@ </ul> </li> </ul> - </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-pills"> - <li class="dropdown"> - <a class="dropdown-toggle" - data-toggle="dropdown" - href="#"> - Dropdown - <b class="caret"></b> - </a> - <ul class="dropdown-menu"> - <!-- links --> - </ul> - </li> -</ul> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<ul class="nav nav-pills"> + ... + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> + ... +</ul> +{% endhighlight %} </section> @@ -705,21 +683,17 @@ <li><a href="#">Link</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<div class="navbar"> - <a class="brand" href="#">Title</a> - <ul class="nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - </ul> -</div> -</pre> - - - <hr class="bs-docs-separator"> - + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar"> + <a class="brand" href="#">Title</a> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> +</div> +{% endhighlight %} <h2>Navbar components</h2> @@ -729,10 +703,10 @@ <div class="navbar"> <a class="brand" href="#">Title</a> </div> - </div> -<pre class="prettyprint linenums"> -<a class="brand" href="#">Project name</a> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<a class="brand" href="#">Title</a> +{% endhighlight %} <h3>Nav links</h3> <p>Nav items are simple to add via unordered lists.</p> @@ -744,16 +718,14 @@ <li><a href="#">Link</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<ul class="nav"> - <li class="active"> - <a href="#">Home</a> - </li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> -</ul> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> +</ul> +{% endhighlight %} <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code><li></code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p> <div class="bs-docs-example"> <div class="navbar"> @@ -768,14 +740,14 @@ </ul> </div> </div> - </div> -<pre class="prettyprint linenums"> -<ul class="nav"> + </div><!-- /example --> +{% highlight html linenos %} +<ul class="nav"> ... - <li class="divider"></li> + <li class="divider"></li> ... -</ul> -</pre> +</ul> +{% endhighlight %} <h3>Forms</h3> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> @@ -786,41 +758,24 @@ <button type="submit" class="btn">Submit</button> </form> </div> - </div> -<pre class="prettyprint linenums"> -<form class="pull-left"> - <input type="text" style="width: 200px;"> - <button type="submit" class="btn">Submit</button> -</form> -</pre> + </div><!-- /example --> +{% highlight html linenos %} +<form class="navbar-form pull-left"> + <input type="text" style="width: 200px;"> + <button type="submit" class="btn">Submit</button> +</form> +{% endhighlight %} <h3>Component alignment</h3> <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p> <h3>Using dropdowns</h3> <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p> -<pre class="prettyprint linenums"> -<ul class="nav"> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - Account - <b class="caret"></b> - </a> - <ul class="dropdown-menu"> - ... - </ul> - </li> -</ul> -</pre> - <p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p> <h3>Text</h3> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> - <hr class="bs-docs-separator"> - - <h2>Optional display variations</h2> <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p> @@ -837,12 +792,12 @@ </ul> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="navbar navbar-fixed-top"> + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar navbar-fixed-top"> ... -</div> -</pre> +</div> +{% endhighlight %} <h3>Fixed to bottom</h3> <p>Add <code>.navbar-fixed-bottom</code> instead.</p> @@ -857,12 +812,12 @@ </ul> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="navbar navbar-fixed-bottom"> + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar navbar-fixed-bottom"> ... -</div> -</pre> +</div> +{% endhighlight %} <h3>Static top navbar</h3> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p> @@ -877,15 +832,12 @@ </ul> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="navbar navbar-static-top"> + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar navbar-static-top"> ... -</div> -</pre> - - - <hr class="bs-docs-separator"> +</div> +{% endhighlight %} <h2>Responsive navbar</h2> @@ -935,40 +887,36 @@ </li> </ul> </div><!-- /.nav-collapse --> - </div> + </div><!-- /.container --> + </div><!-- /.navbar --> + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar"> + <div class="container"> + + <!-- .btn-navbar is used as the toggle for collapsed navbar content --> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + + <!-- Be sure to leave the brand out there if you want it shown --> + <a class="brand" href="#">Title</a> + + <!-- Place everything within .navbar-collapse to hide it until above 768px --> + <div class="nav-collapse collapse navbar-responsive-collapse"> + ... + </div><!-- /.nav-collapse --> + </div><!-- /.container --> +</div><!-- /.navbar --> +{% endhighlight %} - </div><!-- /navbar --> - </div> -<pre class="prettyprint linenums"> -<div class="navbar"> - <div class="container"> - - <!-- .btn-navbar is used as the toggle for collapsed navbar content --> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </a> - - <!-- Be sure to leave the brand out there if you want it shown --> - <a class="brand" href="#">Project name</a> - - <!-- Everything you want hidden at 940px or less, place within here --> - <div class="nav-collapse collapse"> - <!-- .nav, .navbar-search, .navbar-form, etc --> - </div> - - </div> -</div> -</pre> <div class="alert alert-info"> <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. </div> - <hr class="bs-docs-separator"> - - <h2>Inverted variation</h2> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <div class="bs-docs-example"> @@ -1018,12 +966,12 @@ </div><!-- /.nav-collapse --> </div> </div><!-- /navbar --> - </div> -<pre class="prettyprint linenums"> -<div class="navbar navbar-inverse"> + </div><!-- /example --> +{% highlight html linenos %} +<div class="navbar navbar-inverse"> ... -</div> -</pre> +</div> +{% endhighlight %} </section> @@ -1051,13 +999,14 @@ <li class="active">Data</li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="breadcrumb"> - <li><a href="#">Home</a></li> - <li><a href="#">Library</a></li> - <li class="active">Data</li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="breadcrumb"> + <li><a href="#">Home</a></li> + <li><a href="#">Library</a></li> + <li class="active">Data</li> +</ul> +{% endhighlight %} + </section> @@ -1084,17 +1033,17 @@ <li><a href="#">»</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="pagination"> - <li><a href="#">Prev</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">Next</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="pagination"> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> +</ul> +{% endhighlight %} <h3>Disabled and active states</h3> <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p> @@ -1109,21 +1058,22 @@ <li><a href="#">»</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="pagination"> - <li class="disabled"><a href="#">&laquo;</a></li> - <li class="active"><a href="#">1</a></li> +{% highlight html linenos %} +<ul class="pagination"> + <li class="disabled"><a href="#">«</a></li> + <li class="active"><a href="#">1</a></li> ... -</ul> -</pre> - <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p> -<pre class="prettyprint linenums"> -<ul class="pagination"> - <li class="disabled"><span>&laquo;</span></li> - <li class="active"><span>1</span></li> +</ul> +{% endhighlight %} + <p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p> +{% highlight html linenos %} +<ul class="pagination"> + <li class="disabled"><span>«</span></li> + <li class="active"><span>1</span></li> ... -</ul> -</pre> +</ul> +{% endhighlight %} + <h3>Sizes</h3> <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p> @@ -1173,20 +1123,13 @@ </ul> </div> </div> -<pre class="prettyprint linenums"> -<ul class="pagination pagination-large"> - ... -</ul> -<ul class="pagination"> - ... -</ul> -<ul class="pagination pagination-small"> - ... -</ul> -<ul class="pagination pagination-mini"> - ... -</ul> -</pre> +{% highlight html linenos %} +<ul class="pagination pagination-large">...</ul> +<ul class="pagination pagination">...</ul> +<ul class="pagination pagination-small">...</ul> +<ul class="pagination pagination-mini">...</ul> +{% endhighlight %} + <h2 id="pagination-pager">Pager</h2> <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p> @@ -1199,12 +1142,12 @@ <li><a href="#">Next</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="pager"> - <li><a href="#">Previous</a></li> - <li><a href="#">Next</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="pager"> + <li><a href="#">Previous</a></li> + <li><a href="#">Next</a></li> +</ul> +{% endhighlight %} <h3>Aligned links</h3> <p>Alternatively, you can align each link to the sides:</p> @@ -1214,16 +1157,13 @@ <li class="next"><a href="#">Newer →</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="pager"> - <li class="previous"> - <a href="#">&larr; Older</a> - </li> - <li class="next"> - <a href="#">Newer &rarr;</a> - </li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="pager"> + <li class="previous"><a href="#">← Older</a></li> + <li class="next"><a href="#">Newer →</a></li> +</ul> +{% endhighlight %} + <h3>Optional disabled state</h3> <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p> @@ -1233,14 +1173,13 @@ <li class="next"><a href="#">Newer →</a></li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="pager"> - <li class="previous disabled"> - <a href="#">&larr; Older</a> - </li> - ... -</ul> -</pre> +{% highlight html linenos %} +<ul class="pager"> + <li class="previous disabled"><a href="#">← Older</a></li> + <li class="next"><a href="#">Newer →</a></li> +</ul> +{% endhighlight %} + </section> @@ -1257,12 +1196,9 @@ <div class="bs-docs-example"> <a href="#">Inbox <span class="counter">42</span></a> </div> -<pre class="prettyprint linenums"> -<a href="#"> - Inbox - <span class="counter">42</span> -</a> -</pre> +{% highlight html linenos %} +<a href="#">Inbox <span class="counter">42</span></a> +{% endhighlight %} <h4>Self collapsing</h4> <p>When there are no new or unread items, counters will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p> @@ -1292,15 +1228,17 @@ </li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-list"> - <li class="active"> - <a href="#">Home</a> - </li> - <li><a href="#">...</a></li> - <li><a href="#">...</a></li> -</ul> -</pre> +{% highlight html linenos %} +<ul class="nav nav-list"> + <li class="active"> + <a href="#"> + <span class="counter pull-right">42</span> + Home + </a> + </li> + ... +</ul> +{% endhighlight %} </section> @@ -1322,17 +1260,13 @@ <p><a class="btn btn-primary btn-large">Learn more</a></p> </div> </div> -<pre class="prettyprint linenums"> -<div class="jumbotron"> - <h1>Heading</h1> - <p>Tagline</p> - <p> - <a class="btn btn-primary btn-large"> - Learn more - </a> - </p> -</div> -</pre> +{% highlight html linenos %} +<div class="jumbotron"> + <h1>Hello, world!</h1> + <p>...</p> + <p><a class="btn btn-primary btn-large">Learn more</a></p> +</div> +{% endhighlight %} <h2>Page header</h2> <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p> @@ -1341,11 +1275,11 @@ <h1>Example page header <small>Subtext for header</small></h1> </div> </div> -<pre class="prettyprint linenums"> -<div class="page-header"> - <h1>Example page header <small>Subtext for header</small></h1> -</div> -</pre> +{% highlight html linenos %} +<div class="page-header"> + <h1>Example page header <small>Subtext for header</small></h1> +</div> +{% endhighlight %} </section> @@ -1384,17 +1318,17 @@ </a> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="row"> - <div class="span3"> - <a href="#" class="thumbnail"> - <img src="holder.js/260x180" alt=""> - </a> - </div> + </div><!-- /.bs-docs-example --> +{% highlight html linenos %} +<div class="row"> + <div class="span3"> + <a href="#" class="thumbnail"> + <img data-src="holder.js/260x180" alt=""> + </a> + </div> ... -</div> -</pre> +</div> +{% endhighlight %} <h3>Custom content thumbnails</h3> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> @@ -1431,19 +1365,23 @@ </div> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="row"> - <div class="span4"> - <div class="thumbnail"> - <img data-src="holder.js/300x200" alt=""> - <h3>Thumbnail label</h3> - <p>Thumbnail caption...</p> - </div> - </div> + </div><!-- /.bs-docs-example --> +{% highlight html linenos %} +<div class="row"> + <div class="span3"> + <div class="thumbnail"> + <img data-src="holder.js/300x200" alt=""> + <div class="caption"> + <h3>Thumbnail label</h3> + <p>...</p> + <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </div> ... -</div> -</pre> +</div> +{% endhighlight %} + </section> @@ -1466,12 +1404,12 @@ <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> </div> -<pre class="prettyprint linenums"> -<div class="alert"> - <button type="button" class="close" data-dismiss="alert">&times;</button> - <strong>Warning!</strong> Best check yo self, you're not looking too good. -</div> -</pre> +{% highlight html linenos %} +<div class="alert"> + <button type="button" class="close" data-dismiss="alert">×</button> + <strong>Warning!</strong> Best check yo self, you're not looking too good. +</div> +{% endhighlight %} <h3>Block alerts</h3> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> @@ -1482,13 +1420,13 @@ <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> </div> </div> -<pre class="prettyprint linenums"> -<div class="alert alert-block"> - <button type="button" class="close" data-dismiss="alert">&times;</button> - <h4>Warning!</h4> - Best check yo self, you're not... -</div> -</pre> +{% highlight html linenos %} +<div class="alert alert-block"> + <button type="button" class="close" data-dismiss="alert">×</button> + <h4>Warning!</h4> + <p>...</p> +</div> +{% endhighlight %} <h3>Contextual alternatives</h3> <p>Add optional classes to change an alert's connotation.</p> @@ -1506,11 +1444,11 @@ <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> </div> -<pre class="prettyprint linenums"> -<div class="alert alert-error">... </div> -<div class="alert alert-success">...</div> -<div class="alert alert-info">...</div> -</pre> +{% highlight html linenos %} +<div class="alert alert-error">...</div> +<div class="alert alert-success">...</div> +<div class="alert alert-info">...</div> +{% endhighlight %} </section> @@ -1533,11 +1471,11 @@ <div class="progress-bar" style="width: 60%;"></div> </div> </div> -<pre class="prettyprint linenums"> -<div class="progress"> - <div class="progress-bar" style="width: 60%;"></div> -</div> -</pre> +{% highlight html linenos %} +<div class="progress"> + <div class="progress-bar" style="width: 60%;"></div> +</div> +{% endhighlight %} <h3>Additional colors</h3> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> @@ -1555,20 +1493,20 @@ <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> -<pre class="prettyprint linenums"> -<div class="progress"> - <div class="progress-bar progress-bar-info" style="width: 20%"></div> -</div> -<div class="progress"> - <div class="progress-bar progress-bar-success" style="width: 40%"></div> -</div> -<div class="progress"> - <div class="progress-bar progress-bar-warning" style="width: 60%"></div> -</div> -<div class="progress"> - <div class="progress-bar progress-bar-danger" style="width: 80%"></div> -</div> -</pre> +{% highlight html linenos %} +<div class="progress"> + <div class="progress-bar progress-bar-info" style="width: 20%"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-success" style="width: 40%"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-warning" style="width: 60%"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-danger" style="width: 80%"></div> +</div> +{% endhighlight %} <h3>Striped</h3> <p>Uses a gradient to create a striped effect. Not available in IE8.</p> @@ -1586,20 +1524,20 @@ <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-info" style="width: 20%"></div> -</div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-success" style="width: 40%"></div> -</div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-warning" style="width: 60%"></div> -</div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-danger" style="width: 80%"></div> -</div> -</pre> +{% highlight html linenos %} +<div class="progress progress-striped"> + <div class="progress-bar progress-bar-info" style="width: 20%"></div> +</div> +<div class="progress progress-striped"> + <div class="progress-bar progress-bar-success" style="width: 40%"></div> +</div> +<div class="progress progress-striped"> + <div class="progress-bar progress-bar-warning" style="width: 60%"></div> +</div> +<div class="progress progress-striped"> + <div class="progress-bar progress-bar-danger" style="width: 80%"></div> +</div> +{% endhighlight %} <h3>Animated</h3> <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> @@ -1608,11 +1546,11 @@ <div class="progress-bar" style="width: 45%"></div> </div> </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped active"> - <div class="progress-bar" style="width: 40%;"></div> -</div> -</pre> +{% highlight html linenos %} +<div class="progress progress-striped active"> + <div class="progress-bar" style="width: 45%"></div> +</div> +{% endhighlight %} <h3>Stacked</h3> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> @@ -1623,13 +1561,13 @@ <div class="progress-bar progress-bar-danger" style="width: 10%"></div> </div> </div> -<pre class="prettyprint linenums"> -<div class="progress"> - <div class="progress-bar progress-bar-success" style="width: 35%;"></div> - <div class="progress-bar progress-bar-warning" style="width: 20%;"></div> - <div class="progress-bar progress-bar-danger" style="width: 10%;"></div> -</div> -</pre> +{% highlight html linenos %} +<div class="progress"> + <div class="progress-bar progress-bar-success" style="width: 35%"></div> + <div class="progress-bar progress-bar-warning" style="width: 20%"></div> + <div class="progress-bar progress-bar-danger" style="width: 10%"></div> +</div> +{% endhighlight %} </section> @@ -1674,23 +1612,18 @@ </div> </div> </div> - </div> -<pre class="prettyprint linenums"> -<div class="media"> - <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64"> - </a> - <div class="media-body"> - <h4 class="media-heading">Media heading</h4> + </div><!-- /.bs-docs-example --> +{% highlight html linenos %} +<div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Media heading</h4> ... - - <!-- Nested media object --> - <div class="media"> - ... - </div> - </div> -</div> -</pre> + </div> +</div> +{% endhighlight %} <h3>Media list</h3> <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p> @@ -1746,24 +1679,19 @@ </li> </ul> </div> -<pre class="prettyprint linenums"> -<ul class="media-list"> - <li class="media"> - <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64"> - </a> - <div class="media-body"> - <h4 class="media-heading">Media heading</h4> +{% highlight html linenos %} +<ul class="media-list"> + <li class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Media heading</h4> ... - - <!-- Nested media object --> - <div class="media"> - ... - </div> - </div> - </li> -</ul> -</pre> + </div> + </li> +</ul> +{% endhighlight %} </section> @@ -1785,11 +1713,9 @@ Look, I'm in a well! </div> </div> -<pre class="prettyprint linenums"> -<div class="well"> - ... -</div> -</pre> +{% highlight html linenos %} +<div class="well">...</div> +{% endhighlight %} <h3>Optional classes</h3> <p>Control padding and rounded corners with two optional modifier classes.</p> <div class="bs-docs-example"> @@ -1797,73 +1723,72 @@ Look, I'm in a well! </div> </div> -<pre class="prettyprint linenums"> -<div class="well well-large"> - ... -</div> -</pre> +{% highlight html linenos %} +<div class="well well-large">...</div> +{% endhighlight %} + <div class="bs-docs-example"> <div class="well well-small"> Look, I'm in a well! </div> </div> -<pre class="prettyprint linenums"> -<div class="well well-small"> - ... -</div> -</pre> +{% highlight html linenos %} +<div class="well well-small">...</div> +{% endhighlight %} + <h2>Close icon</h2> <p>Use the generic close icon for dismissing content like modals and alerts.</p> <div class="bs-docs-example"> <p><button class="close" style="float: none;">×</button></p> </div> - <pre class="prettyprint linenums"><button class="close">&times;</button></pre> - <p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p> - <pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre> +{% highlight html linenos %} +<button class="close" style="float: none;">×</button> +{% endhighlight %} <h2>Helper classes</h2> <p>Simple, focused classes for small display or behavior tweaks.</p> <h4>.pull-left</h4> <p>Float an element left</p> -<pre class="prettyprint linenums"> -class="pull-left" -</pre> -<pre class="prettyprint linenums"> +{% highlight html linenos %} +<div class="pull-left">...</div> +{% endhighlight %} +{% highlight css linenos %} .pull-left { float: left; } -</pre> +{% endhighlight %} <h4>.pull-right</h4> <p>Float an element right</p> -<pre class="prettyprint linenums"> -class="pull-right" -</pre> -<pre class="prettyprint linenums"> +{% highlight html linenos %} +<div class="pull-right">...</div> +{% endhighlight %} +{% highlight css linenos %} .pull-right { float: right; } -</pre> +{% endhighlight %} <h4>.muted</h4> <p>Change an element's color to <code>#999</code></p> -<pre class="prettyprint linenums"> -class="muted" -</pre> -<pre class="prettyprint linenums"> +{% highlight html linenos %} +<p class="muted">...</p> +{% endhighlight %} +{% highlight css linenos %} .muted { color: #999; } -</pre> +{% endhighlight %} + <h4>.clearfix</h4> <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> -<pre class="prettyprint linenums"> -class="clearfix" -</pre> -<pre class="prettyprint linenums"> +{% highlight html linenos %} +<div class="clearfix">...</div> +{% endhighlight %} +{% highlight css linenos %} .clearfix { &:before, &:after { @@ -1874,81 +1799,14 @@ class="clearfix" clear: both; } } -</pre> - - </section> - - - - </div> - </div> - - </div> +{% endhighlight %} + </section> - <!-- Footer - ================================================== --> - <footer class="footer"> - <div class="container"> - - <div class="bs-docs-social"> - <ul class="bs-docs-social-buttons"> - <li> - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> - </li> - <li> - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe> - </li> - <li class="follow-btn"> - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a> - </li> - <li class="tweet-btn"> - <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a> - </li> - </ul> - </div> - - - <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> - <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <ul class="footer-links"> - <li><a href="http://blog.getbootstrap.com">Blog</a></li> - <li class="muted">·</li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> - <li class="muted">·</li> - <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">Changelog</a></li> - </ul> - </div> - </footer> + </div><!-- /span9 --> + </div><!-- row --> - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="assets/js/jquery.js"></script> - <script src="assets/js/bootstrap-transition.js"></script> - <script src="assets/js/bootstrap-alert.js"></script> - <script src="assets/js/bootstrap-modal.js"></script> - <script src="assets/js/bootstrap-dropdown.js"></script> - <script src="assets/js/bootstrap-scrollspy.js"></script> - <script src="assets/js/bootstrap-tab.js"></script> - <script src="assets/js/bootstrap-tooltip.js"></script> - <script src="assets/js/bootstrap-popover.js"></script> - <script src="assets/js/bootstrap-button.js"></script> - <script src="assets/js/bootstrap-collapse.js"></script> - <script src="assets/js/bootstrap-carousel.js"></script> - <script src="assets/js/bootstrap-typeahead.js"></script> - <script src="assets/js/bootstrap-affix.js"></script> - - <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> - <script src="assets/js/holder/holder.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - - <script src="assets/js/application.js"></script> - - - </body> -</html> + </div><!-- /.container --> |