diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 29 |
1 files changed, 20 insertions, 9 deletions
@@ -31,6 +31,12 @@ base_url: "../" <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endhighlight %} + <h3 id="overview-responsive-images">Responsive images</h3> + <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> +{% highlight html %} +<img src="..." class="img-responsive" alt="Reponsive image"> +{% endhighlight %} + <h3 id="overview-type-links">Typography and links</h3> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <ul> @@ -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>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </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> <h3 id="overview-normalize">Normalize reset</h3> <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p> <h3 id="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 %} <div class="container"> ... @@ -616,7 +622,7 @@ base_url: "../" <p>For quoting blocks of content from another source within your document.</p> <h3>Default blockquote</h3> - <p>Wrap <code><blockquote></code> around any <abbr title="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 <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p> <div class="bs-example"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -629,7 +635,7 @@ base_url: "../" {% endhighlight %} <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> <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. <pre><p>Sample text here...</p></pre> {% 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> @@ -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> <div class="bs-callout bs-callout-danger"> <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 class="bs-example"> <table class="table table-striped"> @@ -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> <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> <div class="bs-callout bs-callout-danger"> <h4>Type declaration required</h4> <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. <div class="bs-callout bs-callout-danger"> <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> <form class="bs-example form-inline"> @@ -1778,6 +1784,11 @@ For example, <code><section></code> should be wrapped as inline. <img src="..." class="img-thumbnail"> {% endhighlight %} + <div class="bs-callout bs-callout-warning"> + <h4>Responsive images</h4> + <p>Looking for how to make images more responsive? <a href="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p> + </div> + </div> @@ -1963,7 +1974,7 @@ For example, <code><section></code> should be wrapped as inline. </li> <li> <span class="visible-lg">Large</span> - <span class="hidden-lg">✔ Hidden on desktop</span> + <span class="hidden-lg">✔ Hidden on large</span> </li> </ul> |