<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">
<!DOCTYPE html>
{% highlight html linenos %}
<html lang="en">
<!DOCTYPE html>
<htmllang="en">
...
...
</html>
</html>
</pre>
{% endhighlight %}
<h3>Mobile first</h3>
<h3>Mobile first</h3>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<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>
...
@@ -146,6 +87,7 @@
...
@@ -146,6 +87,7 @@
<h1>Typography</h1>
<h1>Typography</h1>
</div>
</div>
<!-- Headings -->
<h2id="headings">Headings</h2>
<h2id="headings">Headings</h2>
<p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p>
<p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
...
@@ -157,6 +99,7 @@
...
@@ -157,6 +99,7 @@
<h6>h6. Heading 6</h6>
<h6>h6. Heading 6</h6>
</div>
</div>
<!-- Body copy -->
<h2id="body-copy">Body copy</h2>
<h2id="body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
...
@@ -164,19 +107,26 @@
...
@@ -164,19 +107,26 @@
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<!-- Emphasis -->
<h2id="emphasis">Emphasis</h2>
<h2id="emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
...
@@ -185,25 +135,28 @@
...
@@ -185,25 +135,28 @@
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
</div>
</div>
<preclass="prettyprint">
{% highlight html linenos %}
<p>
<small>This line of text is meant to be treated as fine print.</small>
<small>This line of text is meant to be treated as fine print.</small>
{% endhighlight %}
</p>
</pre>
<h3>Bold</h3>
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
</div>
<preclass="prettyprint"><strong>rendered as bold text</strong></pre>
{% highlight html linenos %}
<strong>rendered as bold text</strong>
{% endhighlight %}
<h3>Italics</h3>
<h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p>
<p>For emphasizing a snippet of text with italics.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<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"><em>rendered as italicized text</em></pre>
{% highlight html linenos %}
<em>rendered as italicized text</em>
{% endhighlight %}
<p>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>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>Convey meaning through color with a handful of emphasis utility classes.</p>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
...
@@ -228,14 +181,16 @@
...
@@ -228,14 +181,16 @@
<pclass="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<pclass="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<pclass="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<pclass="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<pclass="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<pclass="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<pclass="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<pclass="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
</pre>
<pclass="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
{% endhighlight %}
<!-- Abbreviations -->
<h2id="abbreviations">Abbreviations</h2>
<h2id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
<p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
...
@@ -244,16 +199,21 @@
...
@@ -244,16 +199,21 @@
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
<p>For quoting blocks of content from another source within your document.</p>
<p>For quoting blocks of content from another source within your document.</p>
...
@@ -296,11 +257,11 @@
...
@@ -296,11 +257,11 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</blockquote>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</blockquote>
</pre>
{% endhighlight %}
<h3>Blockquote options</h3>
<h3>Blockquote options</h3>
<p>Style and content changes for simple variations on a standard blockquote.</p>
<p>Style and content changes for simple variations on a standard blockquote.</p>
...
@@ -313,12 +274,12 @@
...
@@ -313,12 +274,12 @@
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
</blockquote>
</blockquote>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
<small>Someone famous <citetitle="Source Title">Source Title</cite></small>
</blockquote>
</blockquote>
</pre>
{% endhighlight %}
<h4>Alternate displays</h4>
<h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
...
@@ -328,11 +289,11 @@
...
@@ -328,11 +289,11 @@
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
</blockquote>
</blockquote>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<blockquote class="pull-right">
<blockquoteclass="pull-right">
...
...
</blockquote>
</blockquote>
</pre>
{% endhighlight %}
<!-- Lists -->
<!-- Lists -->
...
@@ -359,11 +320,11 @@
...
@@ -359,11 +320,11 @@
<li>Eget porttitor lorem</li>
<li>Eget porttitor lorem</li>
</ul>
</ul>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ul>
<ul>
<li>...</li>
<li>...</li>
</ul>
</ul>
</pre>
{% endhighlight %}
<h3>Ordered</h3>
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
...
@@ -379,11 +340,11 @@
...
@@ -379,11 +340,11 @@
<li>Eget porttitor lorem</li>
<li>Eget porttitor lorem</li>
</ol>
</ol>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ol>
<ol>
<li>...</li>
<li>...</li>
</ol>
</ol>
</pre>
{% endhighlight %}
<h3>Unstyled</h3>
<h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
...
@@ -406,11 +367,11 @@
...
@@ -406,11 +367,11 @@
<li>Eget porttitor lorem</li>
<li>Eget porttitor lorem</li>
</ul>
</ul>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ul class="list-unstyled">
<ulclass="list-unstyled">
<li>...</li>
<li>...</li>
</ul>
</ul>
</pre>
{% endhighlight %}
<h3>Inline</h3>
<h3>Inline</h3>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
...
@@ -421,11 +382,11 @@
...
@@ -421,11 +382,11 @@
<li>Nulla volutpat</li>
<li>Nulla volutpat</li>
</ul>
</ul>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<ul class="list-inline">
<ulclass="list-inline">
<li>...</li>
<li>...</li>
</ul>
</ul>
</pre>
{% endhighlight %}
<h3>Description</h3>
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
<p>A list of terms with their associated descriptions.</p>
...
@@ -440,12 +401,12 @@
...
@@ -440,12 +401,12 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</dl>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<dl>
<dl>
<dt>...</dt>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
</dl>
</dl>
</pre>
{% endhighlight %}
<h4>Horizontal description</h4>
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code><dl></code> line up side-by-side.</p>
<p>Make terms and descriptions in <code><dl></code> line up side-by-side.</p>
...
@@ -462,12 +423,13 @@
...
@@ -462,12 +423,13 @@
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</dl>
</div>
</div>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<dl class="dl-horizontal">
<dlclass="dl-horizontal">
<dt>...</dt>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
</dl>
</dl>
</pre>
{% endhighlight %}
<h5>Auto-truncating</h5>
<h5>Auto-truncating</h5>
<p>
<p>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
...
@@ -513,12 +475,13 @@
...
@@ -513,12 +475,13 @@
<h3>Basic grid HTML</h3>
<h3>Basic grid HTML</h3>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="row">
<divclass="row">
<div class="span4">...</div>
<divclass="span8">8</div>
<div class="span8">...</div>
<divclass="span4">4</div>
</div>
</div>
</pre>
{% endhighlight %}
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
&lt;p&gt;Sample text here...&lt;/p&gt;
{% endhighlight %}
</pre>
</pre>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
</section>
...
@@ -615,7 +582,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -615,7 +582,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
</div>
</div>
<h2>Default styles</h2>
<h2>Default styles</h2>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table">
<tableclass="table">
<thead>
<thead>
...
@@ -647,12 +614,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -647,12 +614,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
</div>
</div><!-- /example -->
<preclass="prettyprint linenums">
{% highlight html linenos %}
<table class="table">
<tableclass="table">
…
...
</table>
</table>
</pre>
{% endhighlight %}
<h2>Optional classes</h2>
<h2>Optional classes</h2>
...
@@ -691,12 +658,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -691,12 +658,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
...
@@ -1106,32 +1072,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1106,32 +1072,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
...
@@ -1246,23 +1206,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1246,23 +1206,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<option>5</option>
<option>5</option>
</select>
</select>
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<select>
<select>
<option>1</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>3</option>
<option>3</option>
<option>4</option>
<option>4</option>
<option>5</option>
<option>5</option>
</select>
</select>
<select multiple="multiple">
<selectmultiple="multiple">
<option>1</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>3</option>
<option>3</option>
<option>4</option>
<option>4</option>
<option>5</option>
<option>5</option>
</select>
</select>
</pre>
{% endhighlight %}
...
@@ -1274,9 +1234,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1274,9 +1234,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<formclass="bs-docs-example form-inline">
<formclass="bs-docs-example form-inline">
<inputclass="focused"id="focusedInput"type="text"value="This is focused...">
<inputclass="focused"id="focusedInput"type="text"value="This is focused...">
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<input id="focusedInput" type="text" value="This is focused...">
<inputid="focusedInput"type="text"value="This is focused...">
</pre>
{% endhighlight %}
<h3id="forms-invalid-inputs">Invalid inputs</h3>
<h3id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
...
@@ -1284,18 +1244,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1284,18 +1244,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
...
@@ -1317,22 +1277,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1317,22 +1277,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
...
@@ -1476,21 +1442,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1476,21 +1442,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
@@ -1676,28 +1650,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1676,28 +1650,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped
</div>
</div>
</div>
</div>
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<div class="row">
<divclass="row">
<div class="span4">
<divclass="span4">
<input type="text" placeholder=".span4">
<inputtype="text"placeholder=".span4">
</div>
</div>
<div class="span4">
<divclass="span4">
<input type="text" placeholder=".span4">
<inputtype="text"placeholder=".span4">
</div>
</div>
<div class="span4">
<divclass="span4">
<input type="text" placeholder=".span4">
<inputtype="text"placeholder=".span4">
</div>
</div>
</div>
</div>
</pre>
{% endhighlight %}
<h3>Uneditable inputs</h3>
<h3>Uneditable inputs</h3>
<p>Present data in a form that's not editable without using actual form markup.</p>
<p>Present data in a form that's not editable without using actual form markup.</p>
<formclass="bs-docs-example">
<formclass="bs-docs-example">
<spanclass="input-xlarge uneditable-input">Some value here</span>
<spanclass="input-xlarge uneditable-input">Some value here</span>
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<span class="input-xlarge uneditable-input">Some value here</span>
<spanclass="uneditable-input">Some value here</span>
</pre>
{% endhighlight %}
<h3>Form actions</h3>
<h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
...
@@ -1707,12 +1681,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1707,12 +1681,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Inline and block level support for help text that appears around form controls.</p>
<p>Inline and block level support for help text that appears around form controls.</p>
...
@@ -1720,18 +1694,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1720,18 +1694,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<formclass="bs-docs-example form-inline">
<formclass="bs-docs-example form-inline">
<inputtype="text"><spanclass="help-inline">Inline help text</span>
<inputtype="text"><spanclass="help-inline">Inline help text</span>
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<input type="text"><span class="help-inline">Inline help text</span>
<inputtype="text">
</pre>
<spanclass="help-inline">Inline help text</span>
{% endhighlight %}
<h4>Block help</h4>
<h4>Block help</h4>
<formclass="bs-docs-example form-inline">
<formclass="bs-docs-example form-inline">
<inputtype="text">
<inputtype="text">
<spanclass="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<spanclass="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
</form>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<inputtype="text">
</pre>
<spanclass="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</section>
</section>
...
@@ -1817,24 +1793,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1817,24 +1793,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p>
</p>
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.</p>
<p>As a best practice, <strong>we highly recommend matching using the <code><button<</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
</section>
</section>
...
@@ -1906,15 +1883,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -1906,15 +1883,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
@@ -2105,9 +2082,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -2105,9 +2082,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<h2>How to use</h2>
<h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
<preclass="prettyprint linenums">
{% highlight html linenos %}
<i class="glyphicon-search"></i>
<spanclass="glyphicon-search"></span>
</pre>
{% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
...
@@ -2121,87 +2098,86 @@ For example, <code>&lt;section&gt;</code> should be wrapped
...
@@ -2121,87 +2098,86 @@ For example, <code>&lt;section&gt;</code> should be wrapped
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://twitter.github.com/bootstrap/"data-count="horizontal"data-via="twbootstrap"data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
<p>Designed and built with all the love in the world by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Code licensed under <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>, documentation under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><ahref="http://glyphicons.com">Glyphicons Free</a> licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
