0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

Merge pull request #12231 from twbs/callouts

callout severity tweaks
This commit is contained in:
Mark Otto 2014-01-14 21:46:46 -08:00
commit 96031c101d
3 changed files with 8 additions and 8 deletions

View File

@ -185,7 +185,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
</div> </div>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p> <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-warning">
<h4>Tooltips &amp; popovers in button groups require special setting</h4> <h4>Tooltips &amp; popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div> </div>
@ -755,11 +755,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p> <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div> </div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-warning">
<h4>Tooltips &amp; popovers in input groups require special setting</h4> <h4>Tooltips &amp; popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div> </div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-warning">
<h4>Don't mix with other components</h4> <h4>Don't mix with other components</h4>
<p>Do not mix form group or grid column classes directly with input groups.</p> <p>Do not mix form group or grid column classes directly with input groups.</p>
</div> </div>
@ -1432,7 +1432,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p> <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div> </div>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4> <h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div> </div>

View File

@ -1588,7 +1588,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Requires custom widths</h4> <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> <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> </div>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4> <h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div> </div>
@ -2369,7 +2369,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<img src="..." alt="..." class="img-thumbnail"> <img src="..." alt="..." class="img-thumbnail">
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-info">
<h4>Responsive images</h4> <h4>Responsive images</h4>
<p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p> <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div> </div>

View File

@ -925,7 +925,7 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<h4>Opt-in functionality</h4> <h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
</div> </div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-warning">
<h4>Tooltips in button groups and input groups require special setting</h4> <h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p> <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div> </div>
@ -1110,7 +1110,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h4>Opt-in functionality</h4> <h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
</div> </div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-warning">
<h4>Popovers in button groups and input groups require special setting</h4> <h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p> <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div> </div>