<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code><li></code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code><li></code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="navbar">
<divclass="navbar">
...
@@ -707,13 +741,13 @@ title: Components
...
@@ -707,13 +741,13 @@ title: Components
</div>
</div>
</div>
</div>
</div><!-- /example -->
</div><!-- /example -->
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ul class="nav">
<ulclass="nav">
...
...
<li class="divider"></li>
<liclass="divider"></li>
...
...
</ul>
</ul>
</pre>
{% endhighlight %}
<h3>Forms</h3>
<h3>Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Using dropdowns</h3>
<h3>Using dropdowns</h3>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
...
@@ -816,14 +833,11 @@ title: Components
...
@@ -816,14 +833,11 @@ title: Components
</div>
</div>
</div>
</div>
</div><!-- /example -->
</div><!-- /example -->
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="navbar navbar-static-top">
<divclass="navbar navbar-static-top">
...
...
</div>
</div>
</pre>
{% endhighlight %}
<hrclass="bs-docs-separator">
<h2>Responsive navbar</h2>
<h2>Responsive navbar</h2>
...
@@ -873,40 +887,36 @@ title: Components
...
@@ -873,40 +887,36 @@ title: Components
</li>
</li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.nav-collapse -->
</div>
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /navbar -->
</div><!-- /example -->
</div><!-- /example -->
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="navbar">
<divclass="navbar">
<div class="container">
<divclass="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<strong>Heads up!</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
<strong>Heads up!</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
</div>
<hrclass="bs-docs-separator">
<h2>Inverted variation</h2>
<h2>Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
...
@@ -1111,20 +1123,13 @@ title: Components
...
@@ -1111,20 +1123,13 @@ title: Components
</ul>
</ul>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ul class="pagination pagination-large">
<ulclass="pagination pagination-large">...</ul>
...
<ulclass="pagination pagination">...</ul>
</ul>
<ulclass="pagination pagination-small">...</ul>
<ul class="pagination">
<ulclass="pagination pagination-mini">...</ul>
...
{% endhighlight %}
</ul>
<ul class="pagination pagination-small">
...
</ul>
<ul class="pagination pagination-mini">
...
</ul>
</pre>
<h2id="pagination-pager">Pager</h2>
<h2id="pagination-pager">Pager</h2>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<p>When there are no new or unread items, counters will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<p>When there are no new or unread items, counters will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
...
@@ -1279,11 +1275,11 @@ title: Components
...
@@ -1279,11 +1275,11 @@ title: Components
<h1>Example page header <small>Subtext for header</small></h1>
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="page-header">
<divclass="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
</pre>
{% endhighlight %}
</section>
</section>
...
@@ -1323,16 +1319,16 @@ title: Components
...
@@ -1323,16 +1319,16 @@ title: Components
</div>
</div>
</div>
</div>
</div><!-- /.bs-docs-example -->
</div><!-- /.bs-docs-example -->
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="row">
<divclass="row">
<div class="span3">
<divclass="span3">
<a href="#" class="thumbnail">
<ahref="#"class="thumbnail">
<img src="holder.js/260x180" alt="">
<imgdata-src="holder.js/260x180"alt="">
</a>
</a>
</div>
</div>
...
...
</div>
</div>
</pre>
{% endhighlight %}
<h3>Custom content thumbnails</h3>
<h3>Custom content thumbnails</h3>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<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>
</pre>
{% endhighlight %}
<h3>Block alerts</h3>
<h3>Block alerts</h3>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
...
@@ -1420,13 +1420,13 @@ title: Components
...
@@ -1420,13 +1420,13 @@ title: Components
<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>
<p>Simple, focused classes for small display or behavior tweaks.</p>
<p>Simple, focused classes for small display or behavior tweaks.</p>
<h4>.pull-left</h4>
<h4>.pull-left</h4>
<p>Float an element left</p>
<p>Float an element left</p>
<preclass="prettyprint linenums">
{% highlight html linenos %}
class="pull-left"
<divclass="pull-left">...</div>
</pre>
{% endhighlight %}
<preclass="prettyprint linenums">
{% highlight css linenos %}
.pull-left {
.pull-left {
float: left;
float: left;
}
}
</pre>
{% endhighlight %}
<h4>.pull-right</h4>
<h4>.pull-right</h4>
<p>Float an element right</p>
<p>Float an element right</p>
<preclass="prettyprint linenums">
{% highlight html linenos %}
class="pull-right"
<divclass="pull-right">...</div>
</pre>
{% endhighlight %}
<preclass="prettyprint linenums">
{% highlight css linenos %}
.pull-right {
.pull-right {
float: right;
float: right;
}
}
</pre>
{% endhighlight %}
<h4>.muted</h4>
<h4>.muted</h4>
<p>Change an element's color to <code>#999</code></p>
<p>Change an element's color to <code>#999</code></p>
<preclass="prettyprint linenums">
{% highlight html linenos %}
class="muted"
<pclass="muted">...</p>
</pre>
{% endhighlight %}
<preclass="prettyprint linenums">
{% highlight css linenos %}
.muted {
.muted {
color: #999;
color: #999;
}
}
</pre>
{% endhighlight %}
<h4>.clearfix</h4>
<h4>.clearfix</h4>
<p>Clear the <code>float</code> on any element. Utilizes <ahref="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 <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
