diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 4 | ||||
| -rw-r--r-- | docs/components/carousel.md | 138 | ||||
| -rw-r--r-- | docs/components/collapse.md | 110 | ||||
| -rw-r--r-- | docs/components/dropdowns.md | 60 | ||||
| -rw-r--r-- | docs/components/modal.md | 128 | ||||
| -rw-r--r-- | docs/components/navbar.md | 67 | ||||
| -rw-r--r-- | docs/components/popovers.md | 266 | ||||
| -rw-r--r-- | docs/components/progress.md | 136 | ||||
| -rw-r--r-- | docs/components/scrollspy.md | 69 | ||||
| -rw-r--r-- | docs/components/tooltips.md | 254 |
10 files changed, 641 insertions, 591 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 4e8c11026..f84383847 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -208,7 +208,7 @@ Using the grid, wrap cards in columns and rows as needed. ### Using utilities -Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height) to quickly set a card's width. +Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing/) to quickly set a card's width. {% example html %} <div class="card w-75"> @@ -565,7 +565,7 @@ When using card groups with footers, their content will automatically line up. ### Card decks -Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`. +Need a set of equal width and height cards that aren't attached to one another? Use card decks. {% example html %} <div class="card-deck"> diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 8dd819fba..ea22f3ef9 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -104,12 +104,6 @@ You can also add the indicators to the carousel, alongside the controls, too. {% endexample %} {% callout warning %} -#### Transition animations not supported in Internet Explorer 9 - -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. -{% endcallout %} - -{% callout warning %} #### Initial active element required The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. @@ -149,12 +143,12 @@ Add captions to your slides easily with the `.carousel-caption` element within a </div> </div> </div> - <a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev"> - <span class="icon-prev" aria-hidden="true"></span> + <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next"> - <span class="icon-next" aria-hidden="true"></span> + <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> @@ -190,50 +184,48 @@ $('.carousel').carousel() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>interval</td> - <td>number</td> - <td>5000</td> - <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> - </tr> - <tr> - <td>keyboard</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should react to keyboard events.</td> - </tr> - <tr> - <td>pause</td> - <td>string | null</td> - <td>"hover"</td> - <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td> - </tr> - <tr> - <td>ride</td> - <td>string</td> - <td>false</td> - <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> - </tr> - <tr> - <td>wrap</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should cycle continuously or have hard stops.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>interval</td> + <td>number</td> + <td>5000</td> + <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> + </tr> + <tr> + <td>keyboard</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should react to keyboard events.</td> + </tr> + <tr> + <td>pause</td> + <td>string | null</td> + <td>"hover"</td> + <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td> + </tr> + <tr> + <td>ride</td> + <td>string</td> + <td>false</td> + <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> + </tr> + <tr> + <td>wrap</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should cycle continuously or have hard stops.</td> + </tr> + </tbody> +</table> ### Methods @@ -276,26 +268,24 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>slide.bs.carousel</td> - <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> - </tr> - <tr> - <td>slid.bs.carousel</td> - <td>This event is fired when the carousel has completed its slide transition.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>slide.bs.carousel</td> + <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> + </tr> + <tr> + <td>slid.bs.carousel</td> + <td>This event is fired when the carousel has completed its slide transition.</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCarousel').on('slide.bs.carousel', function () { diff --git a/docs/components/collapse.md b/docs/components/collapse.md index e3172fa75..f48efd9cc 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -92,7 +92,7 @@ Extend the default collapse behavior to create an accordion. ## Accessibility -Be sure to add `aria-expanded` 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 `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed. +Be sure to add `aria-expanded` 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 `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed. Additionally, if your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` 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. @@ -124,32 +124,30 @@ $('.collapse').collapse() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>parent</td> - <td>selector</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>panel</code> class)</td> - </tr> - <tr> - <td>toggle</td> - <td>boolean</td> - <td>true</td> - <td>Toggles the collapsible element on invocation</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>parent</td> + <td>selector</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>panel</code> class)</td> + </tr> + <tr> + <td>toggle</td> + <td>boolean</td> + <td>true</td> + <td>Toggles the collapsible element on invocation</td> + </tr> + </tbody> +</table> ### Methods @@ -179,36 +177,34 @@ Hides a collapsible element. Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.collapse</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.collapse</td> - <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.collapse</td> - <td> - This event is fired immediately when the <code>hide</code> method has been called. - </td> - </tr> - <tr> - <td>hidden.bs.collapse</td> - <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.collapse</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.collapse</td> + <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.collapse</td> + <td> + This event is fired immediately when the <code>hide</code> method has been called. + </td> + </tr> + <tr> + <td>hidden.bs.collapse</td> + <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCollapsible').on('hidden.bs.collapse', function () { diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index d26de6eef..3c68f9453 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `. Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements: {% example html %} -<div class="dropdown show"> +<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> @@ -252,7 +252,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <a class="dropdown-item" href="#">Separated link</a> </div> </div><!-- /btn-group --> - <div class="btn-group"> + <div class="btn-group ml-2"> <button type="button" class="btn btn-lg btn-secondary">Large split 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"> <span class="sr-only">Toggle Dropdown</span> @@ -279,7 +279,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <a class="dropdown-item" href="#">Separated link</a> </div> </div><!-- /btn-group --> - <div class="btn-group"> + <div class="btn-group ml-2"> <button type="button" class="btn btn-sm btn-secondary">Small split 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"> <span class="sr-only">Toggle Dropdown</span> @@ -344,34 +344,32 @@ Button dropdowns work with buttons of all sizes, including default and split dro Trigger dropdown menus above elements by adding `.dropup` to the parent element. <div class="bd-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropup - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <div class="btn-group dropup"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dropup + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> + </div> - <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary"> - Split dropup - </button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <span class="sr-only">Toggle Dropdown</span> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Separated link</a> - </div> + <div class="btn-group dropup"> + <button type="button" class="btn btn-secondary"> + Split dropup + </button> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <span class="sr-only">Toggle Dropdown</span> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> @@ -407,7 +405,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s. {% example html %} -<div class="dropdown show"> +<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> @@ -510,7 +508,7 @@ $('.dropdown-toggle').dropdown() {% endhighlight %} {% callout info %} -#### `data-toggle="dropdown"` still required +##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. {% endcallout %} diff --git a/docs/components/modal.md b/docs/components/modal.md index b311ebf35..5ace1ac58 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -508,44 +508,42 @@ Call a modal with id `myModal` with a single line of JavaScript: Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>backdrop</td> - <td>boolean or the string <code>'static'</code></td> - <td>true</td> - <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> - </tr> - <tr> - <td>keyboard</td> - <td>boolean</td> - <td>true</td> - <td>Closes the modal when escape key is pressed</td> - </tr> - <tr> - <td>focus</td> - <td>boolean</td> - <td>true</td> - <td>Puts the focus on the modal when initialized.</td> - </tr> - <tr> - <td>show</td> - <td>boolean</td> - <td>true</td> - <td>Shows the modal when initialized.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>backdrop</td> + <td>boolean or the string <code>'static'</code></td> + <td>true</td> + <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> + </tr> + <tr> + <td>keyboard</td> + <td>boolean</td> + <td>true</td> + <td>Closes the modal when escape key is pressed</td> + </tr> + <tr> + <td>focus</td> + <td>boolean</td> + <td>true</td> + <td>Puts the focus on the modal when initialized.</td> + </tr> + <tr> + <td>show</td> + <td>boolean</td> + <td>true</td> + <td>Shows the modal when initialized.</td> + </tr> + </tbody> +</table> ### Methods @@ -581,34 +579,32 @@ Manually hides a modal. **Returns to the caller before the modal has actually be Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.modal</td> - <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td>shown.bs.modal</td> - <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td>hide.bs.modal</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.modal</td> - <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.modal</td> + <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> + </tr> + <tr> + <td>shown.bs.modal</td> + <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> + </tr> + <tr> + <td>hide.bs.modal</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.modal</td> + <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myModal').on('hidden.bs.modal', function (e) { diff --git a/docs/components/navbar.md b/docs/components/navbar.md index d2553de79..5c6f95198 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -16,7 +16,7 @@ The navbar is a wrapper that positions branding, navigation, and other elements Here's what you need to know before getting started with the navbar: -- Navbars require a wrapping `.navbar` and [color scheme](#color-schemes) classes. +- Navbars require a wrapping `.navbar` with `.navbar-toggleable-*` for responsive collapsing and [color scheme](#color-schemes) classes. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. - Navbars and their contents are built with flexbox, providing easy alignment options via utility classes. - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. @@ -28,25 +28,24 @@ Read on for an example and list of supported sub-components. Navbars come with built-in support for a handful of sub-components. Choose from the following as needed: -- `.navbar-brand` for your company, product, or project name -- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns) +- `.navbar-brand` for your company, product, or project name. +- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors. -- Inline forms with `.float-` utilities for form controls and components. +- `.form-inline` for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. -- `.form-inline` for form controls and more. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. -Here's an example of all the sub-components included in a responsive light-themed navbar. +Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `md` (medium) breakpoint. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -109,13 +108,13 @@ Navbar navigation links build on our `.nav` options with their own modifier clas Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNav"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -136,13 +135,13 @@ Active states—with `.active`—to indicate the current page can be applied dir And because we use classes for our navs, you can avoid the list-based approach entirely if you like. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> - <div class="nav navbar-nav"> + <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> @@ -155,13 +154,13 @@ And because we use classes for our navs, you can avoid the list-based approach e You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -250,13 +249,13 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj Mix and match with other components and utilities as needed. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar w/ text</a> <div class="collapse navbar-collapse" id="navbarText"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -279,14 +278,14 @@ Mix and match with other components and utilities as needed. Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities. <div class="bd-example"> - <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarColor01"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -307,14 +306,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl </div> </nav> - <nav class="navbar navbar-inverse navbar-toggleable-md bg-primary"> + <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarColor02"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -335,14 +334,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl </div> </nav> - <nav class="navbar navbar-light navbar-toggleable-md" style="background-color: #e3f2fd;"> + <nav class="navbar navbar-toggleable-md navbar-light" style="background-color: #e3f2fd;"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarColor03"> - <ul class="nav navbar-nav"> + <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -384,7 +383,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it {% example html %} <div class="container"> - <nav class="navbar navbar-light bg-faded navbar-toggleable-md"> + <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <a class="navbar-brand" href="#">Navbar</a> </nav> </div> @@ -393,7 +392,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable-*` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed. {% example html %} -<nav class="navbar navbar-light bg-faded navbar-toggleable-md"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -402,7 +401,7 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport. +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.** {% example html %} <nav class="navbar navbar-light bg-faded"> @@ -411,17 +410,23 @@ Navbars can be statically placed (their default behavior), static without rounde {% endexample %} {% example html %} -<nav class="navbar navbar-fixed-top navbar-light bg-faded"> +<nav class="navbar fixed-top navbar-light bg-faded"> <a class="navbar-brand" href="#">Fixed top</a> </nav> {% endexample %} {% example html %} -<nav class="navbar navbar-fixed-bottom navbar-light bg-faded"> +<nav class="navbar fixed-bottom navbar-light bg-faded"> <a class="navbar-brand" href="#">Fixed bottom</a> </nav> {% endexample %} +{% example html %} +<nav class="navbar sticky-top navbar-light bg-faded"> + <a class="navbar-brand" href="#">Sticky top</a> +</nav> +{% endexample %} + ## Responsive behaviors Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. @@ -433,13 +438,13 @@ Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.na With no `.navbar-brand` shown in lowest breakpoint: {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> - <ul class="nav navbar-nav mt-2 mt-lg-0"> + <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -461,14 +466,14 @@ With no `.navbar-brand` shown in lowest breakpoint: With a brand name shown on the left and toggler on the right: {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> - <ul class="nav navbar-nav mt-2 mt-md-0"> + <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 1cd96da49..e4ace2ed9 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -163,113 +163,111 @@ Enable popovers via JavaScript: Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>animation</td> - <td>boolean</td> - <td>true</td> - <td>Apply a CSS fade transition to the popover</td> - </tr> - <tr> - <td>container</td> - <td>string | 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> - </td> - </tr> - <tr> - <td>content</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default content value if <code>data-content</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </td> - </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> - </td> - </tr> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</td> - <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td> - </tr> - <tr> - <td>placement</td> - <td>string | function</td> - <td>'right'</td> - <td> - <p>How to position the popover - top | bottom | left | right.</p> - <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p> - </td> - </tr> - <tr> - <td>selector</td> - <td>string</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> - <tr> - <td>template</td> - <td>string</td> - <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the popover.</p> - <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> - <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> - <p><code>.popover-arrow</code> will become the popover's arrow.</p> - <p>The outermost wrapper element should have the <code>.popover</code> class.</p> - </td> - </tr> - <tr> - <td>title</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </td> - </tr> - <tr> - <td>trigger</td> - <td>string</td> - <td>'click'</td> - <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> - </tr> - <tr> - <td>constraints</td> - <td>Array</td> - <td>'hover focus'</td> - <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> - </tr> - <tr> - <td>offset</td> - <td>string</td> - <td>'0 0'</td> - <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>animation</td> + <td>boolean</td> + <td>true</td> + <td>Apply a CSS fade transition to the popover</td> + </tr> + <tr> + <td>container</td> + <td>string | 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> + </td> + </tr> + <tr> + <td>content</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> + </td> + </tr> + <tr> + <td>html</td> + <td>boolean</td> + <td>false</td> + <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td> + </tr> + <tr> + <td>placement</td> + <td>string | function</td> + <td>'right'</td> + <td> + <p>How to position the popover - top | bottom | left | right.</p> + <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p> + </td> + </tr> + <tr> + <td>selector</td> + <td>string</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> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the popover.</p> + <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> + <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> + <p><code>.popover-arrow</code> will become the popover's arrow.</p> + <p>The outermost wrapper element should have the <code>.popover</code> class.</p> + </td> + </tr> + <tr> + <td>title</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default title value if <code>title</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>trigger</td> + <td>string</td> + <td>'click'</td> + <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> + </tr> + <tr> + <td>constraints</td> + <td>Array</td> + <td>'hover focus'</td> + <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> + </tr> + <tr> + <td>offset</td> + <td>string</td> + <td>'0 0'</td> + <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> + </tr> + </tbody> +</table> {% callout info %} #### Data attributes for individual popovers @@ -310,34 +308,32 @@ Hides and destroys an element's popover. Popovers that use delegation (which are ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.popover</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.popover</td> - <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.popover</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.popover</td> - <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.popover</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.popover</td> + <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.popover</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.popover</td> + <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myPopover').on('hidden.bs.popover', function () { diff --git a/docs/components/progress.md b/docs/components/progress.md index d137fad14..9f8bcf607 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -5,71 +5,147 @@ description: Documentation and examples for using Bootstrap progress bars. group: components --- -Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support. +Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Example +## How it works -To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute. +Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. + +- We use the `.progress` as a wrapper to indicate the max value of the progress bar. +- We use the inner `.progress-bar` to indicate the progress so far. +- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. +- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. + +Put that all together, and you have the following examples. + +{% example html %} +<div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <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: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> +</div> +{% endexample %} + +Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. + +{% example html %} +<div class="progress"> + <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> +</div> +{% endexample %} + +## Customizing + +Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. + +### Labels + +Add labels to your progress bars by placing text within the `.progress-bar`. {% example html %} +<div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> +</div> +{% endexample %} + +### Height -<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div> -<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> +We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. -<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div> -<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> +{% 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> +<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> +{% endexample %} -<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div> -<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> +### Backgrounds -<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div> -<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> +Use background utility classes to change the appearance of individual progress bars. -<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div> -<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> +{% example html %} +<div class="progress"> + <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> +</div> {% endexample %} -## Contextual alternatives +### Multiple bars -Progress bars use some of the same button and alert classes for consistent styles. +Include multiple progress bars in a progress component if you need. {% example html %} -<progress class="progress progress-success" value="25" max="100"></progress> -<progress class="progress progress-info" value="50" max="100"></progress> -<progress class="progress progress-warning" value="75" max="100"></progress> -<progress class="progress progress-danger" value="100" max="100"></progress> +<div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> +</div> {% endexample %} ### Striped -Uses a gradient to create a striped effect. +Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. {% example html %} -<progress class="progress progress-striped" value="10" max="100"></progress> -<progress class="progress progress-striped progress-success" value="25" max="100"></progress> -<progress class="progress progress-striped progress-info" value="50" max="100"></progress> -<progress class="progress progress-striped progress-warning" value="75" max="100"></progress> -<progress class="progress progress-striped progress-danger" value="100" max="100"></progress> +<div class="progress"> + <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div> +</div> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> +</div> {% endexample %} ### Animated stripes -The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations. +The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. -**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). +**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. <div class="bd-example"> - <progress class="progress progress-striped" value="25" max="100"></progress> - <button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off"> + <div class="progress"> + <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> + </div> + <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off"> Toggle animation </button> </div> {% highlight html %} -<progress class="progress progress-striped progress-animated" value="25" max="100"></progress> +<div class="progress"> + <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> +</div> {% endhighlight %} diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 74829267e..a1f04ad9c 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -117,45 +117,42 @@ $('[data-spy="scroll"]').each(function () { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>offset</td> - <td>number</td> - <td>10</td> - <td>Pixels to offset from top when calculating position of scroll.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>offset</td> + <td>number</td> + <td>10</td> + <td>Pixels to offset from top when calculating position of scroll.</td> + </tr> + </tbody> +</table> ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>activate.bs.scrollspy</td> - <td>This event fires whenever a new item becomes activated by the scrollspy.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>activate.bs.scrollspy</td> + <td>This event fires whenever a new item becomes activated by the scrollspy.</td> + </tr> + </tbody> +</table> + {% highlight js %} $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 31fb2c1c7..deb84b778 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -146,107 +146,105 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>animation</td> - <td>boolean</td> - <td>true</td> - <td>Apply a CSS fade transition to the tooltip</td> - </tr> - <tr> - <td>container</td> - <td>string | element | false</td> - <td>false</td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> - </td> - </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> - </td> - </tr> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</td> - <td> - <p>Allow HTML in the tooltip.</p> - <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p> - <p>Use text if you're worried about XSS attacks.</p> - </td> - </tr> - <tr> - <td>placement</td> - <td>string | function</td> - <td>'top'</td> - <td> - <p>How to position the tooltip - top | bottom | left | right.</p> - <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p> - </td> - </tr> - <tr> - <td>selector</td> - <td>string</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> - <tr> - <td>template</td> - <td>string</td> - <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the tooltip.</p> - <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> - <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> - <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> - </td> - </tr> - <tr> - <td>title</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p> - </td> - </tr> - <tr> - <td>trigger</td> - <td>string</td> - <td>'hover focus'</td> - <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> - </tr> - <tr> - <td>constraints</td> - <td>Array</td> - <td>[]</td> - <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> - </tr> - <tr> - <td>offset</td> - <td>string</td> - <td>'0 0'</td> - <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>animation</td> + <td>boolean</td> + <td>true</td> + <td>Apply a CSS fade transition to the tooltip</td> + </tr> + <tr> + <td>container</td> + <td>string | element | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> + </td> + </tr> + <tr> + <td>html</td> + <td>boolean</td> + <td>false</td> + <td> + <p>Allow HTML in the tooltip.</p> + <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p> + <p>Use text if you're worried about XSS attacks.</p> + </td> + </tr> + <tr> + <td>placement</td> + <td>string | function</td> + <td>'top'</td> + <td> + <p>How to position the tooltip - top | bottom | left | right.</p> + <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p> + </td> + </tr> + <tr> + <td>selector</td> + <td>string</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> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the tooltip.</p> + <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> + <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> + <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> + </td> + </tr> + <tr> + <td>title</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default title value if <code>title</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p> + </td> + </tr> + <tr> + <td>trigger</td> + <td>string</td> + <td>'hover focus'</td> + <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> + </tr> + <tr> + <td>constraints</td> + <td>Array</td> + <td>[]</td> + <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> + </tr> + <tr> + <td>offset</td> + <td>string</td> + <td>'0 0'</td> + <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> + </tr> + </tbody> +</table> {% callout info %} #### Data attributes for individual tooltips @@ -286,34 +284,32 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.tooltip</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.tooltip</td> - <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.tooltip</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.tooltip</td> - <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.tooltip</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.tooltip</td> + <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.tooltip</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.tooltip</td> + <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myTooltip').on('hidden.bs.tooltip', function () { |