mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-21 13:24:08 +03:00
Merge branch '3.0.0-docs-calloutfam' of https://github.com/juthilo/bootstrap-wip into juthilo-3.0.0-docs-calloutfam
Conflicts: docs/components.html docs/css.html docs/customize.html
This commit is contained in:
Mark Otto
+19
-16
@@ -259,7 +259,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 separate 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>
|
||||
@@ -520,7 +520,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>
|
||||
@@ -788,10 +791,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>
|
||||
|
||||
|
||||
@@ -878,7 +881,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>
|
||||
@@ -1172,7 +1175,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>
|
||||
@@ -1254,7 +1257,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>
|
||||
@@ -1402,12 +1405,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>
|
||||
@@ -1504,7 +1507,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 an <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>
|
||||
@@ -1891,7 +1894,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>
|
||||
@@ -1909,7 +1912,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>
|
||||
@@ -1930,7 +1933,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>
|
||||
@@ -1947,7 +1950,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>
|
||||
|
||||
Reference in New Issue
Block a user