<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p>
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
</div>
</div>
</div><!-- /row -->
...
...
@@ -1178,17 +1203,12 @@
<br>
<h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
<divclass="row">
<divclass="span4">
<h2>Button groups</h2>
<p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code><a></code> or <code><button></code> elements. Button groups can also function as radios and checkboxes (see <ahref="./javascript.html#buttons">the Javascript docs</a> for that).</p>
<p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<pclass="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
</div>
<divclass="span8">
<h3>Linked button group</h3>
<p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</p>
<h3>Button groups</h3>
<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>
<p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p>
<divclass="well"style="padding: 10px;">
<divclass="btn-toolbar">
<divclass="btn-group">
...
...
@@ -1204,24 +1223,132 @@
<aclass="btn"href="#">2</a>
<aclass="btn"href="#">3</a>
<aclass="btn"href="#">4</a>
<aclass="btn"href="#">5</a>
</div>
<divclass="btn-group">
<aclass="btn"href="#">5</a>
<aclass="btn"href="#">6</a>
<aclass="btn"href="#">7</a>
<aclass="btn"href="#">8</a>
</div>
<divclass="btn-group">
<aclass="btn"href="#">9</a>
</div>
<divclass="btn-group">
<aclass="btn"href="#">10</a>
<aclass="btn"href="#">8</a>
</div>
</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">
...
</div>
</div>
</pre>
</div>
<divclass="span4">
<h3>Checkbox and radio flavors</h3>
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<hr>
<h4class="muted">Heads up</h4>
<pclass="muted">CSS for button groups is in a separate file, button-groups.less.</p>
</div>
</div>
<br>
<h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
<divclass="row">
<divclass="span4">
<h3>Split button dropdowns</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<aclass="btn info dropdown-toggle"data-toggle="dropdown"href="#"><spanclass="caret"></span></a>
<ulclass="dropdown-menu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<li><ahref="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /well -->
</div>
<divclass="span8">
<h3>Example markup</h3>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
<preclass="prettyprint linenums">
<h6 class="nav-label"></h6>
<ul class="nav-group">
...
</ul>
<h6 class="nav-label"></h6>
<ul class="nav-group">
...
</ul>
</pre>
</div>
</div>
</section>
...
...
@@ -267,10 +295,12 @@
<divclass="page-header">
<h1>Navbar</h1>
</div>
<divclass="navbar navbar-static">
<h2>Static navbar example</h2>
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
<divclass="navbar navbar-static">
<divclass="navbar-inner">
<divclass="container"style="width: auto;">
<aclass="brand"href="#">Project Name</a>
<aclass="brand"href="#">Project name</a>
<ulclass="nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Link</a></li>
...
...
@@ -306,20 +336,70 @@
</div><!-- /navbar -->
<divclass="row">
<divclass="span4">
<h3>What is it</h3>
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
<divclass="span4">
<h3>Customizable</h3>
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
<divclass="span8">
<h3>Navbar scaffolding</h3>
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</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>
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed">
...
</div>
</pre>
<br>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<preclass="prettyprint linenums">
<a class="brand" href="#">
Project name
</a>
</pre>
<br>
<h3>Search form</h3>
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</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">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</pre>
</div>
</div>
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
</section>
...
...
@@ -507,34 +587,39 @@
</div>
<divclass="row">
<divclass="span3">
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
</div>
<divclass="span9">
<divclass="span6">
<h3>Why use them</h3>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
<h3>Examples</h3>
<p>A single example shown as it might be displayed across multiple pages.</p>
<pclass="built-with">For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a>.</p>
<h1>Built with Bootstrap.</h1>
<pclass="marketing-byline">For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a>.</p>
@@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () {
<h3>Modal Heading</h3>
</div>
<divclass="modal-body">
<p>One fine body…</p>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4>
<p>This <ahref="#"class="btn"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<h4>Twipsy tooltips in a modal</h4>
<p><ahref="#"class="twipsy-test"title="Tooltip">This link</a> and <ahref="#"class="twipsy-test"title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
</div>
<divclass="modal-footer">
<ahref="#"class="btn primary">Save changes</a>
...
...
@@ -274,7 +281,7 @@ $('#myModal').on('hidden', function () {
<p>Install the less command line compiler with npm by running the following command:</p>
<pre>$ npm install lessc</pre>
<p>Install the LESS command line compiler with npm by running the following command:</p>
<pre>$ npm install less</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <ahref="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
</td>
...
...
@@ -422,7 +422,7 @@
<tr>
<td>Command line</td>
<td>
<p>If you already have the less command line tool installed, simply run the following command:</p>
<p>Install the LESS command line tool via Node and run the following command:</p>
<li>Right-aligned option for blockquotes if float: right;</li>
<li><code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px</li>
<li><code>h5</code> elements were dropped from 14px to 12px</li>
<li><code>h6</code> elements were dropped from 13px to 11px</li>
</ul>
</li>
<li>Buttons
...
...
@@ -99,6 +102,17 @@
<li>Added button bar options</li>
</ul>
</li>
<li>Examples
<ul>
<li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
</ul>
</li>
<li>Dropdown menus
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
