@@ -952,7 +952,6 @@ For example, <code>section</code> should be wrapped as inline.
</form>
</div>
<divclass="span4">
<divclass="form-docs">
<h3>What's included</h3>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<ul>
...
...
@@ -969,7 +968,6 @@ For example, <code>section</code> should be wrapped as inline.
<p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
</div>
</div>
</div>
<br>
...
...
@@ -1047,7 +1045,6 @@ For example, <code>section</code> should be wrapped as inline.
</form>
</div>
<divclass="span4">
<divclass="form-docs">
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
...
...
@@ -1061,7 +1058,6 @@ For example, <code>section</code> should be wrapped as inline.
</pre>
</div>
</div>
</div>
<br>
...
...
@@ -1152,14 +1148,15 @@ For example, <code>section</code> should be wrapped as inline.
</form>
</div>
<divclass="span4">
<divclass="form-docs">
<h3>Prepend & append inputs</h3>
<p>Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<hr>
<h3>Checkboxes and radios</h3>
<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>
<hr>
<h4>Inline forms and append/prepend</h4>
<p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
</div>
</div><!-- /row -->
</section>
...
...
@@ -1410,7 +1407,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
<divclass="alert alert-info">
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.
</div>
<br>
...
...
@@ -1497,7 +1494,7 @@ For example, <code>section</code> should be wrapped as inline.
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<preclass="prettyprint linenums">
<div class="navbar navbar-static">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
...
...
@@ -713,7 +720,7 @@
</div>
</div>
</pre>
<p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</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>
<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>
<p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<preclass="prettyprint linenums">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
...
...
@@ -1056,7 +1093,7 @@
</li>
<liclass="span3">
<divclass="thumbnail">
<imgsrc="http://placehold.it/210x150"alt="">
<imgsrc="http://placehold.it/260x180"alt="">
<divclass="caption">
<h5>Thumbnail label</h5>
<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>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul>
...
...
@@ -897,7 +896,6 @@
<p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
</div>
</div>
</div>
<br>
...
...
@@ -975,7 +973,6 @@
</form>
</div>
<divclass="span4">
<divclass="form-docs">
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<hr>
...
...
@@ -989,7 +986,6 @@
</pre>
</div>
</div>
</div>
<br>
...
...
@@ -1080,14 +1076,15 @@
</form>
</div>
<divclass="span4">
<divclass="form-docs">
<h3>{{_i}}Prepend & append inputs{{/i}}</h3>
<p>{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}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>.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
</div>
<hr>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
<p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
</div>
</div><!-- /row -->
</section>
...
...
@@ -1338,7 +1335,7 @@
</div>
</div>
<divclass="alert alert-info">
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.{{/i}}
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
<preclass="prettyprint linenums">
<div class="navbar navbar-static">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
...
...
@@ -641,7 +648,7 @@
</div>
</div>
</pre>
<p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</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>.{{/i}}</p>
<p>{{_i}}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>.{{/i}}</p>
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<preclass="prettyprint linenums">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
...
...
@@ -984,7 +1021,7 @@
</li>
<liclass="span3">
<divclass="thumbnail">
<imgsrc="http://placehold.it/210x150"alt="">
<imgsrc="http://placehold.it/260x180"alt="">
<divclass="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<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>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
<li><code>.progress-info</code></li>
<li><code>.progress-success</code></li>
<li><code>.progress-danger</code></li>
</ul>
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Behavior{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
<li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
</ul>
<h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
<ul>
<li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
<li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
<li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
<li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
<li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
<li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <ahref="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
</ul>
<h3>{{_i}}Dropdown menus{{/i}}</h3>
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
<li>Pills were restyled to be less rounded by default</li>
<li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
</ul>
<h3>Navbar (formerly topbar)</h3>
<ul>
<li>Base class changed from <code>.topbar</code> to <code>.navbar</code></li>
<li>Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed)</li>
<li>Added vertical dividers to top-level nav</li>
<li>Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.</li>
<li>Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.</li>
<li>Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <ahref="./components.html#navbar">See navbar docs</a> for how to utilize.</li>
</ul>
<h3>Dropdown menus</h3>
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
text-align:center;/* center align it with the container */
}
.container{
width:820px;/* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
width:820px;/* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 10 columns and not 12. */
<!-- Main hero unit for a primary marketing message or call to action -->
</div><!--/.well -->
</div><!--/span-->
<divclass="span9">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><aclass="btn primary large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<divclass="row">
<divclass="row row-fluid">
<divclass="span4">
<h2>Heading</h2>
<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>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 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>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>
<!-- Main hero unit for a primary marketing message or call to action -->
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><aclass="btn primary large">Learn more »</a></p>
