<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
</div>
<preclass="prettyprint">
<preclass="prettyprint">
<em>rendered as italicized text</em>
<em>rendered as italicized text</em>
</pre>
</pre>
<p><spanclass="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
<p><spanclass="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
...
@@ -1669,10 +1670,10 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1669,10 +1670,10 @@ For example, <code>section</code> should be wrapped as inline.
<h1>Badges <small>Indicators and unread counts</small></h1>
</div>
<h3>About</h3>
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
<h1>Typographic components</h1>
</div>
</div>
<h2>Hero unit</h2>
<h2>Hero unit</h2>
<p>A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="hero-unit">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<h1>Hello, world!</h1>
...
@@ -1778,7 +1766,7 @@
...
@@ -1778,7 +1766,7 @@
<h3>Uses grid column sizes</h3>
<h3>Uses grid column sizes</h3>
<p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
<p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
<h2>The markup</h2>
<h2>Markup</h2>
<p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
<p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
...
@@ -825,9 +829,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -825,9 +829,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>Markup</h3>
<h3>Markup</h3>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
</pre>
</pre>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
<h4>$().tooltip(options)</h4>
...
@@ -1074,7 +1078,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -1074,7 +1078,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div>
</div>
<h2>Requires HTML5 doctype</h2>
<h3>Requires HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<!DOCTYPE html>
<!DOCTYPE html>
...
@@ -110,7 +111,7 @@
...
@@ -110,7 +111,7 @@
</html>
</html>
</pre>
</pre>
<h2>Typography and links</h2>
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<ul>
<li>Remove <code>margin</code> on the body</li>
<li>Remove <code>margin</code> on the body</li>
...
@@ -120,7 +121,7 @@
...
@@ -120,7 +121,7 @@
</ul>
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<h2>Reset via Normalize</h2>
<h3>Reset via Normalize</h3>
<p>With Bootstrap 2, the old reset block has been dropped in favor of <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> that also powers the <ahref="http://html5boilerplate.com"target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
<p>With Bootstrap 2, the old reset block has been dropped in favor of <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> that also powers the <ahref="http://html5boilerplate.com"target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
<p>The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>Variable</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>12</td>
<td>Number of columns</td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>60px</td>
<td>Width of each column</td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td>Negative space between columns</td>
</tr>
<tr>
<td><code>@fluidGridColumnWidth</code></td>
<td>6.382978723%</td>
<td>Width of each fluid column</td>
</tr>
<tr>
<td><code>@fluidGridGutterWidth</code></td>
<td>2.127659574%</td>
<td>Negative space between fluid columns</td>
</tr>
</tbody>
</table>
<h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <ahref="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.</p>
<h2>Staying responsive</h2>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
<pclass="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<pclass="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.{{/i}}</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
</div>
<preclass="prettyprint">
<preclass="prettyprint">
<em>rendered as italicized text</em>
<em>rendered as italicized text</em>
</pre>
</pre>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.{{/i}}</p>
<h1>{{_i}}Badges{{/i}}<small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div>
<h3>About</h3>
<p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
<h1>{{_i}}Typographic components{{/i}}<small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
<h1>{{_i}}Typographic components{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<h2>{{_i}}Hero unit{{/i}}</h2>
<p>{{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<p>{{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="hero-unit">
<divclass="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<h1>{{_i}}Hello, world!{{/i}}</h1>
...
@@ -1708,7 +1698,7 @@
...
@@ -1708,7 +1698,7 @@
<h3>{{_i}}Uses grid column sizes{{/i}}</h3>
<h3>{{_i}}Uses grid column sizes{{/i}}</h3>
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.{{/i}}</p>
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.{{/i}}</p>
<h2>{{_i}}The markup{{/i}}</h2>
<h2>{{_i}}Markup{{/i}}</h2>
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.{{/i}}
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}
<td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
<td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
...
@@ -757,9 +763,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -757,9 +763,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
</pre>
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
...
@@ -1006,7 +1012,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -1006,7 +1012,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<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 and includes fixed- and fluid-width layouts.{{/i}}</p>
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Requires HTML5 doctype{{/i}}</h2>
<h3>{{_i}}Requires HTML5 doctype{{/i}}</h3>
<p>{{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}</p>
<p>{{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<!DOCTYPE html>
<!DOCTYPE html>
...
@@ -40,7 +43,7 @@
...
@@ -40,7 +43,7 @@
</html>
</html>
</pre>
</pre>
<h2>{{_i}}Typography and links{{/i}}</h2>
<h3>{{_i}}Typography and links{{/i}}</h3>
<p>{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
<p>{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
<ul>
<ul>
<li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
<li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
...
@@ -50,7 +53,7 @@
...
@@ -50,7 +53,7 @@
</ul>
</ul>
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
<h2>{{_i}}Reset via Normalize{{/i}}</h2>
<h3>{{_i}}Reset via Normalize{{/i}}</h3>
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> that also powers the <ahref="http://html5boilerplate.com"target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> that also powers the <ahref="http://html5boilerplate.com"target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
<p>{{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.{{/i}}</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Variable{{/i}}</th>
<th>{{_i}}Default value{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>12</td>
<td>{{_i}}Number of columns{{/i}}</td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>60px</td>
<td>{{_i}}Width of each column{{/i}}</td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td>{{_i}}Negative space between columns{{/i}}</td>
</tr>
<tr>
<td><code>@fluidGridColumnWidth</code></td>
<td>6.382978723%</td>
<td>{{_i}}Width of each fluid column{{/i}}</td>
</tr>
<tr>
<td><code>@fluidGridGutterWidth</code></td>
<td>2.127659574%</td>
<td>{{_i}}Negative space between fluid columns{{/i}}</td>
</tr>
</tbody>
</table>
<h3>{{_i}}How to customize{{/i}}</h3>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <ahref="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.{{/i}}</p>
<h2>{{_i}}Staying responsive{{/i}}</h2>
<p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
