We have included a makefile with convenience methods for working with the Bootstrap library.
+**build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir.
The lessc compiler is required for this command to run.
Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <ahref="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs »</a>
+**watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save.
Watchr is required for this command to run.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<divclass="btn-toolbar"style="margin-top: 18px;">
<divclass="btn-group">
<h3>Best practices</h3>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<ul>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
<li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
</ul>
<p><spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
</div>
<divclass="span4">
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<aclass="btn"href="#">Left</a>
<aclass="btn"href="#">Middle</a>
<aclass="btn"href="#">Right</a>
</div>
</div>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<h3>Toolbar example</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<divclass="btn-toolbar">
<divclass="btn-group">
<aclass="btn"href="#">1</a>
...
...
@@ -142,18 +163,6 @@
<aclass="btn"href="#">8</a>
</div>
</div>
</div>
<divclass="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
</pre>
<p>And with a toolbar for multiple groups:</p>
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-group">
...
...
@@ -239,7 +248,9 @@
<li><ahref="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><spanclass="label label-info">Heads up!</span> Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
<divclass="span8">
<h3>Example markup</h3>
...
...
@@ -354,9 +365,10 @@
<divclass="span4">
<h3>Powerful base class</h3>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<h3>Why tabs and pills</h3>
<p>Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
<p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
<h3>When to use</h3>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<h3>Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
</div>
<divclass="span4">
<h3>Basic tabs</h3>
...
...
@@ -762,7 +774,9 @@
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<liclass="nav-header">Nav header</li>
<li><ahref="#">Separated link</a></li>
<li><ahref="#">One more separated link</a></li>
</ul>
</li>
</ul>
...
...
@@ -801,12 +815,14 @@
</div>
</div>
</pre>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
<h3>Fixed navbar</h3>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<preclass="prettyprint linenums">
...
...
@@ -827,14 +843,14 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>Component alignment</h3>
<p>To align a nav, 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>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdown">our javascript plugin</a>.</p>
<p>Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
...
...
@@ -881,7 +907,7 @@
</li>
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdown">Get the javascript →</a></p>
<p><aclass="btn"href="./javascript.html#dropdowns">Get the javascript →</a></p>
</div><!-- /.span -->
</div><!-- /.row -->
...
...
@@ -1021,7 +1047,7 @@
<divclass="row">
<divclass="span4">
<h3>About pager</h3>
<p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<divclass="row">
<divclass="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<preclass="prettyprint linenums">
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
</pre>
</div>
<divclass="span8">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>A simple shell for an <code>h1</code> to appropratiely 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>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.</p>
<h3>Single alert message</h3>
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
<hr>
...
...
@@ -1294,24 +1369,24 @@
<h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<divclass="alert">
<aclass="close">×</a>
<aclass="close"data-dismiss="alert">×</a>
<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>
</pre>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<divclass="alert alert-block">
<aclass="close">×</a>
<aclass="close"data-dismiss="alert">×</a>
<h4class="alert-heading">Warning!</h4>
<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>
