diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/alerts.md | 2 | ||||
| -rw-r--r-- | docs/components/card.md | 43 | ||||
| -rw-r--r-- | docs/components/carousel.md | 20 | ||||
| -rw-r--r-- | docs/components/collapse.md | 14 | ||||
| -rw-r--r-- | docs/components/forms.md | 52 | ||||
| -rw-r--r-- | docs/components/input-group.md | 16 | ||||
| -rw-r--r-- | docs/components/list-group.md | 6 | ||||
| -rw-r--r-- | docs/components/modal.md | 63 | ||||
| -rw-r--r-- | docs/components/navbar.md | 69 | ||||
| -rw-r--r-- | docs/components/navs.md | 134 | ||||
| -rw-r--r-- | docs/components/pagination.md | 4 | ||||
| -rw-r--r-- | docs/components/popovers.md | 20 | ||||
| -rw-r--r-- | docs/components/scrollspy.md | 8 | ||||
| -rw-r--r-- | docs/components/tooltips.md | 18 | ||||
| -rw-r--r-- | docs/components/utilities.md | 87 |
15 files changed, 343 insertions, 213 deletions
diff --git a/docs/components/alerts.md b/docs/components/alerts.md index fd01bdd52..e27109768 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -64,7 +64,6 @@ You can see this in action with a live demo: <div class="alert alert-warning alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> @@ -85,7 +84,6 @@ Or with `data` attributes on a button **within the alert**, as demonstrated abov {% highlight html %} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> {% endhighlight %} diff --git a/docs/components/card.md b/docs/components/card.md index 516367e65..9be52fd2f 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -53,6 +53,16 @@ Cards support a wide variety of content, including images, text, list groups, li {% example html %} <div class="card"> + <ul class="list-group list-group-flush"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> +</div> +{% endexample %} + +{% example html %} +<div class="card"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <div class="card-block"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> @@ -130,13 +140,13 @@ You can quickly change the text alignment of any card—in its entirety or speci <a href="#" class="btn btn-primary">Go somewhere</a> </div> -<div class="card card-block text-center"> +<div class="card card-block text-xs-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> -<div class="card card-block text-right"> +<div class="card card-block text-xs-right"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> @@ -162,6 +172,17 @@ Add an optional header and/or footer within a card. {% example html %} <div class="card"> + <h3 class="card-header">Featured</h3> + <div class="card-block"> + <h4 class="card-title">Special title treatment</h4> + <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> + <a href="#" class="btn btn-primary">Go somewhere</a> + </div> +</div> +{% endexample %} + +{% example html %} +<div class="card"> <div class="card-header"> Quote </div> @@ -175,7 +196,7 @@ Add an optional header and/or footer within a card. {% endexample %} {% example html %} -<div class="card text-center"> +<div class="card text-xs-center"> <div class="card-header"> Featured </div> @@ -249,7 +270,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** {% example html %} -<div class="card card-inverse card-primary text-center"> +<div class="card card-inverse card-primary text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -257,7 +278,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-success text-center"> +<div class="card card-inverse card-success text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -265,7 +286,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-info text-center"> +<div class="card card-inverse card-info text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -273,7 +294,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-warning text-center"> +<div class="card card-inverse card-warning text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -281,7 +302,7 @@ Cards include their own variant classes for quickly changing the `background-col </blockquote> </div> </div> -<div class="card card-inverse card-danger text-center"> +<div class="card card-inverse card-danger text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> @@ -398,7 +419,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 card-block card-inverse card-primary text-center"> + <div class="card card-block card-inverse card-primary text-xs-center"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> @@ -408,7 +429,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns </footer> </blockquote> </div> - <div class="card card-block text-center"> + <div class="card card-block text-xs-center"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> @@ -416,7 +437,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns <div class="card"> <img class="card-img" data-src="holder.js/100px260/" alt="Card image"> </div> - <div class="card card-block text-right"> + <div class="card card-block text-xs-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 79658eb6e..76278281e 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -4,7 +4,7 @@ title: Carousel group: components --- -A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.** +A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.** ## Contents @@ -144,9 +144,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 50px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -180,7 +180,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -#### .carousel(options) +#### `.carousel(options)` Initializes the carousel with an optional options `object` and starts cycling through items. @@ -190,23 +190,23 @@ $('.carousel').carousel({ }) {% endhighlight %} -#### .carousel('cycle') +#### `.carousel('cycle')` Cycles through the carousel items from left to right. -#### .carousel('pause') +#### `.carousel('pause')` Stops the carousel from cycling through items. -#### .carousel(number) +#### `.carousel(number)` Cycles the carousel to a particular frame (0 based, similar to an array). -#### .carousel('prev') +#### `.carousel('prev')` Cycles to the previous item. -#### .carousel('next') +#### `.carousel('next')` Cycles to the next item. diff --git a/docs/components/collapse.md b/docs/components/collapse.md index 40050c29f..57e3cd829 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -121,9 +121,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 50px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -145,7 +145,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -#### .collapse(options) +#### `.collapse(options)` Activates your content as a collapsible element. Accepts an optional options `object`. @@ -155,15 +155,15 @@ $('#myCollapsible').collapse({ }) {% endhighlight %} -#### .collapse('toggle') +#### `.collapse('toggle')` Toggles a collapsible element to shown or hidden. -#### .collapse('show') +#### `.collapse('show')` Shows a collapsible element. -#### .collapse('hide') +#### `.collapse('hide')` Hides a collapsible element. diff --git a/docs/components/forms.md b/docs/components/forms.md index 90f3e38dc..f40904f8e 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -473,7 +473,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an ## Readonly inputs -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.< +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. {% example html %} <input class="form-control" type="text" placeholder="Readonly input here…" readonly> @@ -484,9 +484,9 @@ Add the `readonly` boolean attribute on an input to prevent modification of the Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`. {% example html %} -<input class="form-control form-control-lg" type="text" placeholder=".input-lg"> +<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> <input class="form-control" type="text" placeholder="Default input"> -<input class="form-control form-control-sm" type="text" placeholder=".input-sm"> +<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"> {% endexample %} {% example html %} @@ -535,7 +535,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas ## Validation -Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. +Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. {% comment %} {% callout warning %} @@ -556,40 +556,34 @@ Ensure that an alternative indication of state is also provided. For instance, y <label class="form-control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control form-control-warning" id="inputWarning1"> </div> -<div class="form-group has-error"> - <label class="form-control-label" for="inputError1">Input with error</label> - <input type="text" class="form-control form-control-error" id="inputError1"> +<div class="form-group has-danger"> + <label class="form-control-label" for="inputDanger1">Input with danger</label> + <input type="text" class="form-control form-control-danger" id="inputDanger1"> </div> -<div class="has-success"> - <div class="checkbox"> - <label> - <input type="checkbox" id="checkboxSuccess" value="option1"> - Checkbox with success - </label> - </div> +<div class="checkbox has-success"> + <label> + <input type="checkbox" id="checkboxSuccess" value="option1"> + Checkbox with success + </label> </div> -<div class="has-warning"> - <div class="checkbox"> - <label> - <input type="checkbox" id="checkboxWarning" value="option1"> - Checkbox with warning - </label> - </div> +<div class="checkbox has-warning"> + <label> + <input type="checkbox" id="checkboxWarning" value="option1"> + Checkbox with warning + </label> </div> -<div class="has-error"> - <div class="checkbox"> - <label> - <input type="checkbox" id="checkboxError" value="option1"> - Checkbox with error - </label> - </div> +<div class="checkbox has-danger"> + <label> + <input type="checkbox" id="checkboxDanger" value="option1"> + Checkbox with danger + </label> </div> {% endexample %} ## Custom forms -For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control. +For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control. ### Checkboxes and radios diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 1b3a71545..78ad26e27 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -23,7 +23,7 @@ Place one add-on or button on either side of an input. You may also place one on <br> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> - <span class="input-group-addon" id="basic-addon2">.00</span> + <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> <br> <label for="basic-url">Your vanity URL</label> @@ -108,6 +108,20 @@ Buttons in input groups are a bit different and require one extra level of nesti </div> </div> </div> +<br> +<div class="row"> + <div class="col-lg-offset-3 col-lg-6"> + <div class="input-group"> + <span class="input-group-btn"> + <button class="btn btn-secondary" type="button">Hate it</button> + </span> + <input type="text" class="form-control" placeholder="Product name"> + <span class="input-group-btn"> + <button class="btn btn-secondary" type="button">Love it</button> + </span> + </div> + </div> +</div> {% endexample %} ## Buttons with dropdowns diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 7a8f1d06f..5dbcca2d5 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -31,15 +31,15 @@ Add labels to any list group item to show unread counts, activity, etc. {% example html %} <ul class="list-group"> <li class="list-group-item"> - <span class="label label-default label-pill pull-right">14</span> + <span class="label label-default label-pill pull-xs-right">14</span> Cras justo odio </li> <li class="list-group-item"> - <span class="label label-default label-pill pull-right">2</span> + <span class="label label-default label-pill pull-xs-right">2</span> Dapibus ac facilisis in </li> <li class="list-group-item"> - <span class="label label-default label-pill pull-right">1</span> + <span class="label label-default label-pill pull-xs-right">1</span> Morbi leo risus </li> </ul> diff --git a/docs/components/modal.md b/docs/components/modal.md index 6bda50798..a0e741bb4 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -48,7 +48,6 @@ A rendered modal with header, body, and set of actions in the footer. <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> @@ -71,7 +70,6 @@ A rendered modal with header, body, and set of actions in the footer. <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> @@ -98,7 +96,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> @@ -153,7 +150,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> @@ -223,7 +219,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> @@ -241,7 +236,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> @@ -275,26 +269,28 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta <h4 class="modal-title" id="gridModalLabel">Modal title</h4> </div> <div class="modal-body"> - <div class="row"> - <div class="col-md-4">.col-md-4</div> - <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> - </div> - <div class="row"> - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> - <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> - </div> - <div class="row"> - <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> - </div> - <div class="row"> - <div class="col-sm-9"> - Level 1: .col-sm-9 - <div class="row"> - <div class="col-xs-8 col-sm-6"> - Level 2: .col-xs-8 .col-sm-6 - </div> - <div class="col-xs-4 col-sm-6"> - Level 2: .col-xs-4 .col-sm-6 + <div class="container-fluid bd-example-row"> + <div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> + <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> + </div> + <div class="row"> + <div class="col-sm-9"> + Level 1: .col-sm-9 + <div class="row"> + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 + </div> + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 + </div> </div> </div> </div> @@ -329,7 +325,6 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> @@ -398,9 +393,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 50px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -428,7 +423,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -#### .modal(options) +#### `.modal(options)` Activates your content as a modal. Accepts an optional options `object`. @@ -438,19 +433,19 @@ $('#myModal').modal({ }) {% endhighlight %} -#### .modal('toggle') +#### `.modal('toggle')` Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %} -#### .modal('show') +#### `.modal('show')` Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). {% highlight js %}$('#myModal').modal('show'){% endhighlight %} -#### .modal('hide') +#### `.modal('hide')` Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 4991c6d50..241282fb2 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -15,9 +15,9 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e Here's what you need to know before getting started with the navbar: -- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`). +- Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes). - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. -- Use `.pull-left` and `.pull-right` to quickly align sub-components. +- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components. - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. ## Supported content @@ -26,8 +26,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc - `.navbar-brand` for your company, product, or project name - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns) -- `.navbar-form` for vertically centering default-sized inputs and buttons. -- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors. +- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors. Here's an example of all the sub-components included in a default, light navbar: @@ -48,13 +47,65 @@ Here's an example of all the sub-components included in a default, light navbar: <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline navbar-form pull-right"> + <form class="form-inline pull-xs-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav> {% endexample %} +### Brand + +The `.navbar-brand` can be applied to most elements, but an anchor works best. + +{% example html %} +<nav class="navbar navbar-light bg-faded"> + <a class="navbar-brand" href="#">Navbar</a> +</nav> + +<nav class="navbar navbar-light bg-faded"> + <h1 class="navbar-brand">Navbar</h1> +</nav> + +{% endexample %} + +### Nav + +Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`. + +{% example html %} +<nav class="navbar navbar-light bg-faded"> + <ul class="nav navbar-nav"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Features</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Pricing</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">About</a> + </li> + </ul> +</nav> +{% endexample %} + +And because we use classes for our navs, you can omit the list-based approach entirely if you like. + +{% example html %} +<nav class="navbar navbar-light bg-faded"> + <div class="nav 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> + <a class="nav-item nav-link" href="#">About</a> + </div> +</nav> +{% endexample %} + + ## Color schemes Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color. @@ -78,7 +129,7 @@ Here are some examples to show what we mean. <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline navbar-form pull-right"> + <form class="form-inline pull-xs-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-info-outline" type="submit">Search</button> </form> @@ -99,7 +150,7 @@ Here are some examples to show what we mean. <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline navbar-form pull-right"> + <form class="form-inline pull-xs-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-secondary-outline" type="submit">Search</button> </form> @@ -120,7 +171,7 @@ Here are some examples to show what we mean. <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline navbar-form pull-right"> + <form class="form-inline pull-xs-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-primary-outline" type="submit">Search</button> </form> @@ -143,7 +194,7 @@ Here are some examples to show what we mean. ## Containers -Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar. +Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement). {% example html %} <div class="container"> diff --git a/docs/components/navs.md b/docs/components/navs.md index 564564f52..3552b9125 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -17,7 +17,7 @@ If you are using navs to provide a navigation bar, be sure to add a `role="navig ## Base nav -Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**. +Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**. {% example html %} <ul class="nav"> @@ -36,7 +36,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots </ul> {% endexample %} -Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. +Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. The change in nav item display below **is intentional** as `<li>`s have a different default `display` than regular `<a>` elements. {% example html %} <nav class="nav"> @@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l </nav> {% endexample %} +## Inline + +Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line. + +{% example html %} +<nav class="nav nav-inline"> + <a class="nav-link active" href="#">Active</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Another link</a> + <a class="nav-link disabled" href="#">Disabled</a> +</nav> +{% endexample %} + +The same works for a navigation built with lists. + +{% example html %} +<ul class="nav nav-inline"> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Another link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> +</ul> +{% endexample %} + ## Tabs Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior). @@ -54,16 +86,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb {% example html %} <ul class="nav nav-tabs"> <li class="nav-item"> - <a href="#" class="nav-link active">Active</a> + <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Link</a> + <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> + <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link disabled">Disabled</a> + <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> {% endexample %} @@ -75,16 +107,16 @@ Take that same HTML, but use `.nav-pills` instead: {% example html %} <ul class="nav nav-pills"> <li class="nav-item"> - <a href="#" class="nav-link active">Active</a> + <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Link</a> + <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> + <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link disabled">Disabled</a> + <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> {% endexample %} @@ -96,16 +128,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`. {% example html %} <ul class="nav nav-pills nav-stacked"> <li class="nav-item"> - <a href="#" class="nav-link active">Active</a> + <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Link</a> + <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> + <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link disabled">Disabled</a> + <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> {% endexample %} @@ -119,7 +151,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {% example html %} <ul class="nav nav-tabs"> <li class="nav-item"> - <a href="#" class="nav-link active">Active</a> + <a class="nav-link active" href="#">Active</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> @@ -132,10 +164,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </div> </li> <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> + <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link disabled">Disabled</a> + <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> {% endexample %} @@ -145,7 +177,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {% example html %} <ul class="nav nav-pills"> <li class="nav-item"> - <a href="#" class="nav-link active">Active</a> + <a class="nav-link active" href="#">Active</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> @@ -158,10 +190,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </div> </li> <li class="nav-item"> - <a href="#" class="nav-link">Another link</a> + <a class="nav-link" href="#">Another link</a> </li> <li class="nav-item"> - <a href="#" class="nav-link disabled">Disabled</a> + <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> {% endexample %} @@ -171,34 +203,34 @@ 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. <div class="bd-example bd-example-tabs" role="tabpanel"> - <ul id="myTab" class="nav nav-tabs" role="tablist"> + <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="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-expanded="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">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" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> + <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> </ul> - <div id="myTabContent" class="tab-content"> + <div class="tab-content" id="myTabContent"> <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> - <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab"> + <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 role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab"> + <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-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 role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab"> + <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> @@ -213,25 +245,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> - <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a> + <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> </li> <li class="nav-item"> - <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a> + <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" href="#messages" role="tab" data-toggle="tab">Messages</a> + <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" href="#settings" role="tab" data-toggle="tab">Settings</a> + <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> - <div role="tabpanel" class="tab-pane active" id="home">...</div> - <div role="tabpanel" class="tab-pane" id="profile">...</div> - <div role="tabpanel" class="tab-pane" id="messages">...</div> - <div role="tabpanel" class="tab-pane" id="settings">...</div> + <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> {% endhighlight %} </div> @@ -258,14 +290,14 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) ### Fade effect -To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to properly fade in initial content. +To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to make the initial content visible. {% highlight html %} <div class="tab-content"> - <div role="tabpanel" class="tab-pane fade in active" id="home">...</div> - <div role="tabpanel" class="tab-pane fade" id="profile">...</div> - <div role="tabpanel" class="tab-pane fade" id="messages">...</div> - <div role="tabpanel" class="tab-pane fade" id="settings">...</div> + <div class="tab-pane fade in 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> {% endhighlight %} @@ -276,26 +308,26 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. {% highlight html %} -<ul class="nav nav-tabs" role="tablist" id="myTab"> +<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a> + <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> </li> <li class="nav-item"> - <a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a> + <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a> + <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a> + <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> </li> </ul> <div class="tab-content"> - <div role="tabpanel" class="tab-pane active" id="home">...</div> - <div role="tabpanel" class="tab-pane" id="profile">...</div> - <div role="tabpanel" class="tab-pane" id="messages">...</div> - <div role="tabpanel" class="tab-pane" id="settings">...</div> + <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> <script> diff --git a/docs/components/pagination.md b/docs/components/pagination.md index c0ff3a8a3..99d4220fa 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -71,7 +71,7 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles. -{% highlight html %} +{% example html %} <nav> <ul class="pagination"> <li class="disabled"> @@ -83,7 +83,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> </ul> </nav> -{% endhighlight %} +{% endexample %} ### Sizing diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 3b9753aa5..9621bb7d8 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -53,7 +53,7 @@ $(function () { Four options are available: top, right, bottom, and left aligned. -<div class="bd-example bd-example-popover"> +<div class="bd-example bd-example-popover-static"> <div class="popover popover-top"> <div class="popover-arrow"></div> <h3 class="popover-title">Popover top</h3> @@ -93,7 +93,7 @@ Four options are available: top, right, bottom, and left aligned. ## Live demo {% example html %} -<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> +<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> {% endexample %} ### Four directions @@ -145,7 +145,7 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag {% endcallout %} {% example html %} -<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> +<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> {% endexample %} {% highlight js %} @@ -282,34 +282,34 @@ Options for individual popovers can alternatively be specified through the use o ### Methods -#### $().popover(options) +#### `$().popover(options)` Initializes popovers for an element collection. -#### .popover('show') +#### `.popover('show')` Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed. {% highlight js %}$('#element').popover('show'){% endhighlight %} -#### .popover('hide') +#### `.popover('hide')` Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. {% highlight js %}$('#element').popover('hide'){% endhighlight %} -#### .popover('toggle') +#### `.popover('toggle')` Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. {% highlight js %}$('#element').popover('toggle'){% endhighlight %} -#### .popover('destroy') +#### `.popover('dispose')` -Hides and destroys an element's popover. Popvoers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. +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('destroy'){% endhighlight %} +{% highlight js %}$('#element').popover('dispose'){% endhighlight %} ### Events diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index dd0b45d99..4ae0fa219 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -101,7 +101,7 @@ Target elements that are not [`:visible` according to jQuery](https://api.jquery ### Methods -#### .scrollspy('refresh') +#### `.scrollspy('refresh')` When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so: @@ -121,9 +121,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 85f3e63b6..bba918d9d 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -15,7 +15,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a Things to know when using the tooltip plugin: -- Tooltips rely on on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work! +- Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work! - 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). @@ -48,7 +48,7 @@ Hover over the links below to see tooltips: Four options are available: top, right, bottom, and left aligned. -<div class="bd-example bd-example-tooltip"> +<div class="bd-example bd-example-tooltip-static"> <div class="tooltip top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> @@ -219,7 +219,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tr> <td>constraints</td> <td>Array</td> - <td>'hover focus'</td> + <td>[]</td> <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td> </tr> <tr> @@ -240,33 +240,33 @@ Options for individual tooltips can alternatively be specified through the use o ### Methods -#### $().tooltip(options) +#### `$().tooltip(options)` Attaches a tooltip handler to an element collection. -#### .tooltip('show') +#### `.tooltip('show')` Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. {% highlight js %}$('#element').tooltip('show'){% endhighlight %} -#### .tooltip('hide') +#### `.tooltip('hide')` Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. {% highlight js %}$('#element').tooltip('hide'){% endhighlight %} -#### .tooltip('toggle') +#### `.tooltip('toggle')` Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %} -#### .tooltip('destroy') +#### `.tooltip('dispose')` Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. -{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} +{% highlight js %}$('#element').tooltip('dispose'){% endhighlight %} ### Events diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 456e44414..940219263 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -4,7 +4,7 @@ title: Utility classes group: components --- -Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development. +Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development. ## Contents @@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha Easily realign text to components with text alignment classes. {% example html %} -<p class="text-left">Left aligned text.</p> -<p class="text-center">Center aligned text.</p> -<p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> {% endexample %} +For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. + +{% example html %} +<p class="text-xs-left">Left aligned text on all viewport sizes.</p> +<p class="text-xs-center">Center aligned text on all viewport sizes.</p> +<p class="text-xs-right">Right aligned text on all viewport sizes.</p> + +<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> +<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> +<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> +<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> +{% endexample %} + ## Text transform Transform text in components with text capitalization classes. @@ -108,7 +118,17 @@ Transform text in components with text capitalization classes. {% example html %} <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> -<p class="text-capitalize">Capitalized text.</p> +<p class="text-capitalize">CapiTaliZed text.</p> +{% endexample %} + +## Font weight and italics + +Quickly change the weight (boldness) of text or italicize text. + +{% example html %} +<p class="font-weight-bold">Bold text.</p> +<p class="font-weight-normal">Normal weight text.</p> +<p class="font-italic">Italicized text.</p> {% endexample %} ## Contextual colors and backgrounds @@ -124,6 +144,17 @@ Convey meaning through color with a handful of emphasis utility classes. These m <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> {% endexample %} +Contextual text classes also work well on anchors with the provided hover and focus states. + +{% example html %} +<a href="#" class="text-muted">Muted link</a> +<a href="#" class="text-primary">Primary link</a> +<a href="#" class="text-success">Success link</a> +<a href="#" class="text-info">Info link</a> +<a href="#" class="text-warning">Warning link</a> +<a href="#" class="text-danger">Danger link</a> +{% endexample %} + Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. {% example html %} @@ -149,34 +180,33 @@ Ensure that any meaning conveyed through color is also conveyed in a format that ## Close icon -Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`. +Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`. {% example html %} <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> {% endexample %} -## Floats +## Responsive floats -Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins. +These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system. + +Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available. {% example html %} -<div class="pull-left">Float left</div> -<div class="pull-right">Float right</div> +<div class="pull-xs-left">Float left on all viewport sizes</div> +<div class="pull-xs-right">Float right on all viewport sizes</div> +<div class="pull-xs-none">Don't float on all viewport sizes</div> + +<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div> +<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div> +<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div> +<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div> {% endexample %} {% highlight scss %} -// Classes -.pull-left { - float: left !important; -} -.pull-right { - float: right !important; -} - -// Usage as mixins +// Related simple non-responsive mixins .element { @include pull-left; } @@ -232,16 +262,6 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} -## Hidden content - -Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem. - -Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. - -{% highlight html %} -<input type="text" hidden> -{% endhighlight %} - ## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. @@ -262,7 +282,7 @@ The `.invisible` class can be used to toggle only the visibility of an element, } {% endhighlight %} -## Screen readers +## Screen readers and keyboard users Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. @@ -328,4 +348,9 @@ Aspect ratios can be customized with modifier classes. <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> + +<!-- 1:1 aspect ratio --> +<div class="embed-responsive embed-responsive-1by1"> + <iframe class="embed-responsive-item" src="..."></iframe> +</div> {% endhighlight %} |