kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

.bs-docs-example to .bs-example

This commit is contained in:
Mark Otto 2013-05-08 22:56:29 -07:00
parent ac28ad81d0
commit 09c3a4b3bc
5 changed files with 206 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
docs/assets/css/docs.css
View File

@ -211,7 +211,7 @@ body {
-------------------------------------------------- */ -------------------------------------------------- */
/* Base class */ /* Base class */
.bs-docs-example { .bs-example {
position: relative; position: relative;
padding: 39px 14px 14px; padding: 39px 14px 14px;
margin-bottom: -1px; margin-bottom: -1px;
@ -220,7 +220,7 @@ body {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
/* Echo out a label for the example */ /* Echo out a label for the example */
.bs-docs-example:after { .bs-example:after {
content: "Example"; content: "Example";
position: absolute; position: absolute;
top: -1px; top: -1px;
@ -236,56 +236,56 @@ body {
} }
/* Tweak display of the examples */ /* Tweak display of the examples */
.bs-docs-example + .prettyprint, .bs-example + .prettyprint,
.bs-docs-example + .highlight { .bs-example + .highlight {
margin-top: 0; margin-top: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
/* Tweak content of examples for optimum awesome */ /* Tweak content of examples for optimum awesome */
.bs-docs-example > p:last-child, .bs-example > p:last-child,
.bs-docs-example > ul:last-child, .bs-example > ul:last-child,
.bs-docs-example > ol:last-child, .bs-example > ol:last-child,
.bs-docs-example > blockquote:last-child, .bs-example > blockquote:last-child,
.bs-docs-example > input:last-child, .bs-example > input:last-child,
.bs-docs-example > select:last-child, .bs-example > select:last-child,
.bs-docs-example > textarea:last-child, .bs-example > textarea:last-child,
.bs-docs-example > .table:last-child, .bs-example > .table:last-child,
.bs-docs-example > .jumbotron:last-child, .bs-example > .jumbotron:last-child,
.bs-docs-example > .alert:last-child, .bs-example > .alert:last-child,
.bs-docs-example > .panel:last-child, .bs-example > .panel:last-child,
.bs-docs-example > .list-group:last-child, .bs-example > .list-group:last-child,
.bs-docs-example > .well:last-child { .bs-example > .well:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/* Typography */ /* Typography */
.bs-docs-example-type .table td { .bs-example-type .table td {
color: #999; color: #999;
vertical-align: middle; vertical-align: middle;
border-color: ; border-color: ;
} }
.bs-docs-example-type .table td, .bs-example-type .table td,
.bs-docs-example-type .table th { .bs-example-type .table th {
padding: 15px 0; padding: 15px 0;
border-color: #eee; border-color: #eee;
} }
.bs-docs-example-type .table tr:first-child td, .bs-example-type .table tr:first-child td,
.bs-docs-example-type .table tr:first-child th { .bs-example-type .table tr:first-child th {
border-top: 0; border-top: 0;
} }
.bs-docs-example-type h1, .bs-example-type h1,
.bs-docs-example-type h2, .bs-example-type h2,
.bs-docs-example-type h3, .bs-example-type h3,
.bs-docs-example-type h4, .bs-example-type h4,
.bs-docs-example-type h5, .bs-example-type h5,
.bs-docs-example-type h6 { .bs-example-type h6 {
margin: 0; margin: 0;
} }
/* List groups */ /* List groups */
.bs-docs-example > .list-group { .bs-example > .list-group {
max-width: 400px; max-width: 400px;
} }
@ -331,10 +331,10 @@ body {
} }
/* Example modals */ /* Example modals */
.bs-docs-example-modal { .bs-example-modal {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.bs-docs-example-modal .modal { .bs-example-modal .modal {
position: relative; position: relative;
top: auto; top: auto;
right: auto; right: auto;
@ -343,29 +343,29 @@ body {
z-index: 1; z-index: 1;
display: block; display: block;
} }
.bs-docs-example-modal .modal-dialog { .bs-example-modal .modal-dialog {
left: auto; left: auto;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* Example dropdowns */ /* Example dropdowns */
.bs-docs-example > .dropdown > .dropdown-menu, .bs-example > .dropdown > .dropdown-menu,
.bs-docs-example-submenu > .pull-left > .dropup > .dropdown-menu, .bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
.bs-docs-example-submenu > .pull-left > .dropdown > .dropdown-menu { .bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
position: static; position: static;
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-docs-example-submenu { .bs-example-submenu {
min-height: 230px; min-height: 230px;
} }
.bs-docs-example-submenu > .pull-left + .pull-left { .bs-example-submenu > .pull-left + .pull-left {
margin-left: 20px; margin-left: 20px;
} }
/* Example tabbable tabs */ /* Example tabbable tabs */
.bs-docs-example-tabs .nav-tabs { .bs-example-tabs .nav-tabs {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -381,11 +381,11 @@ body {
} }
/* Popovers */ /* Popovers */
.bs-docs-example-popover { .bs-example-popover {
padding-bottom: 24px; padding-bottom: 24px;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.bs-docs-example-popover .popover { .bs-example-popover .popover {
position: relative; position: relative;
display: block; display: block;
float: left; float: left;
@ -398,10 +398,10 @@ body {
/* Example templates /* Example templates
-------------------------------------------------- */ -------------------------------------------------- */
.bs-docs-examples h4 { .bs-examples h4 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-docs-examples p { .bs-examples p {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -629,7 +629,7 @@ input.focused {
/* Hide code snippets on mobile devices */ /* Hide code snippets on mobile devices */
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.bs-docs-example { .bs-example {
border-radius: 4px; border-radius: 4px;
} }
.highlight { .highlight {

166
docs/components.html
View File

@ -204,7 +204,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h4>Buttons</h4> <h4>Buttons</h4>
<h5>Button group in a button toolbar</h5> <h5>Button group in a button toolbar</h5>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a> <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
@ -213,7 +213,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a> <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div> </div>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-example -->
{% highlight html %} {% highlight html %}
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
@ -231,7 +231,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div> </div>
<h5>Dropdown in a button group</h5> <h5>Dropdown in a button group</h5>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@ -243,7 +243,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li> <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-example -->
{% highlight html %} {% highlight html %}
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a> <a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
@ -259,31 +259,31 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %} {% endhighlight %}
<h5>Large button</h5> <h5>Large button</h5>
<div class="bs-docs-example"> <div class="bs-example">
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a> <a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example --> </div><!-- /bs-example -->
{% highlight html %} {% highlight html %}
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a> <a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %} {% endhighlight %}
<h5>Small button</h5> <h5>Small button</h5>
<div class="bs-docs-example"> <div class="bs-example">
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a> <a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
</div><!-- /bs-docs-example --> </div><!-- /bs-example -->
{% highlight html %} {% highlight html %}
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a> <a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %} {% endhighlight %}
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li> <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li> <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li> <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul> </ul>
</div><!-- /bs-docs-example --> </div><!-- /bs-example -->
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
@ -294,7 +294,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %} {% endhighlight %}
<h4>Form fields</h4> <h4>Form fields</h4>
<form class="bs-docs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputIcon">Email address</label> <label class="control-label" for="inputIcon">Email address</label>
<div class="controls"> <div class="controls">
@ -331,7 +331,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-example">Example</h3> <h3 id="dropdowns-example">Example</h3>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
@ -365,7 +365,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-disabled">Disabled menu options</h3> <h3 id="dropdowns-disabled">Disabled menu options</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p> <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li> <li><a tabindex="-1" href="#">Regular link</a></li>
@ -384,7 +384,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-submenus">Sub menus on dropdowns</h3> <h3 id="dropdowns-submenus">Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p> <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenu"> <div class="bs-example bs-example-submenu">
<div class="pull-left"> <div class="pull-left">
<p class="text-muted">Default</p> <p class="text-muted">Default</p>
@ -484,7 +484,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-single">Basic button group</h3> <h3 id="btn-groups-single">Basic button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;"> <div class="btn-group" style="margin: 9px 0 5px;">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
@ -501,7 +501,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-toolbar">Multiple button groups</h3> <h3 id="btn-groups-toolbar">Multiple button groups</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p> <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-toolbar" style="margin: 0;"> <div class="btn-toolbar" style="margin: 0;">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
@ -529,7 +529,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-nested">Nested button groups</h3> <h3 id="btn-groups-nested">Nested button groups</h3>
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p> <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
@ -551,7 +551,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-vertical">Vertical button groups</h3> <h3 id="btn-groups-vertical">Vertical button groups</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-group btn-group-vertical"> <div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button> <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button> <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
@ -567,7 +567,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-justified">Justified button groups</h3> <h3 id="btn-groups-justified">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>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p> <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>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Left</a>
<a href="#" class="btn btn-default">Right</a> <a href="#" class="btn btn-default">Right</a>
@ -599,7 +599,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-single">Single button dropdowns</h3> <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
<p>Turn a button into dropdown toggle with some basic markup changes.</p> <p>Turn a button into dropdown toggle with some basic markup changes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-toolbar" style="margin-bottom: 10px;"> <div class="btn-toolbar" style="margin-bottom: 10px;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -671,7 +671,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-split">Split button dropdowns</h3> <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p> <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-toolbar" style="margin: 0;"> <div class="btn-toolbar" style="margin: 0;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default">Action</button> <button class="btn btn-default">Action</button>
@ -749,7 +749,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-sizes">Works with all button sizes</h3> <h3 id="btn-dropdowns-sizes">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> <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="bs-example">
<div class="btn-toolbar" style="margin: 0;"> <div class="btn-toolbar" style="margin: 0;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
@ -823,7 +823,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-dropup">Dropup buttons</h3> <h3 id="btn-dropdowns-dropup">Dropup buttons</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button class="btn btn-default">Dropup</button> <button class="btn btn-default">Dropup</button>
@ -876,7 +876,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="nav-tabs">Tabs</h2> <h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
@ -893,7 +893,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="nav-pills">Pills</h2> <h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
@ -908,7 +908,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
@ -925,7 +925,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="nav-justified">Justified links</h3> <h3 id="nav-justified">Justified links</h3>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p> <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
@ -955,7 +955,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p> <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div> </div>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li>
@ -982,7 +982,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p> <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
@ -1016,7 +1016,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %} {% endhighlight %}
<h3>Pills with dropdowns</h3> <h3>Pills with dropdowns</h3>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
@ -1063,7 +1063,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="navbar-basic">Basic navbar</h2> <h2 id="navbar-basic">Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p> <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
@ -1088,7 +1088,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-brand">Brand</h3> <h3 id="navbar-brand">Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p> <p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
</div> </div>
@ -1099,7 +1099,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-nav">Nav links</h3> <h3 id="navbar-nav">Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p> <p>Nav items are simple to add via unordered lists.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
@ -1118,7 +1118,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-forms">Forms</h3> <h3 id="navbar-forms">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> <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>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
@ -1167,7 +1167,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-buttons">Buttons</h3> <h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn">Submit</button> <button type="button" class="btn">Submit</button>
@ -1176,7 +1176,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-text">Text</h3> <h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
@ -1191,7 +1191,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-links">Links</h3> <h3 id="navbar-links">Links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
@ -1213,7 +1213,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-fixed-top">Fixed to top</h3> <h3 id="navbar-fixed-top">Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code>.</p> <p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-docs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
@ -1249,7 +1249,7 @@ body {
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3> <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-docs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom"> <div class="navbar navbar-fixed-bottom">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
@ -1285,7 +1285,7 @@ body {
<h3 id="navbar-static-top">Static top navbar</h3> <h3 id="navbar-static-top">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-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-docs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;"> <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
@ -1306,7 +1306,7 @@ body {
<h2 id="navbar-responsive">Responsive navbar</h2> <h2 id="navbar-responsive">Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p> <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
@ -1383,7 +1383,7 @@ body {
<h2>Inverted variation</h2> <h2>Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
@ -1448,7 +1448,7 @@ body {
</div> </div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p> <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through `:after` and `content`.</p> <p>Separators are automatically added in CSS through `:after` and `content`.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="breadcrumb"> <ul class="breadcrumb">
<li class="active">Home</li> <li class="active">Home</li>
</ul> </ul>
@ -1483,7 +1483,7 @@ body {
<h2 id="pagination-default">Standard pagination</h2> <h2 id="pagination-default">Standard pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="pagination"> <ul class="pagination">
<li><a href="#">&laquo;</a></li> <li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
@ -1508,7 +1508,7 @@ body {
<h3>Disabled and active states</h3> <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> <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li> <li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li> <li class="active"><a href="#">1</a></li>
@ -1538,7 +1538,7 @@ body {
<h3>Sizes</h3> <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> <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div> <div>
<ul class="pagination pagination-large"> <ul class="pagination pagination-large">
<li><a href="#">&laquo;</a></li> <li><a href="#">&laquo;</a></li>
@ -1597,7 +1597,7 @@ body {
<h3>Default example</h3> <h3>Default example</h3>
<p>By default, the pager centers links.</p> <p>By default, the pager centers links.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="pager"> <ul class="pager">
<li><a href="#">Previous</a></li> <li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li> <li><a href="#">Next</a></li>
@ -1612,7 +1612,7 @@ body {
<h3>Aligned links</h3> <h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p> <p>Alternatively, you can align each link to the sides:</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="pager"> <ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li> <li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer &rarr;</a></li>
@ -1628,7 +1628,7 @@ body {
<h3>Optional disabled state</h3> <h3>Optional disabled state</h3>
<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p> <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="pager"> <ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li> <li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer &rarr;</a></li>
@ -1653,7 +1653,7 @@ body {
<p class="lead"></p> <p class="lead"></p>
<h3>Example</h3> <h3>Example</h3>
<div class="bs-docs-example"> <div class="bs-example">
<h1>Example heading <span class="label">New</span></h1> <h1>Example heading <span class="label">New</span></h1>
<h2>Example heading <span class="label">New</span></h2> <h2>Example heading <span class="label">New</span></h2>
<h3>Example heading <span class="label">New</span></h3> <h3>Example heading <span class="label">New</span></h3>
@ -1667,7 +1667,7 @@ body {
<h3>Available variations</h3> <h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p> <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-docs-example"> <div class="bs-example">
<span class="label">Default</span> <span class="label">Default</span>
<span class="label label-success">Success</span> <span class="label label-success">Success</span>
<span class="label label-warning">Warning</span> <span class="label label-warning">Warning</span>
@ -1694,7 +1694,7 @@ body {
</div> </div>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p> <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example"> <div class="bs-example">
<a href="#">Inbox <span class="badge">42</span></a> <a href="#">Inbox <span class="badge">42</span></a>
</div> </div>
{% highlight html %} {% highlight html %}
@ -1711,7 +1711,7 @@ body {
<h4>Adapts to active nav states</h4> <h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill and list navigations.</p> <p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
@ -1758,7 +1758,7 @@ body {
<h2 id="type-components-jumbotron">Jumbotron</h2> <h2 id="type-components-jumbotron">Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p> <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="jumbotron"> <div class="jumbotron">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
@ -1775,7 +1775,7 @@ body {
<h2 id="type-components-page-header">Page header</h2> <h2 id="type-components-page-header">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 as most other components (with additional styles).</p> <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 as most other components (with additional styles).</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="page-header"> <div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1> <h1>Example page header <small>Subtext for header</small></h1>
</div> </div>
@ -1799,7 +1799,7 @@ body {
<h3>Default thumbnails</h3> <h3>Default thumbnails</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
@ -1822,7 +1822,7 @@ body {
</a> </a>
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col col-lg-3">
@ -1836,7 +1836,7 @@ body {
<h3>Custom content thumbnails</h3> <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> <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>
<div class="bs-docs-example"> <div class="bs-example">
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
@ -1869,7 +1869,7 @@ body {
</div> </div>
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col col-lg-3">
@ -1899,7 +1899,7 @@ body {
<h3 id="alerts-default">Default alert</h3> <h3 id="alerts-default">Default alert</h3>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p> <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="alert"> <div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good. <strong>Warning!</strong> Best check yo self, you're not looking too good.
@ -1914,7 +1914,7 @@ body {
<h3 id="alerts-block">Block alerts</h3> <h3 id="alerts-block">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> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="alert alert-block"> <div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4> <h4>Warning!</h4>
@ -1931,7 +1931,7 @@ body {
<h3 id="alerts-alternatives">Contextual alternatives</h3> <h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p> <p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="alert alert-danger"> <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
@ -1970,7 +1970,7 @@ body {
<h3 id="progress-basic">Basic</h3> <h3 id="progress-basic">Basic</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width: 60%;"></div> <div class="progress-bar" style="width: 60%;"></div>
</div> </div>
@ -1983,7 +1983,7 @@ body {
<h3 id="progress-alternatives">Contextual alternatives</h3> <h3 id="progress-alternatives">Contextual alternatives</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="progress" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
@ -2014,7 +2014,7 @@ body {
<h3 id="progress-striped">Striped</h3> <h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
@ -2045,7 +2045,7 @@ body {
<h3 id="progress-animated">Animated</h3> <h3 id="progress-animated">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> <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>
<div class="bs-docs-example"> <div class="bs-example">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div> <div class="progress-bar" style="width: 45%"></div>
</div> </div>
@ -2058,7 +2058,7 @@ body {
<h3 id="progress-stacked">Stacked</h3> <h3 id="progress-stacked">Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div> <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-warning" style="width: 20%"></div>
@ -2087,7 +2087,7 @@ body {
<h3>Default example</h3> <h3>Default example</h3>
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p> <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="media"> <div class="media">
<a class="pull-left" href="#"> <a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64"> <img class="media-object" data-src="holder.js/64x64">
@ -2115,7 +2115,7 @@ body {
</div> </div>
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="media"> <div class="media">
<a class="pull-left" href="#"> <a class="pull-left" href="#">
@ -2130,7 +2130,7 @@ body {
<h3>Media list</h3> <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> <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="media-list"> <ul class="media-list">
<li class="media"> <li class="media">
<a class="pull-left" href="#"> <a class="pull-left" href="#">
@ -2211,7 +2211,7 @@ body {
<h3 id="list-group-basic">Basic list group</h3> <h3 id="list-group-basic">Basic list group</h3>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p> <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
@ -2232,7 +2232,7 @@ body {
<h3 id="list-group-chevrons">With chevrons</h3> <h3 id="list-group-chevrons">With chevrons</h3>
<p>Add Glyphicon chevrons that are automatically moved to the right.</p> <p>Add Glyphicon chevrons that are automatically moved to the right.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
@ -2259,7 +2259,7 @@ body {
<h3 id="list-group-badges">With badges</h3> <h3 id="list-group-badges">With badges</h3>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p> <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="badge">14</span> <span class="badge">14</span>
@ -2286,7 +2286,7 @@ body {
<h3 id="list-group-badges-chevrons">With badges and chevrons</h3> <h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
<p>Why not both?</p> <p>Why not both?</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
@ -2317,7 +2317,7 @@ body {
<h3 id="list-group-linked">Linked list group</h3> <h3 id="list-group-linked">Linked list group</h3>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p> <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active"> <a href="#" class="list-group-item active">
Cras justo odio Cras justo odio
@ -2360,7 +2360,7 @@ body {
<h3 id="list-group-custom-content">Custom content</h3> <h3 id="list-group-custom-content">Custom content</h3>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p> <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active"> <a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4> <h4 class="list-group-item-heading">List group item heading</h4>
@ -2399,7 +2399,7 @@ body {
<h3 id="panels-basic">Basic panel</h3> <h3 id="panels-basic">Basic panel</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p> <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
Basic panel example Basic panel example
</div> </div>
@ -2412,7 +2412,7 @@ body {
<h3 id="panels-heading">Panel with heading</h3> <h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p> <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content Panel content
@ -2427,7 +2427,7 @@ body {
<h3 id="panels-alternatives">Contextual alternatives</h3> <h3 id="panels-alternatives">Contextual alternatives</h3>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p> <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content Panel content
@ -2459,7 +2459,7 @@ body {
<h3 id="panels-list-group">With list groups</h3> <h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p> <p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
@ -2507,7 +2507,7 @@ body {
<h3>Default well</h3> <h3>Default well</h3>
<p>Use the well as a simple effect on an element to give it an inset effect.</p> <p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="well"> <div class="well">
Look, I'm in a well! Look, I'm in a well!
</div> </div>
@ -2517,7 +2517,7 @@ body {
{% endhighlight %} {% endhighlight %}
<h3>Optional classes</h3> <h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p> <p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="well well-large"> <div class="well well-large">
Look, I'm in a well! Look, I'm in a well!
</div> </div>
@ -2526,7 +2526,7 @@ body {
<div class="well well-large">...</div> <div class="well well-large">...</div>
{% endhighlight %} {% endhighlight %}
<div class="bs-docs-example"> <div class="bs-example">
<div class="well well-small"> <div class="well well-small">
Look, I'm in a well! Look, I'm in a well!
</div> </div>

118
docs/css.html
View File

@ -282,7 +282,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2 id="type-headings">Headings</h2> <h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p> <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-docs-example bs-docs-example-type"> <div class="bs-example bs-example-type">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
@ -324,7 +324,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy --> <!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2> <h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p> <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<div class="bs-docs-example"> <div class="bs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@ -336,7 +336,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy .lead --> <!-- Body copy .lead -->
<h3>Lead body copy</h3> <h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p> <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -354,7 +354,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Small text</h3> <h3>Small text</h3>
<p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p> <p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p> <p><small>This line of text is meant to be treated as fine print.</small></p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -364,7 +364,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Bold</h3> <h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p> <p>For emphasizing a snippet of text with a heavier font-weight.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -373,7 +373,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Italics</h3> <h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p> <p>For emphasizing a snippet of text with italics.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -384,7 +384,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Alignment classes</h3> <h3>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p> <p>Easily realign text to components with text alignment classes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p class="text-left">Left aligned text.</p> <p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p> <p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p> <p class="text-right">Right aligned text.</p>
@ -397,7 +397,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Emphasis classes</h3> <h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p> <p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
@ -417,7 +417,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Basic abbreviation</h3> <h3>Basic abbreviation</h3>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p> <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -426,7 +426,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Initialism</h3> <h3>Initialism</h3>
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p> <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
</div> </div>
{% highlight html %} {% highlight html %}
@ -437,7 +437,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Addresses --> <!-- Addresses -->
<h2 id="type-addresses">Addresses</h2> <h2 id="type-addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p> <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<address> <address>
<strong>Twitter, Inc.</strong><br> <strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br> 795 Folsom Ave, Suite 600<br>
@ -470,7 +470,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Default blockquote</h3> <h3>Default blockquote</h3>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p> <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> </blockquote>
@ -486,7 +486,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Naming a source</h4> <h4>Naming a source</h4>
<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p> <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@ -501,7 +501,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Alternate displays</h4> <h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p> <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
<div class="bs-docs-example" style="overflow: hidden;"> <div class="bs-example" style="overflow: hidden;">
<blockquote class="pull-right"> <blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@ -519,7 +519,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unordered</h3> <h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p> <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul> <ul>
<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li> <li>Consectetur adipiscing elit</li>
@ -546,7 +546,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Ordered</h3> <h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p> <p>A list of items in which the order <em>does</em> explicitly matter.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ol> <ol>
<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li> <li>Consectetur adipiscing elit</li>
@ -566,7 +566,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unstyled</h3> <h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p> <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li> <li>Consectetur adipiscing elit</li>
@ -593,7 +593,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Inline</h3> <h3>Inline</h3>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p> <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="list-inline"> <ul class="list-inline">
<li>Lorem ipsum</li> <li>Lorem ipsum</li>
<li>Phasellus iaculis</li> <li>Phasellus iaculis</li>
@ -608,7 +608,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Description</h3> <h3>Description</h3>
<p>A list of terms with their associated descriptions.</p> <p>A list of terms with their associated descriptions.</p>
<div class="bs-docs-example"> <div class="bs-example">
<dl> <dl>
<dt>Description lists</dt> <dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd> <dd>A description list is perfect for defining terms.</dd>
@ -628,7 +628,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Horizontal description</h4> <h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p> <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<div class="bs-docs-example"> <div class="bs-example">
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>Description lists</dt> <dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd> <dd>A description list is perfect for defining terms.</dd>
@ -664,7 +664,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2>Inline</h2> <h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p> <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline. For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% highlight html %} {% highlight html %}
@ -673,7 +673,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Basic block</h2> <h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p> <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example"> <div class="bs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div> </div>
{% highlight html %} {% highlight html %}
@ -694,7 +694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-example">Basic example</h2> <h2 id="tables-example">Basic example</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p> <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -742,7 +742,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p> <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
</div> </div>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
@ -782,7 +782,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-bordered">Bordered</h3> <h3 id="tables-bordered">Bordered</h3>
<p>Add <code>.table-bordered</code> for borders and rounded corners.</p> <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
@ -826,7 +826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-hover-rows">Hover rows</h3> <h3 id="tables-hover-rows">Hover rows</h3>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p> <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
@ -866,7 +866,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-condensed">Condensed</h3> <h3 id="tables-condensed">Condensed</h3>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p> <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table table-condensed"> <table class="table table-condensed">
<thead> <thead>
<tr> <tr>
@ -945,7 +945,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="bs-docs-example"> <div class="bs-example">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -1001,7 +1001,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2> <h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p> <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
<form class="bs-docs-example"> <form class="bs-example">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<label>Label name</label> <label>Label name</label>
@ -1042,7 +1042,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Requires custom widths</h4> <h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div> </div>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input type="text" placeholder="Email" style="width: 180px;"> <input type="text" placeholder="Email" style="width: 180px;">
<input type="password" placeholder="Password" style="width: 180px;"> <input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox"> <div class="checkbox">
@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li>Add <code>.control-label</code> to the label</li> <li>Add <code>.control-label</code> to the label</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li> <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul> </ul>
<form class="bs-docs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputEmail">Email</label> <label class="control-label" for="inputEmail">Email</label>
<div class="controls"> <div class="controls">
@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4> <h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div> </div>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input type="text" placeholder="Text input"> <input type="text" placeholder="Text input">
</form> </form>
{% highlight html %} {% highlight html %}
@ -1143,7 +1143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Textarea</h3> <h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<textarea rows="3"></textarea> <textarea rows="3"></textarea>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1153,7 +1153,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3> <h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4> <h4>Default (stacked)</h4>
<form class="bs-docs-example"> <form class="bs-example">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" value=""> <input type="checkbox" value="">
@ -1192,7 +1192,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4> <h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p> <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-docs-example"> <form class="bs-example">
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label> </label>
@ -1217,7 +1217,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3> <h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p> <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="bs-docs-example"> <form class="bs-example">
<select> <select>
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -1259,7 +1259,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input class="focused" id="focusedInput" type="text" value="This is focused..."> <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
{% highlight html %} {% highlight html %}
@ -1274,7 +1274,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p> <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div> </div>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input class="col col-lg-3" type="email" placeholder="test@example.com" required> <input class="col col-lg-3" type="email" placeholder="test@example.com" required>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1283,7 +1283,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1303,7 +1303,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p> <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div> </div>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<fieldset disabled> <fieldset disabled>
<div> <div>
<input type="text" class="col col-lg-4" placeholder="Disabled input"> <input type="text" class="col col-lg-4" placeholder="Disabled input">
@ -1350,7 +1350,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p> <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
<form class="bs-docs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="control-group has-warning"> <div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label> <label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls"> <div class="controls">
@ -1404,7 +1404,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p> <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div> </div>
<form class="bs-docs-example"> <form class="bs-example">
<div class="input-group col col-lg-9"> <div class="input-group col col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
@ -1441,7 +1441,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4> <h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p> <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example"> <form class="bs-example">
<div class="input-group col col-lg-9"> <div class="input-group col col-lg-9">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username"> <input type="text" class="input-large" placeholder="Username">
@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col col-lg-7">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
@ -1509,7 +1509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4> <h4>Button dropdowns</h4>
<p></p> <p></p>
<form class="bs-docs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -1569,7 +1569,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h4>Segmented dropdown groups</h4> <h4>Segmented dropdown groups</h4>
<form class="bs-docs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button> <button class="btn" tabindex="-1">Action</button>
@ -1627,7 +1627,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Relative sizing</h4> <h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p> <p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large"> <input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input"> <input type="text" placeholder="Default input">
@ -1642,7 +1642,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Column sizing</h4> <h4>Column sizing</h4>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
<div class="col col-lg-2"> <div class="col col-lg-2">
<input type="text" placeholder="col col-large-2"> <input type="text" placeholder="col col-large-2">
@ -1671,7 +1671,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-actions">Form actions</h3> <h3 id="forms-actions">Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p> <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="bs-docs-example"> <form class="bs-example">
<div class="form-actions"> <div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button> <button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button> <button type="button" class="btn">Cancel</button>
@ -1687,7 +1687,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-help-text">Help text</h3> <h3 id="forms-help-text">Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p> <p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4> <h4>Inline help</h4>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span> <input type="text"> <span class="help-inline">Inline help text</span>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1696,7 +1696,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h4>Block help</h4> <h4>Block help</h4>
<form class="bs-docs-example form-inline"> <form class="bs-example form-inline">
<input type="text"> <input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form> </form>
@ -1718,7 +1718,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-options">Button options</h2> <h2 id="buttons-options">Button options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p> <p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-docs-example"> <div class="bs-example">
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
@ -1752,7 +1752,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-sizes">Button sizes</h2> <h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p> <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p> <p>
<button type="button" class="btn btn-primary btn-large">Large button</button> <button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button> <button type="button" class="btn btn-default btn-large">Large button</button>
@ -1790,7 +1790,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p> <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;"> <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button> <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button> <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
@ -1807,7 +1807,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Button element</h3> <h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p> <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example"> <p class="bs-example">
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button> <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button> <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
</p> </p>
@ -1823,7 +1823,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Anchor element</h3> <h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p> <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-docs-example"> <p class="bs-example">
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a> <a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a> <a href="#" class="btn btn-default btn-large disabled">Link</a>
</p> </p>
@ -1842,7 +1842,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-tags">Using multiple tags</h2> <h2 id="buttons-tags">Using multiple tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p> <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example"> <form class="bs-example">
<a class="btn btn-default" href="#">Link</a> <a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button> <button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="button" value="Input">
@ -1876,7 +1876,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p> <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div> </div>
<div class="bs-docs-example bs-docs-example-images"> <div class="bs-example bs-example-images">
<img data-src="holder.js/140x140" class="img-rounded"> <img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle"> <img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail"> <img data-src="holder.js/140x140" class="img-thumbnail">
@ -1899,7 +1899,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Close icon</h3> <h3>Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p> <p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example"> <div class="bs-example">
<p><button class="close" style="float: none;">&times;</button></p> <p><button class="close" style="float: none;">&times;</button></p>
</div> </div>
{% highlight html %} {% highlight html %}

40
docs/javascript.html
View File

@ -101,7 +101,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example bs-docs-example-modal"> <div class="bs-example bs-example-modal">
<div class="modal"> <div class="modal">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
</div><!-- /.modal-dalog --> </div><!-- /.modal-dalog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
@ -337,7 +337,7 @@ $('#myModal').on('hidden', function () {
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p> <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
<h3>Within a navbar</h3> <h3>Within a navbar</h3>
<div class="bs-docs-example"> <div class="bs-example">
<div id="navbar-example" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
@ -382,7 +382,7 @@ $('#myModal').on('hidden', function () {
</div> <!-- /example --> </div> <!-- /example -->
<h3>Within tabs</h3> <h3>Within tabs</h3>
<div class="bs-docs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li> <li class="active"><a href="#">Regular link</a></li>
<li class="dropdown"> <li class="dropdown">
@ -472,7 +472,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2> <h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div id="navbar-example" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
@ -591,7 +591,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Example tabs</h2> <h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example bs-docs-example-tabs"> <div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs"> <ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li>
@ -719,13 +719,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Examples</h2> <h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p> <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p> <p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo"> <div class="bs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">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="#" data-toggle="tooltip" title="Another tooltip">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 really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">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="#" data-toggle="tooltip" title="Another tooltip">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 really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p> </p>
</div><!-- /example --> </div><!-- /example -->
<h3>Four directions</h3> <h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo"> <div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples"> <ul class="bs-docs-tooltip-examples">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li> <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li> <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
@ -866,7 +866,7 @@ $('#example').tooltip(options)
<h3>Static popover</h3> <h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p> <p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-docs-example bs-docs-example-popover"> <div class="bs-example bs-example-popover">
<div class="popover top"> <div class="popover top">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover top</h3> <h3 class="popover-title">Popover top</h3>
@ -903,12 +903,12 @@ $('#example').tooltip(options)
</div> </div>
<h3>Live demo</h3> <h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div> </div>
<h4>Four directions</h4> <h4>Four directions</h4>
<div class="bs-docs-example tooltip-demo"> <div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples"> <ul class="bs-docs-tooltip-examples">
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li> <li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li> <li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
@ -1040,14 +1040,14 @@ $('#example').tooltip(options)
<h2>Example alerts</h2> <h2>Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p> <p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="alert fade in"> <div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div> </div>
</div><!-- /example --> </div><!-- /example -->
<div class="bs-docs-example"> <div class="bs-example">
<div class="alert alert-block alert-error fade in"> <div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Oh snap! You got an error!</h4> <h4>Oh snap! You got an error!</h4>
@ -1121,7 +1121,7 @@ $('#my-alert').bind('closed', function () {
<h4>Stateful</h4> <h4>Stateful</h4>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p> <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary"> <button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state Loading state
</button> </button>
@ -1134,7 +1134,7 @@ $('#my-alert').bind('closed', function () {
<h4>Single toggle</h4> <h4>Single toggle</h4>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p> <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button> <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
@ -1143,7 +1143,7 @@ $('#my-alert').bind('closed', function () {
<h4>Checkbox</h4> <h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox"> <div class="btn-group" data-toggle="buttons-checkbox">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox"> Option 1 <input type="checkbox"> Option 1
@ -1172,7 +1172,7 @@ $('#my-alert').bind('closed', function () {
<h4>Radio</h4> <h4>Radio</h4>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons-radio">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1 <input type="radio" name="options" id="option1"> Option 1
@ -1272,7 +1272,7 @@ $('.nav-tabs').button()
<h2>Example accordion</h2> <h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p> <p>Using the collapse plugin, we built a simple accordion style widget:</p>
<div class="bs-docs-example"> <div class="bs-example">
<div class="accordion" id="accordion2"> <div class="accordion" id="accordion2">
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
@ -1473,7 +1473,7 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2> <h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p> <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example"> <div class="bs-example">
<div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example"> <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@ -1535,7 +1535,7 @@ $('#myCollapsible').on('hidden', function () {
<h4>Responsive visibility</h4> <h4>Responsive visibility</h4>
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p> <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div> </div>
<div class="bs-docs-example"> <div class="bs-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example"> <div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>

2
docs/welcome.html
View File

@ -116,7 +116,7 @@ lead: "Welcome to the Bootstrap documentation, the living, interactive style and
{% endhighlight %} {% endhighlight %}
<h3>Examples</h3> <h3>Examples</h3>
<div class="row bs-docs-examples"> <div class="row bs-examples">
<div class="col col-lg-4"> <div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank"> <a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt=""> <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">