Skip to content

B
bootstrap
Commit e67d3818 authored by Mark Otto's avatar Mark Otto
Browse files
Options

nuke line numbers

parent 26bc3610
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 220 deletions
docs/docs.html
View file @ e67d3818
...@@ -85,7 +85,7 @@ title: Bootstrap Documentation ...@@ -85,7 +85,7 @@ title: Bootstrap Documentation
<h3>HTML template</h3> <h3>HTML template</h3>
<p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p> <p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
{% highlight html linenos %} {% highlight html %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -220,13 +220,13 @@ title: Bootstrap Documentation ...@@ -220,13 +220,13 @@ title: Bootstrap Documentation
<p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p> <p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p>
<p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p> <p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
<p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p> <p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn btn-ttc">Save changes</button> <button type="button" class="btn btn-ttc">Save changes</button>
{% endhighlight %} {% endhighlight %}
<p>In the custom stylesheet, add the following CSS:</p> <p>In the custom stylesheet, add the following CSS:</p>
{% highlight css linenos %} {% highlight css %}
/* Custom button /* Custom button
-------------------------------------------------- */ -------------------------------------------------- */
...@@ -293,7 +293,7 @@ title: Bootstrap Documentation ...@@ -293,7 +293,7 @@ title: Bootstrap Documentation
<h3>HTML5 doctype required</h3> <h3>HTML5 doctype required</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
{% highlight html linenos %} {% highlight html %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
... ...
...@@ -303,7 +303,7 @@ title: Bootstrap Documentation ...@@ -303,7 +303,7 @@ title: Bootstrap Documentation
<h3>Mobile first</h3> <h3>Mobile first</h3>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p> <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p> <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
{% highlight html linenos %} {% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endhighlight %} {% endhighlight %}
...@@ -361,7 +361,7 @@ title: Bootstrap Documentation ...@@ -361,7 +361,7 @@ title: Bootstrap Documentation
<div class="col col-lg-6">6</div> <div class="col col-lg-6">6</div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-1">1</div> <div class="col col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col col-lg-1">1</div>
...@@ -402,7 +402,7 @@ title: Bootstrap Documentation ...@@ -402,7 +402,7 @@ title: Bootstrap Documentation
<div class="col col-lg-6 col-offset-3">6 offset 3</div> <div class="col col-lg-6 col-offset-3">6 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4">...</div> <div class="col col-lg-4">...</div>
<div class="col col-lg-4 col-offset-4">...</div> <div class="col col-lg-4 col-offset-4">...</div>
...@@ -432,7 +432,7 @@ title: Bootstrap Documentation ...@@ -432,7 +432,7 @@ title: Bootstrap Documentation
</div> </div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-9"> <div class="col col-lg-9">
Level 1: 9 columns Level 1: 9 columns
...@@ -455,7 +455,7 @@ title: Bootstrap Documentation ...@@ -455,7 +455,7 @@ title: Bootstrap Documentation
<div class="col col-lg-3 col-pull-9">3</div> <div class="col col-lg-3 col-pull-9">3</div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div> <div class="col col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div> <div class="col col-lg-3 col-pull-9">3</div>
...@@ -469,7 +469,7 @@ title: Bootstrap Documentation ...@@ -469,7 +469,7 @@ title: Bootstrap Documentation
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
...@@ -482,7 +482,7 @@ title: Bootstrap Documentation ...@@ -482,7 +482,7 @@ title: Bootstrap Documentation
<h4>Variables</h4> <h4>Variables</h4>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p> <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight css linenos %} {% highlight css %}
@grid-columns: 12; @grid-columns: 12;
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
@grid-float-breakpoint: 768px; @grid-float-breakpoint: 768px;
...@@ -490,7 +490,7 @@ title: Bootstrap Documentation ...@@ -490,7 +490,7 @@ title: Bootstrap Documentation
<h4>Mixins</h4> <h4>Mixins</h4>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p> <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css linenos %} {% highlight css %}
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
.make-row() { .make-row() {
// Negative margin the row out to align the content of columns // Negative margin the row out to align the content of columns
...@@ -524,7 +524,7 @@ title: Bootstrap Documentation ...@@ -524,7 +524,7 @@ title: Bootstrap Documentation
<h4>Example usage</h4> <h4>Example usage</h4>
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p> <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
{% highlight css linenos %} {% highlight css %}
.wrapper { .wrapper {
.make-row(); .make-row();
} }
...@@ -536,7 +536,7 @@ title: Bootstrap Documentation ...@@ -536,7 +536,7 @@ title: Bootstrap Documentation
.make-column-offset(1); .make-column-offset(1);
} }
{% endhighlight %} {% endhighlight %}
{% highlight html linenos %} {% highlight html %}
<div class="wrapper"> <div class="wrapper">
<div class="content-main">...</div> <div class="content-main">...</div>
<div class="content-secondary">...</div> <div class="content-secondary">...</div>
...@@ -589,7 +589,7 @@ title: Bootstrap Documentation ...@@ -589,7 +589,7 @@ title: Bootstrap Documentation
</tbody> </tbody>
</table> </table>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<h1>...</h1> <h1>...</h1>
<h2>...</h2> <h2>...</h2>
<h3>...</h3> <h3>...</h3>
...@@ -606,7 +606,7 @@ title: Bootstrap Documentation ...@@ -606,7 +606,7 @@ title: Bootstrap Documentation
<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>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<p>...</p> <p>...</p>
{% endhighlight %} {% endhighlight %}
...@@ -616,7 +616,7 @@ title: Bootstrap Documentation ...@@ -616,7 +616,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<p class="lead">...</p> <p class="lead">...</p>
{% endhighlight %} {% endhighlight %}
...@@ -634,7 +634,7 @@ title: Bootstrap Documentation ...@@ -634,7 +634,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<small>This line of text is meant to be treated as fine print.</small> <small>This line of text is meant to be treated as fine print.</small>
{% endhighlight %} {% endhighlight %}
...@@ -644,7 +644,7 @@ title: Bootstrap Documentation ...@@ -644,7 +644,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<strong>rendered as bold text</strong> <strong>rendered as bold text</strong>
{% endhighlight %} {% endhighlight %}
...@@ -653,7 +653,7 @@ title: Bootstrap Documentation ...@@ -653,7 +653,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<em>rendered as italicized text</em> <em>rendered as italicized text</em>
{% endhighlight %} {% endhighlight %}
...@@ -666,7 +666,7 @@ title: Bootstrap Documentation ...@@ -666,7 +666,7 @@ title: Bootstrap Documentation
<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>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -680,7 +680,7 @@ title: Bootstrap Documentation ...@@ -680,7 +680,7 @@ title: Bootstrap Documentation
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<p class="text-muted">...</p> <p class="text-muted">...</p>
<p class="text-warning">...</p> <p class="text-warning">...</p>
<p class="text-danger">...</p> <p class="text-danger">...</p>
...@@ -697,7 +697,7 @@ title: Bootstrap Documentation ...@@ -697,7 +697,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<abbr title="attribute">attr</abbr> <abbr title="attribute">attr</abbr>
{% endhighlight %} {% endhighlight %}
...@@ -706,7 +706,7 @@ title: Bootstrap Documentation ...@@ -706,7 +706,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
{% endhighlight %} {% endhighlight %}
...@@ -726,7 +726,7 @@ title: Bootstrap Documentation ...@@ -726,7 +726,7 @@ title: Bootstrap Documentation
<a href="mailto:#">first.last@example.com</a> <a href="mailto:#">first.last@example.com</a>
</address> </address>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<address> <address>
<strong>Twitter, Inc.</strong><br> <strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br> 795 Folsom Ave, Suite 600<br>
...@@ -752,7 +752,7 @@ title: Bootstrap Documentation ...@@ -752,7 +752,7 @@ title: Bootstrap Documentation
<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>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -769,7 +769,7 @@ title: Bootstrap Documentation ...@@ -769,7 +769,7 @@ title: Bootstrap Documentation
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote> </blockquote>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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 <cite title="Source Title">Source Title</cite></small> <small>Someone famous <cite title="Source Title">Source Title</cite></small>
...@@ -784,7 +784,7 @@ title: Bootstrap Documentation ...@@ -784,7 +784,7 @@ title: Bootstrap Documentation
<small>Someone famous in <cite title="Source Title">Source Title</cite></small> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote> </blockquote>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<blockquote class="pull-right"> <blockquote class="pull-right">
... ...
</blockquote> </blockquote>
...@@ -815,7 +815,7 @@ title: Bootstrap Documentation ...@@ -815,7 +815,7 @@ title: Bootstrap Documentation
<li>Eget porttitor lorem</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul> <ul>
<li>...</li> <li>...</li>
</ul> </ul>
...@@ -835,7 +835,7 @@ title: Bootstrap Documentation ...@@ -835,7 +835,7 @@ title: Bootstrap Documentation
<li>Eget porttitor lorem</li> <li>Eget porttitor lorem</li>
</ol> </ol>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ol> <ol>
<li>...</li> <li>...</li>
</ol> </ol>
...@@ -862,7 +862,7 @@ title: Bootstrap Documentation ...@@ -862,7 +862,7 @@ title: Bootstrap Documentation
<li>Eget porttitor lorem</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>...</li> <li>...</li>
</ul> </ul>
...@@ -877,7 +877,7 @@ title: Bootstrap Documentation ...@@ -877,7 +877,7 @@ title: Bootstrap Documentation
<li>Nulla volutpat</li> <li>Nulla volutpat</li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="list-inline"> <ul class="list-inline">
<li>...</li> <li>...</li>
</ul> </ul>
...@@ -896,7 +896,7 @@ title: Bootstrap Documentation ...@@ -896,7 +896,7 @@ title: Bootstrap Documentation
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl> </dl>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<dl> <dl>
<dt>...</dt> <dt>...</dt>
<dd>...</dd> <dd>...</dd>
...@@ -918,7 +918,7 @@ title: Bootstrap Documentation ...@@ -918,7 +918,7 @@ title: Bootstrap Documentation
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl> </dl>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>...</dt> <dt>...</dt>
<dd>...</dd> <dd>...</dd>
...@@ -944,7 +944,7 @@ title: Bootstrap Documentation ...@@ -944,7 +944,7 @@ title: Bootstrap Documentation
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
For example, <code>&lt;section&gt;</code> should be wrapped as inline. For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
...@@ -953,7 +953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -953,7 +953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
{% endhighlight %} {% endhighlight %}
...@@ -1003,7 +1003,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1003,7 +1003,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<table class="table"> <table class="table">
... ...
</table> </table>
...@@ -1051,7 +1051,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1051,7 +1051,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<table class="table table-striped"> <table class="table table-striped">
... ...
</table> </table>
...@@ -1095,7 +1095,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1095,7 +1095,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<table class="table table-bordered"> <table class="table table-bordered">
... ...
</table> </table>
...@@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<table class="table table-hover"> <table class="table table-hover">
... ...
</table> </table>
...@@ -1174,7 +1174,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1174,7 +1174,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<table class="table table-condensed"> <table class="table table-condensed">
... ...
</table> </table>
...@@ -1254,7 +1254,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1254,7 +1254,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
... ...
<tr class="success"> <tr class="success">
<td>1</td> <td>1</td>
...@@ -1292,7 +1292,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1292,7 +1292,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
</fieldset> </fieldset>
</form><!-- /example --> </form><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<form> <form>
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
...@@ -1325,7 +1325,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1325,7 +1325,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form><!-- /example --> </form><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<input type="text" class="col col-lg-3" placeholder="Email"> <input type="text" class="col col-lg-3" placeholder="Email">
<input type="password" class="col col-lg-3" placeholder="Password"> <input type="password" class="col col-lg-3" placeholder="Password">
...@@ -1370,7 +1370,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1370,7 +1370,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<form class="form-horizontal"> <form class="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>
...@@ -1410,7 +1410,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1410,7 +1410,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" placeholder="Text input"> <input type="text" placeholder="Text input">
</form> </form>
{% highlight html linenos %} {% highlight html %}
<input type="text" placeholder="Text input"> <input type="text" placeholder="Text input">
{% endhighlight %} {% endhighlight %}
...@@ -1419,7 +1419,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1419,7 +1419,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<textarea rows="3"></textarea> <textarea rows="3"></textarea>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<textarea rows="3"></textarea> <textarea rows="3"></textarea>
{% endhighlight %} {% endhighlight %}
...@@ -1447,7 +1447,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1447,7 +1447,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" value=""> <input type="checkbox" value="">
...@@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> </label>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -1507,7 +1507,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1507,7 +1507,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<option>5</option> <option>5</option>
</select> </select>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<select> <select>
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
...@@ -1535,7 +1535,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1535,7 +1535,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-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 linenos %} {% highlight html %}
<input id="focusedInput" type="text" value="This is focused..."> <input id="focusedInput" type="text" value="This is focused...">
{% endhighlight %} {% endhighlight %}
...@@ -1550,7 +1550,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1550,7 +1550,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-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 linenos %} {% highlight html %}
<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>
{% endhighlight %} {% endhighlight %}
...@@ -1559,7 +1559,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1559,7 +1559,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-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 linenos %} {% highlight html %}
<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %} {% endhighlight %}
...@@ -1594,7 +1594,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1594,7 +1594,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</fieldset> </fieldset>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<fieldset disabled> <fieldset disabled>
<div> <div>
...@@ -1643,7 +1643,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1643,7 +1643,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -1694,7 +1694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1694,7 +1694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -1730,7 +1730,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1730,7 +1730,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -1764,7 +1764,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1764,7 +1764,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</span> </span>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -1811,7 +1811,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1811,7 +1811,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /input-group --> </div><!-- /input-group -->
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -1879,7 +1879,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1879,7 +1879,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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 and dropdown menu --> <!-- Button and dropdown menu -->
...@@ -1907,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1907,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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">
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
...@@ -1943,7 +1943,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1943,7 +1943,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</select> </select>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<input class="col col-lg-1" type="text" placeholder=".col col-lg-1"> <input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
<input class="col col-lg-2" type="text" placeholder=".col col-lg-2"> <input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
<input class="col col-lg-3" type="text" placeholder=".col col-lg-3"> <input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
...@@ -1972,7 +1972,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1972,7 +1972,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4"> <input type="text" placeholder=".col col-lg-4">
...@@ -1994,7 +1994,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1994,7 +1994,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn">Cancel</button> <button type="button" class="btn">Cancel</button>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -2007,7 +2007,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2007,7 +2007,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-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 linenos %} {% highlight html %}
<input type="text"> <input type="text">
<span class="help-inline">Inline help text</span> <span class="help-inline">Inline help text</span>
{% endhighlight %} {% endhighlight %}
...@@ -2017,7 +2017,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2017,7 +2017,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as 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>
{% highlight html linenos %} {% highlight html %}
<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>
{% endhighlight %} {% endhighlight %}
...@@ -2044,7 +2044,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2044,7 +2044,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-link">Link</button>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<!-- Standard gray button with gradient --> <!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
...@@ -2088,7 +2088,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2088,7 +2088,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-mini">Mini button</button> <button type="button" class="btn btn-mini">Mini button</button>
</p> </p>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<p> <p>
<button type="button" class="btn btn-large btn-primary">Large button</button> <button type="button" class="btn btn-large btn-primary">Large button</button>
<button type="button" class="btn btn-large">Large button</button> <button type="button" class="btn btn-large">Large button</button>
...@@ -2114,7 +2114,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2114,7 +2114,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-large btn-block">Block level button</button> <button type="button" class="btn btn-large btn-block">Block level button</button>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button> <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
<button type="button" class="btn btn-large btn-block">Block level button</button> <button type="button" class="btn btn-large btn-block">Block level button</button>
{% endhighlight %} {% endhighlight %}
...@@ -2129,7 +2129,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2129,7 +2129,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button> <button type="button" class="btn btn-large" disabled="disabled">Button</button>
</p> </p>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button> <button type="button" class="btn btn-large" disabled="disabled">Button</button>
{% endhighlight %} {% endhighlight %}
...@@ -2145,7 +2145,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2145,7 +2145,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a> <a href="#" class="btn btn-large disabled">Link</a>
</p> </p>
{% highlight html linenos %} {% highlight html %}
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a> <a href="#" class="btn btn-large disabled">Link</a>
{% endhighlight %} {% endhighlight %}
...@@ -2166,7 +2166,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2166,7 +2166,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input class="btn" type="button" value="Input"> <input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit"> <input class="btn" type="submit" value="Submit">
</form> </form>
{% highlight html linenos %} {% highlight html %}
<a class="btn" href="">Link</a> <a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button> <button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input"> <input class="btn" type="button" value="Input">
...@@ -2199,7 +2199,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2199,7 +2199,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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">
</div> </div>
{% highlight html linenos %} {% highlight html %}
<img src="..." class="img-rounded"> <img src="..." class="img-rounded">
<img src="..." class="img-circle"> <img src="..." class="img-circle">
<img src="..." class="img-thumbnail"> <img src="..." class="img-thumbnail">
...@@ -2220,16 +2220,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2220,16 +2220,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example"> <div class="bs-docs-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 linenos %} {% highlight html %}
<button class="close" style="float: none;">&times;</button> <button class="close" style="float: none;">&times;</button>
{% endhighlight %} {% endhighlight %}
<h3>.pull-left</h3> <h3>.pull-left</h3>
<p>Float an element left</p> <p>Float an element left</p>
{% highlight html linenos %} {% highlight html %}
<div class="pull-left">...</div> <div class="pull-left">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css linenos %} {% highlight css %}
.pull-left { .pull-left {
float: left; float: left;
} }
...@@ -2237,10 +2237,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2237,10 +2237,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>.pull-right</h3> <h3>.pull-right</h3>
<p>Float an element right</p> <p>Float an element right</p>
{% highlight html linenos %} {% highlight html %}
<div class="pull-right">...</div> <div class="pull-right">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css linenos %} {% highlight css %}
.pull-right { .pull-right {
float: right; float: right;
} }
...@@ -2248,10 +2248,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2248,10 +2248,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>.clearfix</h3> <h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
{% highlight html linenos %} {% highlight html %}
<div class="clearfix">...</div> <div class="clearfix">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css linenos %} {% highlight css %}
// Mixin // Mixin
.clearfix { .clearfix {
&:before, &:before,
...@@ -2570,7 +2570,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2570,7 +2570,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>How to use</h2> <h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p> <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
{% highlight html linenos %} {% highlight html %}
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-search"></span>
{% endhighlight %} {% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
...@@ -2593,7 +2593,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2593,7 +2593,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a> <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
...@@ -2623,7 +2623,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2623,7 +2623,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a> <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> 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>
...@@ -2641,7 +2641,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2641,7 +2641,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a> <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a> <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %} {% endhighlight %}
...@@ -2649,7 +2649,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2649,7 +2649,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a> <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a> <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %} {% endhighlight %}
...@@ -2663,7 +2663,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2663,7 +2663,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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-docs-example -->
{% highlight html linenos %} {% 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>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li> <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
...@@ -2684,7 +2684,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2684,7 +2684,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -2721,7 +2721,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2721,7 +2721,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<!-- Link or button to toggle dropdown --> <!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
...@@ -2736,7 +2736,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2736,7 +2736,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="dropdowns-alignment">Aligning the menus</h3> <h3 id="dropdowns-alignment">Aligning the menus</h3>
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
{% highlight html linenos %} {% highlight html %}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
... ...
</ul> </ul>
...@@ -2753,7 +2753,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2753,7 +2753,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
...@@ -2832,7 +2832,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2832,7 +2832,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
... ...
<li class="dropdown-submenu pull-left"> <li class="dropdown-submenu pull-left">
...@@ -2870,7 +2870,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2870,7 +2870,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn">Right</button> <button type="button" class="btn">Right</button>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn">Left</button> <button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button> <button type="button" class="btn">Middle</button>
...@@ -2898,7 +2898,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2898,7 +2898,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group">...</div> <div class="btn-group">...</div>
<div class="btn-group">...</div> <div class="btn-group">...</div>
...@@ -2916,7 +2916,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2916,7 +2916,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button> <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="btn-group btn-group-vertical"> <div class="btn-group btn-group-vertical">
... ...
</div> </div>
...@@ -2931,7 +2931,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2931,7 +2931,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<a href="#" class="btn">Middle</a> <a href="#" class="btn">Middle</a>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
... ...
</div> </div>
...@@ -3010,7 +3010,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3010,7 +3010,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<!-- Single button --> <!-- Single button -->
<div class="btn-group"> <div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown">
...@@ -3087,7 +3087,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3087,7 +3087,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div> </div>
{% highlight html linenos %} {% highlight html %}
<!-- Split button --> <!-- Split button -->
<div class="btn-group"> <div class="btn-group">
<button class="btn">Action</button> <button class="btn">Action</button>
...@@ -3146,7 +3146,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3146,7 +3146,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<!-- Large button group --> <!-- Large button group -->
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
...@@ -3206,7 +3206,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3206,7 +3206,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="btn-group dropup"> <div class="btn-group dropup">
<button class="btn">Dropup</button> <button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown">
...@@ -3240,7 +3240,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3240,7 +3240,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3257,7 +3257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3257,7 +3257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3272,7 +3272,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3272,7 +3272,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
... ...
</ul> </ul>
...@@ -3295,7 +3295,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3295,7 +3295,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified">
... ...
</ul> </ul>
...@@ -3319,7 +3319,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3319,7 +3319,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li class="disabled"><a href="#">Disabled link</a></li> <li class="disabled"><a href="#">Disabled link</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
... ...
<li class="disabled"><a href="#">Disabled link</a></li> <li class="disabled"><a href="#">Disabled link</a></li>
...@@ -3357,7 +3357,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3357,7 +3357,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
... ...
<li class="dropdown"> <li class="dropdown">
...@@ -3391,7 +3391,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3391,7 +3391,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</li> </li>
</ul> </ul>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
... ...
<li class="dropdown"> <li class="dropdown">
...@@ -3430,7 +3430,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3430,7 +3430,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -3450,7 +3450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3450,7 +3450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
{% endhighlight %} {% endhighlight %}
...@@ -3465,7 +3465,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3465,7 +3465,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
...@@ -3483,7 +3483,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3483,7 +3483,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form> </form>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" style="width: 200px;"> <input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
...@@ -3517,7 +3517,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3517,7 +3517,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
... ...
</div> </div>
...@@ -3526,7 +3526,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3526,7 +3526,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-sidenote"> <div class="bs-docs-sidenote">
<h4>Body padding required</h4> <h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p> <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
{% highlight css linenos %} {% highlight css %}
body { body {
padding-top: 64px; padding-top: 64px;
} }
...@@ -3553,7 +3553,7 @@ body { ...@@ -3553,7 +3553,7 @@ body {
</div> </div>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="navbar navbar-fixed-bottom"> <div class="navbar navbar-fixed-bottom">
... ...
</div> </div>
...@@ -3562,7 +3562,7 @@ body { ...@@ -3562,7 +3562,7 @@ body {
<div class="bs-docs-sidenote"> <div class="bs-docs-sidenote">
<h4>Body padding required</h4> <h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p> <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
{% highlight css linenos %} {% highlight css %}
body { body {
padding-bottom: 64px; padding-bottom: 64px;
} }
...@@ -3589,7 +3589,7 @@ body { ...@@ -3589,7 +3589,7 @@ body {
</div> </div>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="navbar navbar-static-top"> <div class="navbar navbar-static-top">
... ...
</div> </div>
...@@ -3645,7 +3645,7 @@ body { ...@@ -3645,7 +3645,7 @@ body {
</div><!-- /.container --> </div><!-- /.container -->
</div><!-- /.navbar --> </div><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="navbar"> <div class="navbar">
<div class="container"> <div class="container">
...@@ -3722,7 +3722,7 @@ body { ...@@ -3722,7 +3722,7 @@ body {
</div><!-- /.container --> </div><!-- /.container -->
</div><!-- /.navbar --> </div><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse">
... ...
</div> </div>
...@@ -3754,7 +3754,7 @@ body { ...@@ -3754,7 +3754,7 @@ body {
<li class="active">Data</li> <li class="active">Data</li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="breadcrumb"> <ul class="breadcrumb">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Library</a></li> <li><a href="#">Library</a></li>
...@@ -3786,7 +3786,7 @@ body { ...@@ -3786,7 +3786,7 @@ body {
<li><a href="#">&raquo;</a></li> <li><a href="#">&raquo;</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3811,7 +3811,7 @@ body { ...@@ -3811,7 +3811,7 @@ body {
<li><a href="#">&raquo;</a></li> <li><a href="#">&raquo;</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3819,7 +3819,7 @@ body { ...@@ -3819,7 +3819,7 @@ body {
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p> <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
{% highlight html linenos %} {% highlight html %}
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><span>&laquo;</span></li> <li class="disabled"><span>&laquo;</span></li>
<li class="active"><span>1</span></li> <li class="active"><span>1</span></li>
...@@ -3876,7 +3876,7 @@ body { ...@@ -3876,7 +3876,7 @@ body {
</ul> </ul>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="pagination pagination-large">...</ul> <ul class="pagination pagination-large">...</ul>
<ul class="pagination pagination">...</ul> <ul class="pagination pagination">...</ul>
<ul class="pagination pagination-small">...</ul> <ul class="pagination pagination-small">...</ul>
...@@ -3895,7 +3895,7 @@ body { ...@@ -3895,7 +3895,7 @@ body {
<li><a href="#">Next</a></li> <li><a href="#">Next</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3910,7 +3910,7 @@ body { ...@@ -3910,7 +3910,7 @@ body {
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer &rarr;</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3926,7 +3926,7 @@ body { ...@@ -3926,7 +3926,7 @@ body {
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer &rarr;</a></li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3953,7 +3953,7 @@ body { ...@@ -3953,7 +3953,7 @@ body {
<h5>Example heading <span class="label">New</span></h5> <h5>Example heading <span class="label">New</span></h5>
<h6>Example heading <span class="label">New</span></h6> <h6>Example heading <span class="label">New</span></h6>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<h3>Example heading <span class="label">New</span></h3> <h3>Example heading <span class="label">New</span></h3>
{% endhighlight %} {% endhighlight %}
...@@ -3966,7 +3966,7 @@ body { ...@@ -3966,7 +3966,7 @@ body {
<span class="label label-danger">Danger</span> <span class="label label-danger">Danger</span>
<span class="label label-info">Info</span> <span class="label label-info">Info</span>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -3989,7 +3989,7 @@ body { ...@@ -3989,7 +3989,7 @@ body {
<div class="bs-docs-example"> <div class="bs-docs-example">
<a href="#">Inbox <span class="badge">42</span></a> <a href="#">Inbox <span class="badge">42</span></a>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<a href="#">Inbox <span class="badge">42</span></a> <a href="#">Inbox <span class="badge">42</span></a>
{% endhighlight %} {% endhighlight %}
...@@ -4026,7 +4026,7 @@ body { ...@@ -4026,7 +4026,7 @@ body {
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="active"> <li class="active">
<a href="#"> <a href="#">
...@@ -4057,7 +4057,7 @@ body { ...@@ -4057,7 +4057,7 @@ body {
<p><a class="btn btn-primary btn-large">Learn more</a></p> <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="jumbotron"> <div class="jumbotron">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>...</p> <p>...</p>
...@@ -4072,7 +4072,7 @@ body { ...@@ -4072,7 +4072,7 @@ body {
<h1>Example page header <small>Subtext for header</small></h1> <h1>Example page header <small>Subtext for header</small></h1>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4115,7 +4115,7 @@ body { ...@@ -4115,7 +4115,7 @@ body {
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -4162,7 +4162,7 @@ body { ...@@ -4162,7 +4162,7 @@ body {
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col col-lg-3">
<div class="thumbnail"> <div class="thumbnail">
...@@ -4197,7 +4197,7 @@ body { ...@@ -4197,7 +4197,7 @@ body {
<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.
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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.
...@@ -4213,7 +4213,7 @@ body { ...@@ -4213,7 +4213,7 @@ body {
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4237,7 +4237,7 @@ body { ...@@ -4237,7 +4237,7 @@ body {
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="alert alert-danger">...</div> <div class="alert alert-danger">...</div>
<div class="alert alert-success">...</div> <div class="alert alert-success">...</div>
<div class="alert alert-info">...</div> <div class="alert alert-info">...</div>
...@@ -4267,7 +4267,7 @@ body { ...@@ -4267,7 +4267,7 @@ body {
<div class="progress-bar" style="width: 60%;"></div> <div class="progress-bar" style="width: 60%;"></div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width: 60%;"></div> <div class="progress-bar" style="width: 60%;"></div>
</div> </div>
...@@ -4289,7 +4289,7 @@ body { ...@@ -4289,7 +4289,7 @@ body {
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
...@@ -4320,7 +4320,7 @@ body { ...@@ -4320,7 +4320,7 @@ body {
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div> </div>
...@@ -4342,7 +4342,7 @@ body { ...@@ -4342,7 +4342,7 @@ body {
<div class="progress-bar" style="width: 45%"></div> <div class="progress-bar" style="width: 45%"></div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4357,7 +4357,7 @@ body { ...@@ -4357,7 +4357,7 @@ body {
<div class="progress-bar progress-bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4408,7 +4408,7 @@ body { ...@@ -4408,7 +4408,7 @@ body {
</div> </div>
</div> </div>
</div><!-- /.bs-docs-example --> </div><!-- /.bs-docs-example -->
{% highlight html linenos %} {% highlight html %}
<div class="media"> <div class="media">
<a class="pull-left" href="#"> <a class="pull-left" href="#">
<img class="media-object" src="..."> <img class="media-object" src="...">
...@@ -4474,7 +4474,7 @@ body { ...@@ -4474,7 +4474,7 @@ body {
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<ul class="media-list"> <ul class="media-list">
<li class="media"> <li class="media">
<a class="pull-left" href="#"> <a class="pull-left" href="#">
...@@ -4512,7 +4512,7 @@ body { ...@@ -4512,7 +4512,7 @@ body {
<li class="list-group-item">Vestibulum at eros</li> <li class="list-group-item">Vestibulum at eros</li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4540,7 +4540,7 @@ body { ...@@ -4540,7 +4540,7 @@ body {
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4567,7 +4567,7 @@ body { ...@@ -4567,7 +4567,7 @@ body {
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4597,7 +4597,7 @@ body { ...@@ -4597,7 +4597,7 @@ body {
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4629,7 +4629,7 @@ body { ...@@ -4629,7 +4629,7 @@ body {
</a> </a>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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
...@@ -4668,7 +4668,7 @@ body { ...@@ -4668,7 +4668,7 @@ body {
</a> </a>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4696,7 +4696,7 @@ body { ...@@ -4696,7 +4696,7 @@ body {
Basic panel example Basic panel example
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="panel"> <div class="panel">
Basic panel example Basic panel example
</div> </div>
...@@ -4710,7 +4710,7 @@ body { ...@@ -4710,7 +4710,7 @@ body {
Panel content Panel content
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content Panel content
...@@ -4741,7 +4741,7 @@ body { ...@@ -4741,7 +4741,7 @@ body {
Panel content Panel content
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="panel panel-primary">...</div> <div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div> <div class="panel panel-success">...</div>
<div class="panel panel-warning">...</div> <div class="panel panel-warning">...</div>
...@@ -4767,7 +4767,7 @@ body { ...@@ -4767,7 +4767,7 @@ body {
</ul> </ul>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -4804,7 +4804,7 @@ body { ...@@ -4804,7 +4804,7 @@ body {
Look, I'm in a well! Look, I'm in a well!
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="well">...</div> <div class="well">...</div>
{% endhighlight %} {% endhighlight %}
<h3>Optional classes</h3> <h3>Optional classes</h3>
...@@ -4814,7 +4814,7 @@ body { ...@@ -4814,7 +4814,7 @@ body {
Look, I'm in a well! Look, I'm in a well!
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="well well-large">...</div> <div class="well well-large">...</div>
{% endhighlight %} {% endhighlight %}
...@@ -4823,7 +4823,7 @@ body { ...@@ -4823,7 +4823,7 @@ body {
Look, I'm in a well! Look, I'm in a well!
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<div class="well well-small">...</div> <div class="well well-small">...</div>
{% endhighlight %} {% endhighlight %}
</div> </div>
...@@ -4856,23 +4856,23 @@ body { ...@@ -4856,23 +4856,23 @@ body {
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
{% highlight js linenos %} {% highlight js %}
$('body').off('.data-api') $('body').off('.data-api')
{% endhighlight %} {% endhighlight %}
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
{% highlight js linenos %} {% highlight js %}
$('body').off('.alert.data-api') $('body').off('.alert.data-api')
{% endhighlight %} {% endhighlight %}
<h3 id="js-programmatic-api">Programmatic API</h3> <h3 id="js-programmatic-api">Programmatic API</h3>
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
{% highlight js linenos %} {% highlight js %}
$(".btn.danger").button("toggle").addClass("fat") $(".btn.danger").button("toggle").addClass("fat")
{% endhighlight %} {% endhighlight %}
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
{% highlight js linenos %} {% highlight js %}
$("#myModal").modal() // initialized with defaults $("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard $("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p> $("#myModal").modal('show') // initializes and invokes show immediately</p>
...@@ -4882,7 +4882,7 @@ $("#myModal").modal('show') // initializes and invokes show immed ...@@ -4882,7 +4882,7 @@ $("#myModal").modal('show') // initializes and invokes show immed
<h3 id="js-noconflict">No conflict</h3> <h3 id="js-noconflict">No conflict</h3>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
{% highlight js linenos %} {% highlight js %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
{% endhighlight %} {% endhighlight %}
...@@ -4890,7 +4890,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot ...@@ -4890,7 +4890,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot
<h3 id="js-events">Events</h3> <h3 id="js-events">Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p> <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js linenos %} {% highlight js %}
$('#myModal').on('show', function (e) { $('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown if (!data) return e.preventDefault() // stops modal from being shown
}) })
...@@ -4952,7 +4952,7 @@ $('#myModal').on('show', function (e) { ...@@ -4952,7 +4952,7 @@ $('#myModal').on('show', function (e) {
</div><!-- /.modal-dalog --> </div><!-- /.modal-dalog -->
</div><!-- /.modal --> </div><!-- /.modal -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="modal"> <div class="modal">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
...@@ -5018,7 +5018,7 @@ $('#myModal').on('show', function (e) { ...@@ -5018,7 +5018,7 @@ $('#myModal').on('show', function (e) {
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-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 linenos %} {% highlight html %}
<div class="modal"> <div class="modal">
<!-- Button trigger modal --> <!-- Button trigger modal -->
<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>
...@@ -5048,13 +5048,13 @@ $('#myModal').on('show', function (e) { ...@@ -5048,13 +5048,13 @@ $('#myModal').on('show', function (e) {
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p> <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
{% highlight html linenos %} {% highlight html %}
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
{% endhighlight %} {% endhighlight %}
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p> <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
{% highlight js linenos %}$('#myModal').modal(options){% endhighlight %} {% highlight js %}$('#myModal').modal(options){% endhighlight %}
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
...@@ -5091,7 +5091,7 @@ $('#myModal').on('show', function (e) { ...@@ -5091,7 +5091,7 @@ $('#myModal').on('show', function (e) {
<td>path</td> <td>path</td>
<td>false</td> <td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p> <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
{% highlight html linenos %} {% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %} {% endhighlight %}
</tr> </tr>
...@@ -5102,7 +5102,7 @@ $('#myModal').on('show', function (e) { ...@@ -5102,7 +5102,7 @@ $('#myModal').on('show', function (e) {
<h4>.modal(options)</h4> <h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p> <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
{% highlight js linenos %} {% highlight js %}
$('#myModal').modal({ $('#myModal').modal({
keyboard: false keyboard: false
}) })
...@@ -5110,15 +5110,15 @@ $('#myModal').modal({ ...@@ -5110,15 +5110,15 @@ $('#myModal').modal({
<h4>.modal('toggle')</h4> <h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p> <p>Manually toggles a modal.</p>
{% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %} {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
<h4>.modal('show')</h4> <h4>.modal('show')</h4>
<p>Manually opens a modal.</p> <p>Manually opens a modal.</p>
{% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %} {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
<h4>.modal('hide')</h4> <h4>.modal('hide')</h4>
<p>Manually hides a modal.</p> <p>Manually hides a modal.</p>
{% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %} {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
...@@ -5148,7 +5148,7 @@ $('#myModal').modal({ ...@@ -5148,7 +5148,7 @@ $('#myModal').modal({
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% highlight js linenos %} {% highlight js %}
$('#myModal').on('hidden', function () { $('#myModal').on('hidden', function () {
// do something… // do something…
}) })
...@@ -5258,7 +5258,7 @@ $('#myModal').on('hidden', function () { ...@@ -5258,7 +5258,7 @@ $('#myModal').on('hidden', function () {
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html linenos %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...@@ -5267,7 +5267,7 @@ $('#myModal').on('hidden', function () { ...@@ -5267,7 +5267,7 @@ $('#myModal').on('hidden', function () {
</div> </div>
{% endhighlight %} {% endhighlight %}
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html linenos %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
...@@ -5280,7 +5280,7 @@ $('#myModal').on('hidden', function () { ...@@ -5280,7 +5280,7 @@ $('#myModal').on('hidden', function () {
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the dropdowns via JavaScript:</p> <p>Call the dropdowns via JavaScript:</p>
{% highlight js linenos %} {% highlight js %}
$('.dropdown-toggle').dropdown() $('.dropdown-toggle').dropdown()
{% endhighlight %} {% endhighlight %}
...@@ -5346,7 +5346,7 @@ $('.dropdown-toggle').dropdown() ...@@ -5346,7 +5346,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
{% highlight html linenos %} {% highlight html %}
<body data-spy="scroll" data-target="#navbar-example"> <body data-spy="scroll" data-target="#navbar-example">
... ...
</body> </body>
...@@ -5354,7 +5354,7 @@ $('.dropdown-toggle').dropdown() ...@@ -5354,7 +5354,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p> <p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %} {% highlight js %}
$('#navbar-example').scrollspy() $('#navbar-example').scrollspy()
{% endhighlight %} {% endhighlight %}
...@@ -5366,7 +5366,7 @@ $('#navbar-example').scrollspy() ...@@ -5366,7 +5366,7 @@ $('#navbar-example').scrollspy()
<h3>Methods</h3> <h3>Methods</h3>
<h4>.scrollspy('refresh')</h4> <h4>.scrollspy('refresh')</h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p> <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
{% highlight js linenos %} {% highlight js %}
$('[data-spy="scroll"]').each(function () { $('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh') var $spy = $(this).scrollspy('refresh')
}); });
...@@ -5457,7 +5457,7 @@ $('[data-spy="scroll"]').each(function () { ...@@ -5457,7 +5457,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Usage</h2> <h2>Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p> <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js linenos %} {% highlight js %}
$('#myTab a').click(function (e) { $('#myTab a').click(function (e) {
e.preventDefault(); e.preventDefault();
$(this).tab('show'); $(this).tab('show');
...@@ -5465,7 +5465,7 @@ $('#myTab a').click(function (e) { ...@@ -5465,7 +5465,7 @@ $('#myTab a').click(function (e) {
{% endhighlight %} {% endhighlight %}
<p>You can activate individual tabs in several ways:</p> <p>You can activate individual tabs in several ways:</p>
{% highlight js linenos %} {% highlight js %}
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab $('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab $('#myTab a:last').tab('show'); // Select last tab
...@@ -5474,7 +5474,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -5474,7 +5474,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
<h3>Markup</h3> <h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p> <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li> <li><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>
...@@ -5490,7 +5490,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -5490,7 +5490,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
<p> <p>
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p> </p>
{% highlight html linenos %} {% highlight html %}
<ul class="nav nav-tabs" id="myTab"> <ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li> <li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li> <li><a href="#profile">Profile</a></li>
...@@ -5531,7 +5531,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -5531,7 +5531,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% highlight js linenos %} {% highlight js %}
$('a[data-toggle="tab"]').on('shown', function (e) { $('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab e.target // activated tab
e.relatedTarget // previous tab e.relatedTarget // previous tab
...@@ -5575,7 +5575,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -5575,7 +5575,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Usage</h2> <h2>Usage</h2>
<p>Trigger the tooltip via JavaScript:</p> <p>Trigger the tooltip via JavaScript:</p>
{% highlight js linenos %} {% highlight js %}
$('#example').tooltip(options) $('#example').tooltip(options)
{% endhighlight %} {% endhighlight %}
...@@ -5653,7 +5653,7 @@ $('#example').tooltip(options) ...@@ -5653,7 +5653,7 @@ $('#example').tooltip(options)
</div> </div>
<h3>Markup</h3> <h3>Markup</h3>
{% highlight html linenos %} {% highlight html %}
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a> <a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
{% endhighlight %} {% endhighlight %}
...@@ -5664,19 +5664,19 @@ $('#example').tooltip(options) ...@@ -5664,19 +5664,19 @@ $('#example').tooltip(options)
<h4>.tooltip('show')</h4> <h4>.tooltip('show')</h4>
<p>Reveals an element's tooltip.</p> <p>Reveals an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %} {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
<h4>.tooltip('hide')</h4> <h4>.tooltip('hide')</h4>
<p>Hides an element's tooltip.</p> <p>Hides an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %} {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
<h4>.tooltip('toggle')</h4> <h4>.tooltip('toggle')</h4>
<p>Toggles an element's tooltip.</p> <p>Toggles an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %} {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
<h4>.tooltip('destroy')</h4> <h4>.tooltip('destroy')</h4>
<p>Hides and destroys an element's tooltip.</p> <p>Hides and destroys an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %} {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
</section> </section>
...@@ -5756,7 +5756,7 @@ $('#example').tooltip(options) ...@@ -5756,7 +5756,7 @@ $('#example').tooltip(options)
<h2>Usage</h2> <h2>Usage</h2>
<p>Enable popovers via JavaScript:</p> <p>Enable popovers via JavaScript:</p>
{% highlight js linenos %}$('#example').popover(options){% endhighlight %} {% highlight js %}$('#example').popover(options){% endhighlight %}
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
...@@ -5846,19 +5846,19 @@ $('#example').tooltip(options) ...@@ -5846,19 +5846,19 @@ $('#example').tooltip(options)
<h4>.popover('show')</h4> <h4>.popover('show')</h4>
<p>Reveals an elements popover.</p> <p>Reveals an elements popover.</p>
{% highlight js linenos %}$('#element').popover('show'){% endhighlight %} {% highlight js %}$('#element').popover('show'){% endhighlight %}
<h4>.popover('hide')</h4> <h4>.popover('hide')</h4>
<p>Hides an elements popover.</p> <p>Hides an elements popover.</p>
{% highlight js linenos %}$('#element').popover('hide'){% endhighlight %} {% highlight js %}$('#element').popover('hide'){% endhighlight %}
<h4>.popover('toggle')</h4> <h4>.popover('toggle')</h4>
<p>Toggles an elements popover.</p> <p>Toggles an elements popover.</p>
{% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %} {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
<h4>.popover('destroy')</h4> <h4>.popover('destroy')</h4>
<p>Hides and destroys an element's popover.</p> <p>Hides and destroys an element's popover.</p>
{% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %} {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
</section> </section>
...@@ -5897,11 +5897,11 @@ $('#example').tooltip(options) ...@@ -5897,11 +5897,11 @@ $('#example').tooltip(options)
<h2>Usage</h2> <h2>Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p> <p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js linenos %}$(".alert").alert(){% endhighlight %} {% highlight js %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3> <h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html linenos %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %} {% highlight html %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
<h3>Methods</h3> <h3>Methods</h3>
...@@ -5910,7 +5910,7 @@ $('#example').tooltip(options) ...@@ -5910,7 +5910,7 @@ $('#example').tooltip(options)
<h4>.alert('close')</h4> <h4>.alert('close')</h4>
<p>Closes an alert.</p> <p>Closes an alert.</p>
{% highlight js linenos %}$(".alert").alert('close'){% endhighlight %} {% highlight js %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
...@@ -5933,7 +5933,7 @@ $('#example').tooltip(options) ...@@ -5933,7 +5933,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% highlight js linenos %} {% highlight js %}
$('#my-alert').bind('closed', function () { $('#my-alert').bind('closed', function () {
// do something… // do something…
}) })
...@@ -5959,7 +5959,7 @@ $('#my-alert').bind('closed', function () { ...@@ -5959,7 +5959,7 @@ $('#my-alert').bind('closed', function () {
Loading state Loading state
</button> </button>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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>
...@@ -5970,7 +5970,7 @@ $('#my-alert').bind('closed', function () { ...@@ -5970,7 +5970,7 @@ $('#my-alert').bind('closed', function () {
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-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 linenos %} {% highlight html %}
<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>
{% endhighlight %} {% endhighlight %}
...@@ -5989,7 +5989,7 @@ $('#my-alert').bind('closed', function () { ...@@ -5989,7 +5989,7 @@ $('#my-alert').bind('closed', function () {
</label> </label>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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
...@@ -6018,7 +6018,7 @@ $('#my-alert').bind('closed', function () { ...@@ -6018,7 +6018,7 @@ $('#my-alert').bind('closed', function () {
</label> </label>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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
...@@ -6038,7 +6038,7 @@ $('#my-alert').bind('closed', function () { ...@@ -6038,7 +6038,7 @@ $('#my-alert').bind('closed', function () {
<h2>Usage</h2> <h2>Usage</h2>
<p>Enable buttons via JavaScript:</p> <p>Enable buttons via JavaScript:</p>
{% highlight js linenos %} {% highlight js %}
$('.nav-tabs').button() $('.nav-tabs').button()
{% endhighlight %} {% endhighlight %}
...@@ -6056,14 +6056,14 @@ $('.nav-tabs').button() ...@@ -6056,14 +6056,14 @@ $('.nav-tabs').button()
<h4>Auto toggling</h4> <h4>Auto toggling</h4>
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p> <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn" data-toggle="button">...</button> <button type="button" class="btn" data-toggle="button">...</button>
{% endhighlight %} {% endhighlight %}
<h4>$().button('loading')</h4> <h4>$().button('loading')</h4>
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>. <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
</p> </p>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn" data-loading-text="loading stuff...">...</button> <button type="button" class="btn" data-loading-text="loading stuff...">...</button>
{% endhighlight %} {% endhighlight %}
...@@ -6077,7 +6077,7 @@ $('.nav-tabs').button() ...@@ -6077,7 +6077,7 @@ $('.nav-tabs').button()
<h4>$().button(string)</h4> <h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</p> <p>Resets button state - swaps text to any data defined text state.</p>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn" data-complete-text="finished!" >...</button> <button type="button" class="btn" data-complete-text="finished!" >...</button>
<script> <script>
$('.btn').button('complete') $('.btn').button('complete')
...@@ -6145,7 +6145,7 @@ $('.nav-tabs').button() ...@@ -6145,7 +6145,7 @@ $('.nav-tabs').button()
</div> </div>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<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">
...@@ -6187,7 +6187,7 @@ $('.nav-tabs').button() ...@@ -6187,7 +6187,7 @@ $('.nav-tabs').button()
{% endhighlight %} {% endhighlight %}
<p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p> <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
{% highlight html linenos %} {% highlight html %}
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible simple collapsible
</button> </button>
...@@ -6207,7 +6207,7 @@ $('.nav-tabs').button() ...@@ -6207,7 +6207,7 @@ $('.nav-tabs').button()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Enable manually with:</p> <p>Enable manually with:</p>
{% highlight js linenos %} {% highlight js %}
$(".collapse").collapse() $(".collapse").collapse()
{% endhighlight %} {% endhighlight %}
...@@ -6243,7 +6243,7 @@ $(".collapse").collapse() ...@@ -6243,7 +6243,7 @@ $(".collapse").collapse()
<h4>.collapse(options)</h4> <h4>.collapse(options)</h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
{% highlight js linenos %} {% highlight js %}
$('#myCollapsible').collapse({ $('#myCollapsible').collapse({
toggle: false toggle: false
}) })
...@@ -6288,7 +6288,7 @@ $('#myCollapsible').collapse({ ...@@ -6288,7 +6288,7 @@ $('#myCollapsible').collapse({
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% highlight js linenos %} {% highlight js %}
$('#myCollapsible').on('hidden', function () { $('#myCollapsible').on('hidden', function () {
// do something… // do something…
}) })
...@@ -6332,7 +6332,7 @@ $('#myCollapsible').on('hidden', function () { ...@@ -6332,7 +6332,7 @@ $('#myCollapsible').on('hidden', function () {
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div id="carousel-example-generic" class="carousel slide"> <div id="carousel-example-generic" class="carousel slide">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
...@@ -6406,7 +6406,7 @@ $('#myCollapsible').on('hidden', function () { ...@@ -6406,7 +6406,7 @@ $('#myCollapsible').on('hidden', function () {
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<div class="item active"> <div class="item active">
<img src="..." alt=""> <img src="..." alt="">
<div class="carousel-caption"> <div class="carousel-caption">
...@@ -6428,7 +6428,7 @@ $('#myCollapsible').on('hidden', function () { ...@@ -6428,7 +6428,7 @@ $('#myCollapsible').on('hidden', function () {
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call carousel manually with:</p> <p>Call carousel manually with:</p>
{% highlight js linenos %} {% highlight js %}
$('.carousel').carousel() $('.carousel').carousel()
{% endhighlight %} {% endhighlight %}
...@@ -6463,7 +6463,7 @@ $('.carousel').carousel() ...@@ -6463,7 +6463,7 @@ $('.carousel').carousel()
<h4>.carousel(options)</h4> <h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
{% highlight html linenos %} {% highlight html %}
$('.carousel').carousel({ $('.carousel').carousel({
interval: 2000 interval: 2000
}) })
...@@ -6522,7 +6522,7 @@ $('.carousel').carousel({ ...@@ -6522,7 +6522,7 @@ $('.carousel').carousel({
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> <input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html %}
<input type="text" data-provide="typeahead"> <input type="text" data-provide="typeahead">
{% endhighlight %} {% endhighlight %}
...@@ -6538,7 +6538,7 @@ $('.carousel').carousel({ ...@@ -6538,7 +6538,7 @@ $('.carousel').carousel({
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the typeahead manually with:</p> <p>Call the typeahead manually with:</p>
{% highlight js linenos %} {% highlight js %}
$('.typeahead').typeahead() $('.typeahead').typeahead()
{% endhighlight %} {% endhighlight %}
...@@ -6623,7 +6623,7 @@ $('.typeahead').typeahead() ...@@ -6623,7 +6623,7 @@ $('.typeahead').typeahead()
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p> <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
{% highlight html linenos %} {% highlight html %}
<div data-spy="affix" data-offset-top="200">...</div> <div data-spy="affix" data-offset-top="200">...</div>
{% endhighlight %} {% endhighlight %}
...@@ -6634,14 +6634,14 @@ $('.typeahead').typeahead() ...@@ -6634,14 +6634,14 @@ $('.typeahead').typeahead()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the affix plugin via JavaScript:</p> <p>Call the affix plugin via JavaScript:</p>
{% highlight js linenos %} {% highlight js %}
$('#navbar').affix() $('#navbar').affix()
{% endhighlight %} {% endhighlight %}
<h3>Methods</h3> <h3>Methods</h3>
<h4>.affix('refresh')</h4> <h4>.affix('refresh')</h4>
<p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p> <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
{% highlight js linenos %} {% highlight js %}
$('[data-spy="affix"]').each(function () { $('[data-spy="affix"]').each(function () {
$(this).affix('refresh') $(this).affix('refresh')
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment