<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>
...
@@ -103,7 +107,9 @@ title: CSS
...
@@ -103,7 +107,9 @@ title: CSS
<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><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>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>
...
@@ -258,12 +274,12 @@ title: CSS
...
@@ -258,12 +274,12 @@ title: CSS
<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>
...
@@ -273,11 +289,11 @@ title: CSS
...
@@ -273,11 +289,11 @@ title: CSS
<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 -->
...
@@ -304,11 +320,11 @@ title: CSS
...
@@ -304,11 +320,11 @@ title: CSS
<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>
...
@@ -324,11 +340,11 @@ title: CSS
...
@@ -324,11 +340,11 @@ title: CSS
<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>
...
@@ -351,11 +367,11 @@ title: CSS
...
@@ -351,11 +367,11 @@ title: CSS
<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>
...
@@ -366,11 +382,11 @@ title: CSS
...
@@ -366,11 +382,11 @@ title: CSS
<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>
...
@@ -385,12 +401,12 @@ title: CSS
...
@@ -385,12 +401,12 @@ title: CSS
<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>
...
@@ -407,12 +423,13 @@ title: CSS
...
@@ -407,12 +423,13 @@ title: CSS
<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.
