<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<pclass="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
<divclass="span4">
<divclass="well">
...
...
@@ -1272,7 +1275,7 @@ For example, <code>section</code> should be wrapped as inline.
<p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>
<spanclass="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<preclass="prettyprint linenums">
...
...
@@ -1697,10 +1698,10 @@
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</pre>
<p><spanclass="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.</p>
<p><spanclass="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<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>
<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>
<aclass="btn btn-primary"href="#">Customize and Download</a>
<aclass="btn btn-primary"href="#">Customize and Download</a>
<h4>What's included?</h4>
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
<h4class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
...
...
@@ -1371,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () {
<h3>Markup</h3>
<p>Data attributes are used for the previous and next conrols. Check out the example markup below.</p>
<td>Make the content of any element use CSS3 columns</td>
</tr>
<tr>
<td><code>.hyphens()</code></td>
<td><code>@mode: auto</code></td>
<td>CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>)</td>
</tr>
</tbody>
</table>
<h3>Backgrounds and gradients</h3>
...
...
@@ -975,8 +982,8 @@
<divclass="row">
<divclass="span4">
<h3>Node with makefile</h3>
<p>Install the LESS command line compiler and uglify-js globally with npm by running the following command:</p>
<pre>$ npm install -g less uglify-js</pre>
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
<pre>$ npm install -g less jshint recess uglify-js</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>
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
<p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.</p>
<p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
</div><!-- /.span -->
<divclass="span4">
<preclass="prettyprint linenums">
...
...
@@ -234,11 +234,11 @@
<divclass="span6">
<preclass="prettyprint linenums">
<div class="row">
<div class="span12">
Level 1 of column
<div class="span6">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
...
...
@@ -529,16 +529,16 @@
</div><!-- /.span -->
<divclass="span8">
<preclass="prettyprint linenums">
// Landscape phones and down
/* Landscape phones and down */
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<h3>{{_i}}Lead body copy{{/i}}</h3>
<p>{{_i}}Make a paragraph stand out by adding <code>.lead</code>.{{/i}}</p>
<pclass="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.{{/i}}
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
<preclass="prettyprint linenums">
...
...
@@ -1620,10 +1620,10 @@
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
</pre>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<aclass="btn btn-primary"href="#">{{_i}}Customize and Download{{/i}}</a>
<aclass="btn btn-primary"href="#"{{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>Customize and Download</a>
<h4>{{_i}}What's included?{{/i}}</h4>
<p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
<h4class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
<p>
...
...
@@ -1294,7 +1270,7 @@ $('#myCollapsible').on('hidden', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}</p>
<td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
</tr>
<tr>
<td><code>.hyphens()</code></td>
<td><code>@mode: auto</code></td>
<td>{{_i}}CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>){{/i}}</td>
</tr>
</tbody>
</table>
<h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
...
...
@@ -898,8 +904,8 @@
<divclass="row">
<divclass="span4">
<h3>{{_i}}Node with makefile{{/i}}</h3>
<p>{{_i}}Install the LESS command line compiler and uglify-js globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install -g less uglify-js</pre>
<p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install -g less jshint recess uglify-js</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}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).{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
<p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.{{/i}}</p>
<p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
@@ -5,9 +5,9 @@ These are the high-level design rules which guide the development of Bootstrap's
### DATA-ATTRIBUTE API
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. This is bootstraps first class api.
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API.
We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
We acknowledge that this isn't always the most performant and it may sometimes be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
$('body').off('.data-api')
...
...
@@ -19,7 +19,7 @@ To target a specific plugin, just include the plugins name as a namespace along
### PROGRAMATIC API
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API.
All public APIs should be single, chainable methods, and return the collection acted upon.
...
...
@@ -45,7 +45,7 @@ An options definition should take the following form:
*noun*: *adjective* - describes or modifies a quality of an instance
examples:
Examples:
backdrop: true
keyboard: false
...
...
@@ -93,7 +93,7 @@ Data attributes should take the following form:
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
<!-- Main hero unit for a primary marketing message or call to action -->
<divclass="hero-unit">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
