<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>
<html lang="en">
{% highlight html linenos %}
<!DOCTYPE html>
<htmllang="en">
...
</html>
</pre>
</html>
{% endhighlight %}
<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>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>
...
...
@@ -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>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>
</div>
<preclass="prettyprint">
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
</pre>
{% highlight html linenos %}
<small>This line of text is meant to be treated as fine print.</small>
{% endhighlight %}
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<divclass="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<preclass="prettyprint"><strong>rendered as bold text</strong></pre>
{% highlight html linenos %}
<strong>rendered as bold text</strong>
{% endhighlight %}
<h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p>
<divclass="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<preclass="prettyprint linenums">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</pre>
{% highlight html linenos %}
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
{% endhighlight %}
<h3>Blockquote options</h3>
<p>Style and content changes for simple variations on a standard blockquote.</p>
...
...
@@ -258,12 +274,12 @@ title: CSS
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
</blockquote>
</div>
<preclass="prettyprint linenums">
<blockquote>
<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>
</blockquote>
</pre>
{% highlight html linenos %}
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <citetitle="Source Title">Source Title</cite></small>
</blockquote>
{% endhighlight %}
<h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
...
...
@@ -273,11 +289,11 @@ title: CSS
<small>Someone famous in <citetitle="Source Title">Source Title</cite></small>
</blockquote>
</div>
<preclass="prettyprint linenums">
<blockquote class="pull-right">
{% highlight html linenos %}
<blockquoteclass="pull-right">
...
</blockquote>
</pre>
</blockquote>
{% endhighlight %}
<!-- Lists -->
...
...
@@ -304,11 +320,11 @@ title: CSS
<li>Eget porttitor lorem</li>
</ul>
</div>
<preclass="prettyprint linenums">
<ul>
<li>...</li>
</ul>
</pre>
{% highlight html linenos %}
<ul>
<li>...</li>
</ul>
{% endhighlight %}
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
...
...
@@ -324,11 +340,11 @@ title: CSS
<li>Eget porttitor lorem</li>
</ol>
</div>
<preclass="prettyprint linenums">
<ol>
<li>...</li>
</ol>
</pre>
{% highlight html linenos %}
<ol>
<li>...</li>
</ol>
{% endhighlight %}
<h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
...
...
@@ -351,11 +367,11 @@ title: CSS
<li>Eget porttitor lorem</li>
</ul>
</div>
<preclass="prettyprint linenums">
<ul class="list-unstyled">
<li>...</li>
</ul>
</pre>
{% highlight html linenos %}
<ulclass="list-unstyled">
<li>...</li>
</ul>
{% endhighlight %}
<h3>Inline</h3>
<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
<li>Nulla volutpat</li>
</ul>
</div>
<preclass="prettyprint linenums">
<ul class="list-inline">
<li>...</li>
</ul>
</pre>
{% highlight html linenos %}
<ulclass="list-inline">
<li>...</li>
</ul>
{% endhighlight %}
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
...
...
@@ -385,12 +401,12 @@ title: CSS
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<preclass="prettyprint linenums">
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
</pre>
{% highlight html linenos %}
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
{% endhighlight %}
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code><dl></code> line up side-by-side.</p>
...
...
@@ -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>
</dl>
</div>
<preclass="prettyprint linenums">
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
</pre>
{% highlight html linenos %}
<dlclass="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
{% endhighlight %}
<h5>Auto-truncating</h5>
<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.
