mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
rename classes from .bs-docs and .bs to .bd
This commit is contained in:
Mark Otto
@@ -7,7 +7,7 @@ Provide contextual feedback messages for typical user actions with the handful o
|
||||
|
||||
Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>No default class</h4>
|
||||
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@ Build on any alert by adding an optional `.alert-dismissible` and [close button]
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Ensure proper behavior across all devices</h4>
|
||||
<p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ title: Button dropdown
|
||||
|
||||
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@ Use any button to trigger a dropdown menu by placing it within a `.btn-group` an
|
||||
|
||||
Turn a button into a dropdown toggle with some basic markup changes.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -97,7 +97,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
|
||||
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
@@ -199,7 +199,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
||||
|
||||
Button dropdowns work with buttons of all sizes.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
@@ -280,7 +280,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
|
||||
Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
|
||||
@@ -5,12 +5,12 @@ title: Button group
|
||||
|
||||
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Tooltips & 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>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
||||
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||
@@ -55,7 +55,7 @@ Combine sets of button groups into button toolbars for more complex components.
|
||||
|
||||
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
@@ -113,7 +113,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
||||
|
||||
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
|
||||
@@ -36,12 +36,12 @@ A slideshow component for cycling through elements—images or slides of text—
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
|
||||
<div class="bd-callout bd-callout-warning" id="callout-carousel-transitions">
|
||||
<h4>Transition animations not supported in Internet Explorer 9</h4>
|
||||
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
|
||||
<div class="bd-callout bd-callout-warning" id="callout-carousel-active">
|
||||
<h4>Initial active element required</h4>
|
||||
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
|
||||
</div>
|
||||
@@ -50,7 +50,7 @@ A slideshow component for cycling through elements—images or slides of text—
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
||||
@@ -101,7 +101,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Accessibility issue</h4>
|
||||
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ title: Collapse
|
||||
|
||||
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
@@ -87,7 +87,7 @@ Extend the default collapse behavior to create an accordion with the panel compo
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Make expand/collapse controls accessible</h4>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
|
||||
<p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
|
||||
@@ -31,7 +31,7 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
|
||||
|
||||
Custom checkboxes can also utilize the `:indeterminate` pseudo class.
|
||||
|
||||
<div class="bs-example bs-example-indeterminate">
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="c-indicator"></span>
|
||||
|
||||
@@ -32,7 +32,7 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
|
||||
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>May require additional positioning</h4>
|
||||
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
|
||||
</div>
|
||||
@@ -146,7 +146,7 @@ Call the dropdowns via JavaScript:
|
||||
$('.dropdown-toggle').dropdown()
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4><code>data-toggle="dropdown"</code> still required</h4>
|
||||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
|
||||
</div>
|
||||
|
||||
@@ -16,11 +16,11 @@ Convey meaning through color with a handful of emphasis utility classes. These m
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
@@ -37,12 +37,12 @@ Similar to the contextual text color classes, easily set the background of an el
|
||||
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
|
||||
</div>
|
||||
|
||||
+18
-18
@@ -13,15 +13,15 @@ $('#myModal').on('shown.bs.modal', function () {
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
|
||||
<div class="bd-callout bd-callout-warning" id="callout-stacked-modals">
|
||||
<h4>Overlapping modals not supported</h4>
|
||||
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
|
||||
<div class="bd-callout bd-callout-warning" id="callout-modal-markup-placement">
|
||||
<h4>Modal markup placement</h4>
|
||||
<p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Mobile device caveats</h4>
|
||||
<p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@ $('#myModal').on('shown.bs.modal', function () {
|
||||
|
||||
A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
|
||||
<div class="bs-example bs-example-modal">
|
||||
<div class="bd-example bd-example-modal">
|
||||
<div class="modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
@@ -123,7 +123,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div>
|
||||
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
<div class="bd-example" style="padding-bottom: 24px;">
|
||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
@@ -158,13 +158,13 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Make modals accessible</h4>
|
||||
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
|
||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Embedding YouTube videos</h4>
|
||||
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
|
||||
</div>
|
||||
@@ -173,16 +173,16 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
|
||||
|
||||
<div class="bs-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Large modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
...
|
||||
@@ -191,9 +191,9 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
...
|
||||
@@ -202,7 +202,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
@@ -220,7 +220,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
@@ -295,7 +295,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bs-example bs-example-padded-bottom">
|
||||
<div class="bd-example bd-example-padded-bottom">
|
||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
@@ -307,7 +307,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
||||
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
+13
-13
@@ -7,11 +7,11 @@ Add small overlays of content, like those on the iPad, to any element for housin
|
||||
|
||||
Popovers whose both title and content are zero-length are never displayed.
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<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>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
||||
@@ -21,19 +21,19 @@ $(function () {
|
||||
})
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<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>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Don't try to show popovers on hidden elements</h4>
|
||||
<p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Popovers on disabled elements require wrapper elements</h4>
|
||||
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Multiple-line links</h4>
|
||||
<p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@ $(function () {
|
||||
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bs-example bs-example-popover">
|
||||
<div class="bd-example bd-example-popover">
|
||||
<div class="popover popover-top">
|
||||
<div class="popover-arrow"></div>
|
||||
<h3 class="popover-title">Popover top</h3>
|
||||
@@ -82,13 +82,13 @@ Four options are available: top, right, bottom, and left aligned.
|
||||
### Live demo
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
{% endexample %}
|
||||
|
||||
#### Four directions
|
||||
|
||||
<div class="bs-example popover-demo">
|
||||
<div class="bs-example-popovers">
|
||||
<div class="bd-example popover-demo">
|
||||
<div class="bd-example-popovers">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
@@ -127,13 +127,13 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
|
||||
Use the `focus` trigger to dismiss popovers on the next click that the user makes.
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Specific markup required for dismiss-on-next-click</h4>
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight js %}
|
||||
@@ -258,7 +258,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Data attributes for individual popovers</h4>
|
||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
</div>
|
||||
|
||||
@@ -56,9 +56,9 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres
|
||||
|
||||
**Animated progress bars do not work in IE9 and Opera 12** as they don't support CSS3 animations.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
||||
<button type="button" class="btn btn-secondary bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Toggle animation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -7,11 +7,11 @@ title: Srollspy
|
||||
|
||||
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="bd-example">
|
||||
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bd-example-js-navbar-scrollspy">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@@ -19,7 +19,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project Name</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
|
||||
<div class="collapse navbar-collapse bd-example-js-navbar-scrollspy">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#fat">@fat</a></li>
|
||||
<li><a href="#mdo">@mdo</a></li>
|
||||
@@ -93,12 +93,12 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip
|
||||
$('body').scrollspy({ target: '#navbar-example' })
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4>Resolvable ID targets required</h4>
|
||||
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Non-<code>:visible</code> target elements ignored</h4>
|
||||
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
</div>
|
||||
|
||||
+10
-10
@@ -11,7 +11,7 @@ Tooltips with zero-length titles are never displayed.
|
||||
|
||||
Hover over the links below to see tooltips:
|
||||
|
||||
<div class="bs-example tooltip-demo">
|
||||
<div class="bd-example tooltip-demo">
|
||||
<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
@@ -20,7 +20,7 @@ Hover over the links below to see tooltips:
|
||||
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bs-example bs-example-tooltip">
|
||||
<div class="bd-example bd-example-tooltip">
|
||||
<div class="tooltip left" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
@@ -51,8 +51,8 @@ Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
Hover over the buttons below to see their tooltips.
|
||||
|
||||
<div class="bs-example tooltip-demo">
|
||||
<div class="bs-example-tooltips">
|
||||
<div class="bd-example tooltip-demo">
|
||||
<div class="bd-example-tooltips">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
@@ -75,7 +75,7 @@ Hover over the buttons below to see their tooltips.
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<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>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
||||
@@ -85,15 +85,15 @@ $(function () {
|
||||
})
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<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>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Don't try to show tooltips on hidden elements</h4>
|
||||
<p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Tooltips on disabled elements require wrapper elements</h4>
|
||||
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
|
||||
</div>
|
||||
@@ -112,7 +112,7 @@ $('#example').tooltip(options)
|
||||
|
||||
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4>Multiple-line links</h4>
|
||||
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||
</div>
|
||||
@@ -228,7 +228,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4>Data attributes for individual tooltips</h4>
|
||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user