<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
<h3id="overview-type-links">Typography and links</h3>
<h3id="overview-type-links">Typography and links</h3>
...
@@ -39,13 +45,13 @@ base_url: "../"
...
@@ -39,13 +45,13 @@ base_url: "../"
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3id="overview-normalize">Normalize reset</h3>
<h3id="overview-normalize">Normalize reset</h3>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.io/normalize.css/"target="_blank">Normalize</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.io/normalize.css/"target="_blank">Normalize</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
<h3id="overview-container">Centering with container</h3>
<h3id="overview-container">Centering with container</h3>
<p>Easily center a page's contents by wrapping its contents in a container. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
{% highlight html %}
{% highlight html %}
<divclass="container">
<divclass="container">
...
...
...
@@ -616,7 +622,7 @@ base_url: "../"
...
@@ -616,7 +622,7 @@ base_url: "../"
<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>
<h3>Default blockquote</h3>
<h3>Default blockquote</h3>
<p>Wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
<p>Wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p>
<divclass="bs-example">
<divclass="bs-example">
<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>
...
@@ -629,7 +635,7 @@ base_url: "../"
...
@@ -629,7 +635,7 @@ base_url: "../"
{% endhighlight %}
{% 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 <code><blockquote></code>.</p>
<h4>Naming a source</h4>
<h4>Naming a source</h4>
<p>Add <code><small></code> tag for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
<p>Add <code><small></code> tag for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
...
@@ -827,7 +833,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -827,7 +833,7 @@ For example, <code><section></code> should be wrapped as inline.
<pre><p>Sample text here...</p></pre>
<pre><p>Sample text here...</p></pre>
{% endhighlight %}
{% endhighlight %}
<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>
</div>
</div>
...
@@ -887,7 +893,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -887,7 +893,7 @@ For example, <code><section></code> should be wrapped as inline.
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
<divclass="bs-callout bs-callout-danger">
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
</div>
</div>
<divclass="bs-example">
<divclass="bs-example">
<tableclass="table table-striped">
<tableclass="table table-striped">
...
@@ -1306,7 +1312,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1306,7 +1312,7 @@ For example, <code><section></code> should be wrapped as inline.
<p>Examples of standard form controls supported in an example form layout.</p>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
<divclass="bs-callout bs-callout-danger">
<divclass="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
...
@@ -1466,7 +1472,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1466,7 +1472,7 @@ For example, <code><section></code> should be wrapped as inline.
<divclass="bs-callout bs-callout-danger">
<divclass="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
</div>
<formclass="bs-example form-inline">
<formclass="bs-example form-inline">
...
@@ -1778,6 +1784,11 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1778,6 +1784,11 @@ For example, <code><section></code> should be wrapped as inline.
<imgsrc="..."class="img-thumbnail">
<imgsrc="..."class="img-thumbnail">
{% endhighlight %}
{% endhighlight %}
<divclass="bs-callout bs-callout-warning">
<h4>Responsive images</h4>
<p>Looking for how to make images more responsive? <ahref="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div>
</div>
</div>
...
@@ -1963,7 +1974,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1963,7 +1974,7 @@ For example, <code><section></code> should be wrapped as inline.
</li>
</li>
<li>
<li>
<spanclass="visible-lg">Large</span>
<spanclass="visible-lg">Large</span>
<spanclass="hidden-lg">✔ Hidden on desktop</span>
<spanclass="hidden-lg">✔ Hidden on large</span>