diff options
Diffstat (limited to 'docs/4.0/components')
| -rw-r--r-- | docs/4.0/components/alerts.md | 5 | ||||
| -rw-r--r-- | docs/4.0/components/badge.md | 31 | ||||
| -rw-r--r-- | docs/4.0/components/breadcrumb.md | 46 | ||||
| -rw-r--r-- | docs/4.0/components/button-group.md | 5 | ||||
| -rw-r--r-- | docs/4.0/components/card.md | 8 | ||||
| -rw-r--r-- | docs/4.0/components/carousel.md | 2 | ||||
| -rw-r--r-- | docs/4.0/components/collapse.md | 8 | ||||
| -rw-r--r-- | docs/4.0/components/dropdowns.md | 71 | ||||
| -rw-r--r-- | docs/4.0/components/forms.md | 42 | ||||
| -rw-r--r-- | docs/4.0/components/input-group.md | 4 | ||||
| -rw-r--r-- | docs/4.0/components/list-group.md | 10 | ||||
| -rw-r--r-- | docs/4.0/components/modal.md | 15 | ||||
| -rw-r--r-- | docs/4.0/components/navbar.md | 26 | ||||
| -rw-r--r-- | docs/4.0/components/navs.md | 170 | ||||
| -rw-r--r-- | docs/4.0/components/popovers.md | 11 | ||||
| -rw-r--r-- | docs/4.0/components/progress.md | 10 | ||||
| -rw-r--r-- | docs/4.0/components/scrollspy.md | 5 | ||||
| -rw-r--r-- | docs/4.0/components/tooltips.md | 5 |
18 files changed, 235 insertions, 239 deletions
diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index ed63da952..b8bb0c216 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -8,7 +8,7 @@ toc: true ## Examples -Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). +Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). {% example html %} {% for color in site.data.theme-colors %} @@ -50,6 +50,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. +- If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this. - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes. @@ -58,10 +59,10 @@ You can see this in action with a live demo: {% example html %} <div class="alert alert-warning alert-dismissible fade show" role="alert"> + <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> - <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> {% endexample %} diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md index 4e80828a4..c42d948d6 100644 --- a/docs/4.0/components/badge.md +++ b/docs/4.0/components/badge.md @@ -30,33 +30,22 @@ Badges scale to match the size of the immediate parent element by using relative Badges can be used as part of links or buttons to provide a counter. -<div class="bd-example"> -<button class="btn"> - Notifications <span class="badge badge-secondary">4</span> -</button> -</div> - -{% highlight html %} -<button class="btn"> - Notifications <span class="badge badge-secondary">4</span> +{% example html %} +<button type="button" class="btn btn-primary"> + Notifications <span class="badge badge-light">4</span> </button> -{% endhighlight %} +{% endexample %} -Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link or button. Unless the context is clear (as with the "Notifications" example, where it is arguably understandable that the "4" gives a count of the number of notifications), consider including additional context – for instance using a visually hidden piece of additional text. +Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. -<div class="bd-example"> -<button class="btn"> - Profile <span class="badge badge-secondary">9</span> - <span class="sr-only">unread messages</span> -</button> -</div> +Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. -{% highlight html %} -<button class="btn"> - Profile <span class="badge badge-secondary">9</span> +{% example html %} +<button type="button" class="btn btn-primary"> + Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button> -{% endhighlight %} +{% endexample %} ## Contextual variations diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md index eb286d847..09ad73127 100644 --- a/docs/4.0/components/breadcrumb.md +++ b/docs/4.0/components/breadcrumb.md @@ -5,30 +5,36 @@ description: Indicate the current page's location within a navigational hierarch group: components --- +## Overview + Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). {% example html %} -<ol class="breadcrumb"> - <li class="breadcrumb-item active">Home</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item active">Library</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item"><a href="#">Library</a></li> - <li class="breadcrumb-item active">Data</li> -</ol> -{% endexample %} -Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup. +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item active" aria-current="page">Home</li> + </ol> +</nav> -{% example html %} -<nav class="breadcrumb"> - <a class="breadcrumb-item" href="#">Home</a> - <a class="breadcrumb-item" href="#">Library</a> - <a class="breadcrumb-item" href="#">Data</a> - <span class="breadcrumb-item active">Bootstrap</span> +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active" aria-current="page">Library</li> + </ol> +</nav> + +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item"><a href="#">Library</a></li> + <li class="breadcrumb-item active" aria-current="page">Data</li> + </ol> </nav> {% endexample %} + +## Accessibility + +Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page. + +For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md index e702bb76e..8fea3de90 100644 --- a/docs/4.0/components/button-group.md +++ b/docs/4.0/components/button-group.md @@ -25,6 +25,7 @@ In order for assistive technologies (such as screen readers) to convey that a se 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 role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. {% endcallout %} + ## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. @@ -195,7 +196,3 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli ... </div> {% endhighlight %} - -## Tooltips and popovers - -Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index d0d633d05..9db9bc3c9 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -33,14 +33,14 @@ Below is an example of a basic card with mixed content and a fixed width. Cards Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported. -### Blocks +### Body The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card. {% example html %} <div class="card"> <div class="card-body"> - This is some text within a card block. + This is some text within a card body. </div> </div> {% endexample %} @@ -560,7 +560,7 @@ Just like with card groups, card footers in decks will automatically line up. ### Card columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. +Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. **Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet. @@ -591,7 +591,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> - <div class="card bg-primary p-3 text-center"> + <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer"> diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 29802f466..4919e1ac2 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -14,6 +14,8 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. +Lastly, if you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). + ## Example Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index c77d436fb..536cc177f 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc {% example html %} <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button> + <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> @@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tbody> <tr> <td>parent</td> - <td>selector</td> + <td>selector | jQuery object | DOM element </td> <td>false</td> - <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td> + <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td> </tr> <tr> <td>toggle</td> @@ -216,7 +216,7 @@ $('#myCollapsible').collapse({ #### `.collapse('toggle')` -Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). +Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). #### `.collapse('show')` diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 9170b7162..d38b410c7 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -10,7 +10,9 @@ toc: true Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/) -Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before Bootstrap's JavaScript. +Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. + +If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). ## Accessibility @@ -314,7 +316,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> </div> <div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button class="btn btn-secondary btn-lg" type="button"> Large button </button> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> @@ -335,7 +337,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> </div> <div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button class="btn btn-secondary btn-sm" type="button"> Small button </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> @@ -430,7 +432,7 @@ Historically dropdown menu contents *had* to be links, but that's no longer the 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. {% callout info %} -**Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment. +**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). {% endcallout %} {% example html %} @@ -472,6 +474,55 @@ Separate groups of related menu items with a divider. </div> {% endexample %} +## Menu forms + +Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require. + +{% example html %} +<div class="dropdown-menu"> + <form class="px-4 py-3"> + <div class="form-group"> + <label for="exampleDropdownFormEmail1">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormPassword1">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">New around here? Sign up</a> + <a class="dropdown-item" href="#">Forgot password?</a> +</div> +{% endexample %} + +{% example html %} +<form class="dropdown-menu p-4"> + <div class="form-group"> + <label for="exampleDropdownFormEmail2">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormPassword2">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> +</form> +{% endexample %} + ## Disabled menu items Add `.disabled` to items in the dropdown to **style them as disabled**. @@ -523,7 +574,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-placement=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. <table class="table table-bordered table-striped table-responsive"> <thead> @@ -536,16 +587,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </thead> <tbody> <tr> - <td>placement</td> - <td>string</td> - <td>'bottom'</td> - <td> - <p>How to position the popover - top | bottom.</p> - </td> - </tr> - <tr> <td>offset</td> - <td>number | string</td> + <td>number | string | function</td> <td>0</td> <td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td> </tr> diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6abe03e58..ed4d95b70 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -238,17 +238,17 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl ### Without labels -Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). +Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). {% example html %} <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </label> </div> <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </label> </div> {% endexample %} @@ -337,7 +337,10 @@ More complex layouts can also be created with the grid system. </div> <div class="form-group col-md-4"> <label for="inputState" class="col-form-label">State</label> - <select id="inputState" class="form-control">Choose</select> + <select id="inputState" class="form-control"> + <option selected>Choose...</option> + <option>...</option> + </select> </div> <div class="form-group col-md-2"> <label for="inputZip" class="col-form-label">Zip</label> @@ -645,9 +648,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi <option>Disabled select</option> </select> </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> @@ -658,7 +661,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi {% callout warning %} #### Caveat with anchors -By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. +By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. {% endcallout %} {% callout danger %} @@ -669,7 +672,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an ## Validation -Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. +Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. {% callout warning %} We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers. @@ -684,7 +687,7 @@ Here's how form validation works with Bootstrap: - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. -- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. +- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. - You may provide custom validity messages with `setCustomValidity` in JavaScript. With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. @@ -736,18 +739,19 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { - "use strict"; - window.addEventListener("load", function() { - var form = document.getElementById("needs-validation"); - form.addEventListener("submit", function(event) { - if (form.checkValidity() == false) { + 'use strict'; + + window.addEventListener('load', function() { + var form = document.getElementById('needs-validation'); + form.addEventListener('submit', function(event) { + if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } - form.classList.add("was-validated"); + form.classList.add('was-validated'); }, false); }, false); -}()); +})(); </script> {% endexample %} @@ -1004,8 +1008,8 @@ Here's how it works: - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser. - We hide the default file `<input>` via `opacity`. -- We use `:after` to generate a custom background and directive (*Choose file...*). -- We use `:before` to generate and position the *Browse* button. +- We use `::after` to generate a custom background and directive (*Choose file...*). +- We use `::before` to generate and position the *Browse* button. - We declare a `height` on the `<input>` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index c13157db2..231adc906 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -50,7 +50,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon1"> </div> <br> -<div class="input-group"> +<div class="input-group input-group-sm"> <span class="input-group-addon" id="sizing-addon2">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2"> </div> @@ -132,7 +132,7 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen </div> <br> <div class="row"> - <div class="col-lg-offset-3 col-lg-6"> + <div class="col-lg-6 offset-lg-3"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Hate it</button> diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md index 4fea041f7..1a2796588 100644 --- a/docs/4.0/components/list-group.md +++ b/docs/4.0/components/list-group.md @@ -56,7 +56,7 @@ Be sure to **not use the standard `.btn` classes here**. {% example html %} <div class="list-group"> - <a href="#" class="list-group-item active"> + <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> @@ -115,15 +115,15 @@ Add badges to any list group item to show unread counts, activity, and more with <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio - <span class="badge badge-default badge-pill">14</span> + <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in - <span class="badge badge-default badge-pill">2</span> + <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus - <span class="badge badge-default badge-pill">1</span> + <span class="badge badge-primary badge-pill">1</span> </li> </ul> {% endexample %} @@ -244,7 +244,7 @@ You can activate a list group navigation without writing any JavaScript by simpl Enable tabbable list item via JavaScript (each list item needs to be activated individually): {% highlight js %} -$('#myList a').click(function (e) { +$('#myList a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index 587a2b632..491bd3fb8 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -15,19 +15,16 @@ Before getting started with Bootstrap's modal component, be sure to read the fol - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. - Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details. -- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript. - -Keep reading for demos and usage guidelines. - - - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: {% highlight js %} $('#myModal').on('shown.bs.modal', function () { - $('#myInput').focus() + $('#myInput').trigger('focus') }) {% endhighlight %} +Keep reading for demos and usage guidelines. + ## Examples ### Modal components @@ -35,7 +32,7 @@ $('#myModal').on('shown.bs.modal', function () { Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. <div class="bd-example bd-example-modal"> - <div class="modal"> + <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -57,7 +54,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee </div> {% highlight html %} -<div class="modal"> +<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -425,7 +422,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a {% highlight html %} <!-- Large modal --> -<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-lg">Large modal</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index d3d005e52..f303aa2bc 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -51,7 +51,7 @@ Here's an example of all the sub-components included in a responsive light-theme </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -70,7 +70,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as <!-- As a heading --> <nav class="navbar navbar-light bg-light"> - <span class="h1" class="navbar-brand mb-0">Navbar</span> + <span class="navbar-brand mb-0 h1">Navbar</span> </nav> {% endexample %} @@ -165,7 +165,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> @@ -186,7 +186,7 @@ Place various form controls and components within a navbar with `.form-inline`. {% example html %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -198,7 +198,7 @@ Align the contents of your inline forms with utilities as needed. <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -322,8 +322,8 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> @@ -350,7 +350,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -395,7 +395,7 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).** +Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).** {% example html %} <nav class="navbar navbar-light bg-light"> @@ -452,7 +452,7 @@ With no `.navbar-brand` shown in lowest breakpoint: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -481,7 +481,7 @@ With a brand name shown on the left and toggler on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -510,7 +510,7 @@ With a toggler on the left and brand name on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index 845024c3d..b34f79c2f 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -297,24 +297,22 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. +If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). + Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). +Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies. + <div class="bd-example bd-example-tabs"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -324,38 +322,28 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> - <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab"> + <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> - <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab"> - <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> - </div> </div> </div> {% highlight html %} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> - <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div> - <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div> + <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div> {% endhighlight %} @@ -363,17 +351,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as <div class="bd-example bd-example-tabs"> <nav class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a> - <div class="dropdown"> - <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> - </div> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> @@ -382,34 +362,22 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p> </div> - <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab"> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p> </div> - <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab"> - <p>Proident incididunt esse qui ea nisi ullamco aliquip nostrud velit sint duis. Aute culpa aute cillum sit consectetur mollit minim non reprehenderit tempor. Occaecat amet consectetur aute esse ad ullamco ad commodo mollit reprehenderit esse in consequat. Mollit minim do consectetur pariatur irure non id ea dolore occaecat adipisicing consectetur est aute magna non.</p> - </div> </div> </div> {% highlight html %} <nav class="nav nav-tabs" id="myTab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a> - <div class="dropdown"> - <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">@fat</a> - <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">@mdo</a> - </div> - </div> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> - <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">...</div> - <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">...</div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> {% endhighlight %} @@ -418,17 +386,13 @@ The tabs plugin also works with pills. <div class="bd-example bd-example-tabs"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a> - <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -438,36 +402,28 @@ The tabs plugin also works with pills. <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p> </div> - <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab"> + <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p> </div> - <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab"> - <p>Tempor anim aliquip qui nisi sit minim ex in cupidatat ipsum adipisicing. Ad non magna anim id ullamco do dolor sit adipisicing nulla exercitation. Qui Lorem eiusmod sint in laboris pariatur est adipisicing non sunt occaecat in mollit culpa sit. Aliquip id duis do do quis mollit ut duis. Non dolor reprehenderit do esse nostrud deserunt non eiusmod minim anim sit voluptate ipsum. Nulla elit aliqua do sunt labore velit anim nisi dolor nostrud consectetur fugiat ex qui velit ex tempor. Do cillum qui anim aliquip id cillum duis ex laboris tempor incididunt sint dolor ullamco tempor. Fugiat laboris enim anim veniam aliquip cillum irure.</p> - </div> </div> </div> {% highlight html %} <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a> - <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> - <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">...</div> - <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">...</div> + <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div> {% endhighlight %} @@ -476,11 +432,11 @@ And with vertical pills. <div class="bd-example bd-example-tabs"> <div class="row"> <div class="col-3"> - <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a> + <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> + <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <div class="col-9"> @@ -503,11 +459,11 @@ And with vertical pills. </div> {% highlight html %} -<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a> +<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> + <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> @@ -525,25 +481,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> + <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> + <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel">...</div> - <div class="tab-pane" id="profile" role="tabpanel">...</div> - <div class="tab-pane" id="messages" role="tabpanel">...</div> - <div class="tab-pane" id="settings" role="tabpanel">...</div> + <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> {% endhighlight %} @@ -552,7 +508,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp Enable tabbable tabs via JavaScript (each tab needs to be activated individually): {% highlight js %} -$('#myTab a').click(function (e) { +$('#myTab a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) @@ -573,10 +529,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a {% highlight html %} <div class="tab-content"> - <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> - <div class="tab-pane fade" id="profile" role="tabpanel">...</div> - <div class="tab-pane fade" id="messages" role="tabpanel">...</div> - <div class="tab-pane fade" id="settings" role="tabpanel">...</div> + <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> {% endhighlight %} @@ -592,24 +548,24 @@ Activates a tab element and content container. Tab should have either a `data-ta {% highlight html %} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> + <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> + <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel">...</div> - <div class="tab-pane" id="profile" role="tabpanel">...</div> - <div class="tab-pane" id="messages" role="tabpanel">...</div> - <div class="tab-pane" id="settings" role="tabpanel">...</div> + <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> <script> diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md index e26c4a902..b8356b0d2 100644 --- a/docs/4.0/components/popovers.md +++ b/docs/4.0/components/popovers.md @@ -11,8 +11,9 @@ toc: true Things to know when using the popover plugin: -- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for popovers to work! +- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work! - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency. +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -150,7 +151,6 @@ $('.popover-dismiss').popover({ {% endhighlight %} - ## Usage Enable popovers via JavaScript: @@ -179,7 +179,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>container</td> - <td>string | false</td> + <td>string | element | false</td> <td>false</td> <td> <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> @@ -221,7 +221,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>selector</td> - <td>string</td> + <td>string | false</td> <td>false</td> <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> </tr> @@ -305,7 +305,6 @@ Toggles an element's popover. **Returns to the caller before the popover has act Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. - {% highlight js %}$('#element').popover('dispose'){% endhighlight %} #### `.popover('enable')` @@ -360,7 +359,7 @@ Updates the position of an element's popover. </tr> <tr> <td>inserted.bs.popover</td> - <td>This event is fired after the <code>show.bs.popover</code> event when the tooltip template has been added to the DOM.</td> + <td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td> </tr> </tbody> </table> diff --git a/docs/4.0/components/progress.md b/docs/4.0/components/progress.md index 4cbc333aa..07217d939 100644 --- a/docs/4.0/components/progress.md +++ b/docs/4.0/components/progress.md @@ -55,14 +55,14 @@ Add labels to your progress bars by placing text within the `.progress-bar`. ## Height -We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. +We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. {% example html %} -<div class="progress"> - <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +<div class="progress" style="height: 1px;"> + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> -<div class="progress"> - <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +<div class="progress" style="height: 20px;"> + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> {% endexample %} diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md index 9e09fd761..b7f9e994f 100644 --- a/docs/4.0/components/scrollspy.md +++ b/docs/4.0/components/scrollspy.md @@ -10,6 +10,7 @@ toc: true Scrollspy has a few requirements to function properly: +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/). - Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`. - When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied. @@ -315,13 +316,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tbody> <tr> <td>activate.bs.scrollspy</td> - <td>This event fires whenever a new item becomes activated by the scrollspy.</td> + <td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td> </tr> </tbody> </table> {% highlight js %} -$('#myScrollspy').on('activate.bs.scrollspy', function () { +$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // do something… }) {% endhighlight %} diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md index 36fd3908f..d3598048d 100644 --- a/docs/4.0/components/tooltips.md +++ b/docs/4.0/components/tooltips.md @@ -10,7 +10,8 @@ toc: true Things to know when using the tooltip plugin: -- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for tooltips to work! +- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work! +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips with zero-length titles are never displayed. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -200,7 +201,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>selector</td> - <td>string</td> + <td>string | false</td> <td>false</td> <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> </tr> |