diff options
Diffstat (limited to 'docs/css.html')
| -rw-r--r-- | docs/css.html | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/docs/css.html b/docs/css.html index 1d8cee56d..658f2ea9a 100644 --- a/docs/css.html +++ b/docs/css.html @@ -245,7 +245,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." </div> {% endhighlight %} - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Need more examples?</h4> <p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p> <p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p> @@ -506,7 +506,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." <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> + <div class="bs-callout bs-callout-info"> + <h4>Alternate elements</h4> + <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> + </div> <h3>Alignment classes</h3> <p>Easily realign text to components with text alignment classes.</p> @@ -774,10 +777,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." </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. - </p> + <div class="bs-callout bs-callout-info"> + <h4>Auto-truncating</h4> + <p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p> + </div> </div> @@ -864,7 +867,7 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="tables-striped">Striped</h3> <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p> - <div class="bs-callout"> + <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> </div> @@ -1164,7 +1167,7 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-inline">Inline form</h3> <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p> - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Requires custom widths</h4> <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> </div> @@ -1246,7 +1249,7 @@ For example, <code><section></code> should be wrapped as inline. <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> - <div class="bs-callout"> + <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> </div> @@ -1385,7 +1388,7 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-invalid-inputs">Invalid inputs</h3> <p>Style inputs via default browser functionality. 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> - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p> </div> @@ -1409,12 +1412,12 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once.</p> - <div class="bs-callout"> + <div class="bs-callout bs-callout-warning"> <h4>Link functionality of <code><a></code> not impacted</h4> <p>This class will only change the appearance of <code><a class="btn btn-default"></code> buttons, not their functionality. Use custom JavaScript to disable links here.</p> </div> - <div class="bs-callout"> + <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> </div> @@ -1511,7 +1514,7 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-input-groups">Input groups</h3> <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p> - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p> </div> @@ -1894,7 +1897,7 @@ For example, <code><section></code> should be wrapped as inline. <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button> {% endhighlight %} - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> <p>If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p> </div> @@ -1912,7 +1915,7 @@ For example, <code><section></code> should be wrapped as inline. <p> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. </p> - <div class="bs-callout"> + <div class="bs-callout bs-callout-warning"> <h4>Link functionality not impacted</h4> <p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p> </div> @@ -1933,7 +1936,7 @@ For example, <code><section></code> should be wrapped as inline. <input class="btn btn-default" type="submit" value="Submit"> {% endhighlight %} - <div class="bs-callout"> + <div class="bs-callout bs-callout-warning"> <h4>Cross-browser rendering</h4> <p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p> </div> @@ -1950,7 +1953,7 @@ For example, <code><section></code> should be wrapped as inline. </div> <p>Add classes to an <code><img></code> element to easily style images in any project.</p> - <div class="bs-callout"> + <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p> </div> |