diff options
Diffstat (limited to 'docs')
81 files changed, 1481 insertions, 1106 deletions
diff --git a/docs/4.0/about/history.md b/docs/4.0/about/history.md index cec23aa0b..b535f35d3 100644 --- a/docs/4.0/about/history.md +++ b/docs/4.0/about/history.md @@ -2,12 +2,12 @@ layout: docs title: History description: A brief overview of the history of Bootstrap. -group: about redirect_from: "/docs/4.0/about/" +group: about --- Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today. -Originally [released](https://blog.twitter.com/2011/bootstrap-from-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach. +Originally [released](https://blog.twitter.com/2011/bootstrap-from-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases]({{ site.repo }}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach. diff --git a/docs/4.0/about/license.md b/docs/4.0/about/license.md index d614731bf..39720029d 100644 --- a/docs/4.0/about/license.md +++ b/docs/4.0/about/license.md @@ -31,4 +31,4 @@ Bootstrap is released under the MIT license and is copyright {{ site.time | date - Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it - Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged) -The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE) for more information. +The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/v{{ site.current_version }}/LICENSE) for more information. diff --git a/docs/4.0/about/team.md b/docs/4.0/about/team.md index aa575f8f2..d34c5b6f4 100644 --- a/docs/4.0/about/team.md +++ b/docs/4.0/about/team.md @@ -19,4 +19,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor {% endfor %} </div> -Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for information on how we develop. +Get involved with Bootstrap development by [opening an issue]({{ site.repo }}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{ site.repo }}/blob/v{{ site.current_version }}/.github/CONTRIBUTING.md) for information on how we develop. diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index ed63da952..b8bb0c216 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -8,7 +8,7 @@ toc: true ## Examples -Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). +Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). {% example html %} {% for color in site.data.theme-colors %} @@ -50,6 +50,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. +- If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this. - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes. @@ -58,10 +59,10 @@ You can see this in action with a live demo: {% example html %} <div class="alert alert-warning alert-dismissible fade show" role="alert"> + <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> - <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> {% endexample %} diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md index 4e80828a4..c42d948d6 100644 --- a/docs/4.0/components/badge.md +++ b/docs/4.0/components/badge.md @@ -30,33 +30,22 @@ Badges scale to match the size of the immediate parent element by using relative Badges can be used as part of links or buttons to provide a counter. -<div class="bd-example"> -<button class="btn"> - Notifications <span class="badge badge-secondary">4</span> -</button> -</div> - -{% highlight html %} -<button class="btn"> - Notifications <span class="badge badge-secondary">4</span> +{% example html %} +<button type="button" class="btn btn-primary"> + Notifications <span class="badge badge-light">4</span> </button> -{% endhighlight %} +{% endexample %} -Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link or button. Unless the context is clear (as with the "Notifications" example, where it is arguably understandable that the "4" gives a count of the number of notifications), consider including additional context – for instance using a visually hidden piece of additional text. +Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. -<div class="bd-example"> -<button class="btn"> - Profile <span class="badge badge-secondary">9</span> - <span class="sr-only">unread messages</span> -</button> -</div> +Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. -{% highlight html %} -<button class="btn"> - Profile <span class="badge badge-secondary">9</span> +{% example html %} +<button type="button" class="btn btn-primary"> + Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button> -{% endhighlight %} +{% endexample %} ## Contextual variations diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md index eb286d847..09ad73127 100644 --- a/docs/4.0/components/breadcrumb.md +++ b/docs/4.0/components/breadcrumb.md @@ -5,30 +5,36 @@ description: Indicate the current page's location within a navigational hierarch group: components --- +## Overview + Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). {% example html %} -<ol class="breadcrumb"> - <li class="breadcrumb-item active">Home</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item active">Library</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item"><a href="#">Library</a></li> - <li class="breadcrumb-item active">Data</li> -</ol> -{% endexample %} -Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup. +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item active" aria-current="page">Home</li> + </ol> +</nav> -{% example html %} -<nav class="breadcrumb"> - <a class="breadcrumb-item" href="#">Home</a> - <a class="breadcrumb-item" href="#">Library</a> - <a class="breadcrumb-item" href="#">Data</a> - <span class="breadcrumb-item active">Bootstrap</span> +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active" aria-current="page">Library</li> + </ol> +</nav> + +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item"><a href="#">Library</a></li> + <li class="breadcrumb-item active" aria-current="page">Data</li> + </ol> </nav> {% endexample %} + +## Accessibility + +Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page. + +For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md index e702bb76e..8fea3de90 100644 --- a/docs/4.0/components/button-group.md +++ b/docs/4.0/components/button-group.md @@ -25,6 +25,7 @@ In order for assistive technologies (such as screen readers) to convey that a se In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. {% endcallout %} + ## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. @@ -195,7 +196,3 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli ... </div> {% endhighlight %} - -## Tooltips and popovers - -Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index d0d633d05..9db9bc3c9 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -33,14 +33,14 @@ Below is an example of a basic card with mixed content and a fixed width. Cards Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported. -### Blocks +### Body The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card. {% example html %} <div class="card"> <div class="card-body"> - This is some text within a card block. + This is some text within a card body. </div> </div> {% endexample %} @@ -560,7 +560,7 @@ Just like with card groups, card footers in decks will automatically line up. ### Card columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. +Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. **Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet. @@ -591,7 +591,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> - <div class="card bg-primary p-3 text-center"> + <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer"> diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 29802f466..4919e1ac2 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -14,6 +14,8 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. +Lastly, if you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). + ## Example Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index c77d436fb..536cc177f 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc {% example html %} <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button> + <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> @@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tbody> <tr> <td>parent</td> - <td>selector</td> + <td>selector | jQuery object | DOM element </td> <td>false</td> - <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td> + <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td> </tr> <tr> <td>toggle</td> @@ -216,7 +216,7 @@ $('#myCollapsible').collapse({ #### `.collapse('toggle')` -Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). +Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). #### `.collapse('show')` diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 9170b7162..d38b410c7 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -10,7 +10,9 @@ toc: true Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/) -Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before Bootstrap's JavaScript. +Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. + +If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). ## Accessibility @@ -314,7 +316,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> </div> <div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button class="btn btn-secondary btn-lg" type="button"> Large button </button> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> @@ -335,7 +337,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> </div> <div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button class="btn btn-secondary btn-sm" type="button"> Small button </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> @@ -430,7 +432,7 @@ Historically dropdown menu contents *had* to be links, but that's no longer the By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. {% callout info %} -**Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment. +**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). {% endcallout %} {% example html %} @@ -472,6 +474,55 @@ Separate groups of related menu items with a divider. </div> {% endexample %} +## Menu forms + +Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require. + +{% example html %} +<div class="dropdown-menu"> + <form class="px-4 py-3"> + <div class="form-group"> + <label for="exampleDropdownFormEmail1">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormPassword1">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">New around here? Sign up</a> + <a class="dropdown-item" href="#">Forgot password?</a> +</div> +{% endexample %} + +{% example html %} +<form class="dropdown-menu p-4"> + <div class="form-group"> + <label for="exampleDropdownFormEmail2">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormPassword2">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> +</form> +{% endexample %} + ## Disabled menu items Add `.disabled` to items in the dropdown to **style them as disabled**. @@ -523,7 +574,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-placement=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. <table class="table table-bordered table-striped table-responsive"> <thead> @@ -536,16 +587,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </thead> <tbody> <tr> - <td>placement</td> - <td>string</td> - <td>'bottom'</td> - <td> - <p>How to position the popover - top | bottom.</p> - </td> - </tr> - <tr> <td>offset</td> - <td>number | string</td> + <td>number | string | function</td> <td>0</td> <td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td> </tr> diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6abe03e58..ed4d95b70 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -238,17 +238,17 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl ### Without labels -Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). +Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). {% example html %} <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </label> </div> <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </label> </div> {% endexample %} @@ -337,7 +337,10 @@ More complex layouts can also be created with the grid system. </div> <div class="form-group col-md-4"> <label for="inputState" class="col-form-label">State</label> - <select id="inputState" class="form-control">Choose</select> + <select id="inputState" class="form-control"> + <option selected>Choose...</option> + <option>...</option> + </select> </div> <div class="form-group col-md-2"> <label for="inputZip" class="col-form-label">Zip</label> @@ -645,9 +648,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi <option>Disabled select</option> </select> </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> @@ -658,7 +661,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi {% callout warning %} #### Caveat with anchors -By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. +By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. {% endcallout %} {% callout danger %} @@ -669,7 +672,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an ## Validation -Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. +Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. {% callout warning %} We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers. @@ -684,7 +687,7 @@ Here's how form validation works with Bootstrap: - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. -- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. +- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. - You may provide custom validity messages with `setCustomValidity` in JavaScript. With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. @@ -736,18 +739,19 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { - "use strict"; - window.addEventListener("load", function() { - var form = document.getElementById("needs-validation"); - form.addEventListener("submit", function(event) { - if (form.checkValidity() == false) { + 'use strict'; + + window.addEventListener('load', function() { + var form = document.getElementById('needs-validation'); + form.addEventListener('submit', function(event) { + if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } - form.classList.add("was-validated"); + form.classList.add('was-validated'); }, false); }, false); -}()); +})(); </script> {% endexample %} @@ -1004,8 +1008,8 @@ Here's how it works: - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser. - We hide the default file `<input>` via `opacity`. -- We use `:after` to generate a custom background and directive (*Choose file...*). -- We use `:before` to generate and position the *Browse* button. +- We use `::after` to generate a custom background and directive (*Choose file...*). +- We use `::before` to generate and position the *Browse* button. - We declare a `height` on the `<input>` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index c13157db2..231adc906 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -50,7 +50,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon1"> </div> <br> -<div class="input-group"> +<div class="input-group input-group-sm"> <span class="input-group-addon" id="sizing-addon2">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2"> </div> @@ -132,7 +132,7 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen </div> <br> <div class="row"> - <div class="col-lg-offset-3 col-lg-6"> + <div class="col-lg-6 offset-lg-3"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Hate it</button> diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md index 4fea041f7..1a2796588 100644 --- a/docs/4.0/components/list-group.md +++ b/docs/4.0/components/list-group.md @@ -56,7 +56,7 @@ Be sure to **not use the standard `.btn` classes here**. {% example html %} <div class="list-group"> - <a href="#" class="list-group-item active"> + <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> @@ -115,15 +115,15 @@ Add badges to any list group item to show unread counts, activity, and more with <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio - <span class="badge badge-default badge-pill">14</span> + <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in - <span class="badge badge-default badge-pill">2</span> + <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus - <span class="badge badge-default badge-pill">1</span> + <span class="badge badge-primary badge-pill">1</span> </li> </ul> {% endexample %} @@ -244,7 +244,7 @@ You can activate a list group navigation without writing any JavaScript by simpl Enable tabbable list item via JavaScript (each list item needs to be activated individually): {% highlight js %} -$('#myList a').click(function (e) { +$('#myList a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index 587a2b632..491bd3fb8 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -15,19 +15,16 @@ Before getting started with Bootstrap's modal component, be sure to read the fol - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. - Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details. -- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript. - -Keep reading for demos and usage guidelines. - - - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: {% highlight js %} $('#myModal').on('shown.bs.modal', function () { - $('#myInput').focus() + $('#myInput').trigger('focus') }) {% endhighlight %} +Keep reading for demos and usage guidelines. + ## Examples ### Modal components @@ -35,7 +32,7 @@ $('#myModal').on('shown.bs.modal', function () { Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. <div class="bd-example bd-example-modal"> - <div class="modal"> + <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -57,7 +54,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee </div> {% highlight html %} -<div class="modal"> +<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -425,7 +422,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a {% highlight html %} <!-- Large modal --> -<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index d3d005e52..f303aa2bc 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -51,7 +51,7 @@ Here's an example of all the sub-components included in a responsive light-theme </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -70,7 +70,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as <!-- As a heading --> <nav class="navbar navbar-light bg-light"> - <span class="h1" class="navbar-brand mb-0">Navbar</span> + <span class="navbar-brand mb-0 h1">Navbar</span> </nav> {% endexample %} @@ -165,7 +165,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> @@ -186,7 +186,7 @@ Place various form controls and components within a navbar with `.form-inline`. {% example html %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -198,7 +198,7 @@ Align the contents of your inline forms with utilities as needed. <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> @@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -322,8 +322,8 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> @@ -350,7 +350,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="form-inline"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -395,7 +395,7 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).** +Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).** {% example html %} <nav class="navbar navbar-light bg-light"> @@ -452,7 +452,7 @@ With no `.navbar-brand` shown in lowest breakpoint: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -481,7 +481,7 @@ With a brand name shown on the left and toggler on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> @@ -510,7 +510,7 @@ With a toggler on the left and brand name on the right: </li> </ul> <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index 845024c3d..b34f79c2f 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -297,24 +297,22 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. +If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). + Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). +Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies. + <div class="bd-example bd-example-tabs"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -324,38 +322,28 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> - <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab"> + <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> - <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab"> - <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> - </div> </div> </div> {% highlight html %} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> - <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div> - <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div> + <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div> {% endhighlight %} @@ -363,17 +351,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as <div class="bd-example bd-example-tabs"> <nav class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a> - <div class="dropdown"> - <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> - <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> - </div> - </div> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> @@ -382,34 +362,22 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p> </div> - <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab"> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p> </div> - <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab"> - <p>Proident incididunt esse qui ea nisi ullamco aliquip nostrud velit sint duis. Aute culpa aute cillum sit consectetur mollit minim non reprehenderit tempor. Occaecat amet consectetur aute esse ad ullamco ad commodo mollit reprehenderit esse in consequat. Mollit minim do consectetur pariatur irure non id ea dolore occaecat adipisicing consectetur est aute magna non.</p> - </div> </div> </div> {% highlight html %} <nav class="nav nav-tabs" id="myTab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a> - <div class="dropdown"> - <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">@fat</a> - <a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">@mdo</a> - </div> - </div> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> - <div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">...</div> - <div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">...</div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> {% endhighlight %} @@ -418,17 +386,13 @@ The tabs plugin also works with pills. <div class="bd-example bd-example-tabs"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a> - <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -438,36 +402,28 @@ The tabs plugin also works with pills. <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p> </div> - <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab"> + <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p> </div> - <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab"> - <p>Tempor anim aliquip qui nisi sit minim ex in cupidatat ipsum adipisicing. Ad non magna anim id ullamco do dolor sit adipisicing nulla exercitation. Qui Lorem eiusmod sint in laboris pariatur est adipisicing non sunt occaecat in mollit culpa sit. Aliquip id duis do do quis mollit ut duis. Non dolor reprehenderit do esse nostrud deserunt non eiusmod minim anim sit voluptate ipsum. Nulla elit aliqua do sunt labore velit anim nisi dolor nostrud consectetur fugiat ex qui velit ex tempor. Do cillum qui anim aliquip id cillum duis ex laboris tempor incididunt sint dolor ullamco tempor. Fugiat laboris enim anim veniam aliquip cillum irure.</p> - </div> </div> </div> {% highlight html %} <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a> - <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a> - </div> + <li class="nav-item"> + <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> - <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">...</div> - <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">...</div> + <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div> {% endhighlight %} @@ -476,11 +432,11 @@ And with vertical pills. <div class="bd-example bd-example-tabs"> <div class="row"> <div class="col-3"> - <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a> + <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> + <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <div class="col-9"> @@ -503,11 +459,11 @@ And with vertical pills. </div> {% highlight html %} -<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a> +<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> + <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> @@ -525,25 +481,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> + <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> + <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel">...</div> - <div class="tab-pane" id="profile" role="tabpanel">...</div> - <div class="tab-pane" id="messages" role="tabpanel">...</div> - <div class="tab-pane" id="settings" role="tabpanel">...</div> + <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> {% endhighlight %} @@ -552,7 +508,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp Enable tabbable tabs via JavaScript (each tab needs to be activated individually): {% highlight js %} -$('#myTab a').click(function (e) { +$('#myTab a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) @@ -573,10 +529,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a {% highlight html %} <div class="tab-content"> - <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> - <div class="tab-pane fade" id="profile" role="tabpanel">...</div> - <div class="tab-pane fade" id="messages" role="tabpanel">...</div> - <div class="tab-pane fade" id="settings" role="tabpanel">...</div> + <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> {% endhighlight %} @@ -592,24 +548,24 @@ Activates a tab element and content container. Tab should have either a `data-ta {% highlight html %} <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> + <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> - <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> + <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel">...</div> - <div class="tab-pane" id="profile" role="tabpanel">...</div> - <div class="tab-pane" id="messages" role="tabpanel">...</div> - <div class="tab-pane" id="settings" role="tabpanel">...</div> + <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> + <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> <script> diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md index e26c4a902..b8356b0d2 100644 --- a/docs/4.0/components/popovers.md +++ b/docs/4.0/components/popovers.md @@ -11,8 +11,9 @@ toc: true Things to know when using the popover plugin: -- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for popovers to work! +- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work! - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency. +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -150,7 +151,6 @@ $('.popover-dismiss').popover({ {% endhighlight %} - ## Usage Enable popovers via JavaScript: @@ -179,7 +179,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>container</td> - <td>string | false</td> + <td>string | element | false</td> <td>false</td> <td> <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> @@ -221,7 +221,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>selector</td> - <td>string</td> + <td>string | false</td> <td>false</td> <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> </tr> @@ -305,7 +305,6 @@ Toggles an element's popover. **Returns to the caller before the popover has act Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. - {% highlight js %}$('#element').popover('dispose'){% endhighlight %} #### `.popover('enable')` @@ -360,7 +359,7 @@ Updates the position of an element's popover. </tr> <tr> <td>inserted.bs.popover</td> - <td>This event is fired after the <code>show.bs.popover</code> event when the tooltip template has been added to the DOM.</td> + <td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td> </tr> </tbody> </table> diff --git a/docs/4.0/components/progress.md b/docs/4.0/components/progress.md index 4cbc333aa..07217d939 100644 --- a/docs/4.0/components/progress.md +++ b/docs/4.0/components/progress.md @@ -55,14 +55,14 @@ Add labels to your progress bars by placing text within the `.progress-bar`. ## Height -We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. +We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. {% example html %} -<div class="progress"> - <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +<div class="progress" style="height: 1px;"> + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> -<div class="progress"> - <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> +<div class="progress" style="height: 20px;"> + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> {% endexample %} diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md index 9e09fd761..b7f9e994f 100644 --- a/docs/4.0/components/scrollspy.md +++ b/docs/4.0/components/scrollspy.md @@ -10,6 +10,7 @@ toc: true Scrollspy has a few requirements to function properly: +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/). - Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`. - When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied. @@ -315,13 +316,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tbody> <tr> <td>activate.bs.scrollspy</td> - <td>This event fires whenever a new item becomes activated by the scrollspy.</td> + <td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td> </tr> </tbody> </table> {% highlight js %} -$('#myScrollspy').on('activate.bs.scrollspy', function () { +$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // do something… }) {% endhighlight %} diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md index 36fd3908f..d3598048d 100644 --- a/docs/4.0/components/tooltips.md +++ b/docs/4.0/components/tooltips.md @@ -10,7 +10,8 @@ toc: true Things to know when using the tooltip plugin: -- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for tooltips to work! +- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work! +- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips with zero-length titles are never displayed. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -200,7 +201,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>selector</td> - <td>string</td> + <td>string | false</td> <td>false</td> <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> </tr> diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index aa6fe4bcc..4601dcc6d 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). <div class="bd-example bd-example-images"> <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> @@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc <img src="..." class="rounded" alt="..."> </div> {% endhighlight %} + + +## Picture + +If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag. + +{% highlight html %} +<picture> + <source srcset="..." type="image/svg+xml"> + <img src="..." class="img-fluid img-thumbnail" alt="..."> +</picture> +{% endhighlight %} diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 7565bb41a..58d6b201b 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -22,9 +22,9 @@ Here are our guidelines and reasons for choosing what to override in Reboot: The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: -- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. +- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. -- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. +- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. ## Native font stack @@ -35,8 +35,6 @@ The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped i $font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, - // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android - system-ui, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows @@ -44,7 +42,9 @@ $font-family-sans-serif: // Android "Roboto", // Basic web fallback - "Helvetica Neue", Arial, sans-serif !default; + "Helvetica Neue", Arial, sans-serif, + // Emoji fonts + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; {% endhighlight %} This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. @@ -330,7 +330,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra ## HTML5 `[hidden]` attribute -HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. {% highlight html %} <input type="text" hidden> @@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o {% callout warning %} #### jQuery incompatibility -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index db05e8378..59bdb6373 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot <table class="table"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -45,16 +45,16 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot </table> {% endexample %} -You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`. +You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. {% example html %} -<table class="table table-inverse"> +<table class="table table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -82,16 +82,16 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta ## Table head options -Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray. +Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray. {% example html %} <table class="table"> - <thead class="thead-inverse"> + <thead class="thead-dark"> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -117,12 +117,12 @@ Similar to default and inverse tables, use one of two modifier classes to make ` </table> <table class="table"> - <thead class="thead-default"> + <thead class="thead-light"> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` <table class="table table-striped"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -186,13 +186,13 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` {% endexample %} {% example html %} -<table class="table table-striped table-inverse"> +<table class="table table-striped table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells. <table class="table table-bordered"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -261,13 +261,13 @@ Add `.table-bordered` for borders on all sides of the table and cells. {% endexample %} {% example html %} -<table class="table table-bordered table-inverse"> +<table class="table table-bordered table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. <table class="table table-hover"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -335,13 +335,13 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. {% endexample %} {% example html %} -<table class="table table-hover table-inverse"> +<table class="table table-hover table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. <table class="table table-sm"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -403,13 +403,13 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. {% endexample %} {% example html %} -<table class="table table-sm table-inverse"> +<table class="table table-sm table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells. <table class="table"> <thead> <tr> - <th>Type</th> - <th>Column heading</th> - <th>Column heading</th> - <th>Column heading</th> + <th scope="col">Type</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> </tr> </thead> <tbody> @@ -487,16 +487,16 @@ Use contextual classes to color table rows or individual cells. </tr> {% endhighlight %} -Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. +Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. <div class="bd-example"> - <table class="table table-inverse"> + <table class="table table-dark"> <thead> <tr> - <th>#</th> - <th>Column heading</th> - <th>Column heading</th> - <th>Column heading</th> + <th scope="col">#</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> </tr> </thead> <tbody> @@ -581,7 +581,9 @@ Regular table background variants are not available with the inverse table, howe ## Responsive tables -Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. +Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively. + +For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`. {% callout warning %} #### Vertical clipping/truncation @@ -593,13 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <table class="table table-responsive"> <thead> <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> + <th scope="col">#</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> </tr> </thead> <tbody> @@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> </tr> <tr> <th scope="row">2</th> @@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> </tr> <tr> <th scope="row">3</th> @@ -629,20 +640,23 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> </tr> </tbody> </table> - <table class="table table-bordered table-responsive"> + <table class="table table-bordered table-responsive-lg"> <thead> <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> + <th scope="col">#</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> </tr> </thead> <tbody> @@ -682,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ... </table> {% endhighlight %} + + +## Captions + +A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it. + +{% example html %} +<table class="table"> + <caption>List of users</caption> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 74ecbe614..d76070889 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -16,7 +16,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default). -These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. ## Headings @@ -297,24 +297,24 @@ Here's an example of it in practice. Choose whatever `font-size`s and media quer {% highlight scss %} html { - font-size: 14px; + font-size: 1rem; } @include media-breakpoint-up(sm) { html { - font-size: 16px; + font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { - font-size: 20px; + font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { - font-size: 28px; + font-size: 1.6rem; } } {% endhighlight %} diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html index 6e7b98597..f704b3f05 100644 --- a/docs/4.0/examples/album/index.html +++ b/docs/4.0/examples/album/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,90 +18,96 @@ <body> - <div class="collapse bg-dark" id="navbarHeader"> - <div class="container"> - <div class="row"> - <div class="col-sm-8 py-4"> - <h4 class="text-white">About</h4> - <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> - </div> - <div class="col-sm-4 py-4"> - <h4 class="text-white">Contact</h4> - <ul class="list-unstyled"> - <li><a href="#" class="text-white">Follow on Twitter</a></li> - <li><a href="#" class="text-white">Like on Facebook</a></li> - <li><a href="#" class="text-white">Email me</a></li> - </ul> + <header> + <div class="collapse bg-dark" id="navbarHeader"> + <div class="container"> + <div class="row"> + <div class="col-sm-8 py-4"> + <h4 class="text-white">About</h4> + <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> + </div> + <div class="col-sm-4 py-4"> + <h4 class="text-white">Contact</h4> + <ul class="list-unstyled"> + <li><a href="#" class="text-white">Follow on Twitter</a></li> + <li><a href="#" class="text-white">Like on Facebook</a></li> + <li><a href="#" class="text-white">Email me</a></li> + </ul> + </div> </div> </div> </div> - </div> - <div class="navbar navbar-dark bg-dark"> - <div class="container d-flex justify-content-between"> - <a href="#" class="navbar-brand">Album</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> + <div class="navbar navbar-dark bg-dark"> + <div class="container d-flex justify-content-between"> + <a href="#" class="navbar-brand">Album</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + </div> </div> - </div> + </header> - <section class="jumbotron text-center"> - <div class="container"> - <h1 class="jumbotron-heading">Album example</h1> - <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> - <p> - <a href="#" class="btn btn-primary">Main call to action</a> - <a href="#" class="btn btn-secondary">Secondary action</a> - </p> - </div> - </section> + <main role="main"> - <div class="album text-muted"> - <div class="container"> + <section class="jumbotron text-center"> + <div class="container"> + <h1 class="jumbotron-heading">Album example</h1> + <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> + <p> + <a href="#" class="btn btn-primary">Main call to action</a> + <a href="#" class="btn btn-secondary">Secondary action</a> + </p> + </div> + </section> - <div class="row"> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> + <div class="album text-muted"> + <div class="container"> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> + <div class="row"> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - </div> - <div class="card"> - <img data-src="holder.js/100px280/thumb" alt="Card image cap"> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> </div> - </div> + </div> </div> - </div> + + </main> <footer class="text-muted"> <div class="container"> @@ -119,14 +125,14 @@ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> + <script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../assets/js/vendor/holder.min.js"></script> <script> - $(function () { - Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" }); + Holder.addTheme('thumb', { + bg: '#55595c', + fg: '#eceeef', + text: 'Thumbnail' }); </script> - <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css index 5fed56424..6eda0a7b1 100644 --- a/docs/4.0/examples/blog/blog.css +++ b/docs/4.0/examples/blog/blog.css @@ -20,7 +20,7 @@ h4, .h4, h5, .h5, h6, .h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; + font-weight: 400; color: #333; } @@ -41,8 +41,7 @@ h6, .h6 { .blog-masthead { margin-bottom: 3rem; background-color: #428bca; - -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); - box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); + box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); } /* Nav links */ @@ -62,7 +61,7 @@ h6, .h6 { .nav-link.active { color: #fff; } -.nav-link.active:after { +.nav-link.active::after { position: absolute; bottom: 0; left: 50%; @@ -89,7 +88,7 @@ h6, .h6 { .blog-title { margin-bottom: 0; font-size: 2rem; - font-weight: normal; + font-weight: 400; } .blog-description { font-size: 1.1rem; @@ -110,7 +109,6 @@ h6, .h6 { /* Sidebar modules for boxing content */ .sidebar-module { padding: 1rem; - /*margin: 0 -1rem 1rem;*/ } .sidebar-module-inset { padding: 1rem; diff --git a/docs/4.0/examples/blog/index.html b/docs/4.0/examples/blog/index.html index 8b2a97f66..2257cef95 100644 --- a/docs/4.0/examples/blog/index.html +++ b/docs/4.0/examples/blog/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,26 +18,28 @@ <body> - <div class="blog-masthead"> - <div class="container"> - <nav class="nav"> - <a class="nav-link active" href="#">Home</a> - <a class="nav-link" href="#">New features</a> - <a class="nav-link" href="#">Press</a> - <a class="nav-link" href="#">New hires</a> - <a class="nav-link" href="#">About</a> - </nav> + <header> + <div class="blog-masthead"> + <div class="container"> + <nav class="nav"> + <a class="nav-link active" href="#">Home</a> + <a class="nav-link" href="#">New features</a> + <a class="nav-link" href="#">Press</a> + <a class="nav-link" href="#">New hires</a> + <a class="nav-link" href="#">About</a> + </nav> + </div> </div> - </div> - <div class="blog-header"> - <div class="container"> - <h1 class="blog-title">The Bootstrap Blog</h1> - <p class="lead blog-description">An example blog template built with Bootstrap.</p> + <div class="blog-header"> + <div class="container"> + <h1 class="blog-title">The Bootstrap Blog</h1> + <p class="lead blog-description">An example blog template built with Bootstrap.</p> + </div> </div> - </div> + </header> - <div class="container"> + <main role="main" class="container"> <div class="row"> @@ -109,7 +111,7 @@ </div><!-- /.blog-main --> - <div class="col-sm-3 offset-sm-1 blog-sidebar"> + <aside class="col-sm-3 ml-sm-auto blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> @@ -139,14 +141,14 @@ <li><a href="#">Facebook</a></li> </ol> </div> - </div><!-- /.blog-sidebar --> + </aside><!-- /.blog-sidebar --> </div><!-- /.row --> - </div><!-- /.container --> + </main><!-- /.container --> <footer class="blog-footer"> - <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> @@ -160,7 +162,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/carousel/carousel.css b/docs/4.0/examples/carousel/carousel.css index 5fbdea52e..f9b5a7e49 100644 --- a/docs/4.0/examples/carousel/carousel.css +++ b/docs/4.0/examples/carousel/carousel.css @@ -18,8 +18,8 @@ body { } /* Since positioning the image, we need to help out the caption */ .carousel-caption { - z-index: 10; bottom: 3rem; + z-index: 10; } /* Declare heights because of positioning of img element */ @@ -45,7 +45,7 @@ body { text-align: center; } .marketing h2 { - font-weight: normal; + font-weight: 400; } .marketing .col-lg-4 p { margin-right: .75rem; diff --git a/docs/4.0/examples/carousel/index.html b/docs/4.0/examples/carousel/index.html index 3b0b692f5..32bc81e5c 100644 --- a/docs/4.0/examples/carousel/index.html +++ b/docs/4.0/examples/carousel/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,158 +17,164 @@ </head> <body> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Carousel</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="collapse navbar-collapse" id="navbarCollapse"> - <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> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#">Disabled</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> - - <div id="myCarousel" class="carousel slide" data-ride="carousel"> - <ol class="carousel-indicators"> - <li data-target="#myCarousel" data-slide-to="0" class="active"></li> - <li data-target="#myCarousel" data-slide-to="1"></li> - <li data-target="#myCarousel" data-slide-to="2"></li> - </ol> - <div class="carousel-inner"> - <div class="carousel-item active"> - <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block text-left"> - <h1>Example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + <header> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Carousel</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <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> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> + + <main role="main"> + + <div id="myCarousel" class="carousel slide" data-ride="carousel"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> + <div class="carousel-inner"> + <div class="carousel-item active"> + <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> + <div class="container"> + <div class="carousel-caption text-left"> + <h1>Example headline.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + </div> </div> </div> - </div> - <div class="carousel-item"> - <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block"> - <h1>Another example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + <div class="carousel-item"> + <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> + <div class="container"> + <div class="carousel-caption"> + <h1>Another example headline.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + </div> </div> </div> - </div> - <div class="carousel-item"> - <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> - <div class="container"> - <div class="carousel-caption d-none d-md-block text-right"> - <h1>One more for good measure.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + <div class="carousel-item"> + <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> + <div class="container"> + <div class="carousel-caption text-right"> + <h1>One more for good measure.</h1> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + </div> </div> </div> </div> - </div> - <a class="carousel-control-prev" href="#myCarousel" 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-next" href="#myCarousel" role="button" data-slide="next"> - <span class="carousel-control-next-icon" aria-hidden="true"></span> - <span class="sr-only">Next</span> - </a> - </div> - - - <!-- Marketing messaging and featurettes - ================================================== --> - <!-- Wrap the rest of the page in another container to center all the content. --> - - <div class="container marketing"> - - <!-- Three columns of text below the carousel --> - <div class="row"> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - <div class="col-lg-4"> - <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div><!-- /.col-lg-4 --> - </div><!-- /.row --> - - - <!-- START THE FEATURETTES --> - - <hr class="featurette-divider"> - - <div class="row featurette"> - <div class="col-md-7"> - <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> - </div> - <div class="col-md-5"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> - </div> + <a class="carousel-control-prev" href="#myCarousel" 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-next" href="#myCarousel" role="button" data-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a> </div> - <hr class="featurette-divider"> - <div class="row featurette"> - <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> - </div> - <div class="col-md-5 order-md-1"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + + <!-- START THE FEATURETTES --> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - </div> - <hr class="featurette-divider"> + <hr class="featurette-divider"> - <div class="row featurette"> - <div class="col-md-7"> - <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <div class="row featurette"> + <div class="col-md-7 order-md-2"> + <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5 order-md-1"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - <div class="col-md-5"> - <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> + <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + </div> + <div class="col-md-5"> + <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> - </div> - <hr class="featurette-divider"> + <hr class="featurette-divider"> + + <!-- /END THE FEATURETTES --> - <!-- /END THE FEATURETTES --> + </div><!-- /.container --> <!-- FOOTER --> - <footer> + <footer class="container"> <p class="float-right"><a href="#">Back to top</a></p> <p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> - </div><!-- /.container --> + </main> <!-- Bootstrap core JavaScript @@ -180,7 +186,5 @@ <script src="../../../../dist/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="../../../../assets/js/vendor/holder.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/cover/cover.css b/docs/4.0/examples/cover/cover.css index 8a89cde53..2b208671b 100644 --- a/docs/4.0/examples/cover/cover.css +++ b/docs/4.0/examples/cover/cover.css @@ -41,8 +41,7 @@ body { width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; - -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5); - box-shadow: inset 0 0 5rem rgba(0,0,0,.5); + box-shadow: inset 0 0 5rem rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; @@ -73,7 +72,7 @@ body { .nav-masthead .nav-link { padding: .25rem 0; - font-weight: bold; + font-weight: 700; color: rgba(255,255,255,.5); background-color: transparent; border-bottom: .25rem solid transparent; @@ -112,7 +111,7 @@ body { } .cover .btn-lg { padding: .75rem 1.25rem; - font-weight: bold; + font-weight: 700; } @@ -139,10 +138,12 @@ body { position: fixed; bottom: 0; } + /* Start the vertical centering */ .site-wrapper-inner { vertical-align: middle; } + /* Handle the widths */ .masthead, .mastfoot, diff --git a/docs/4.0/examples/cover/index.html b/docs/4.0/examples/cover/index.html index d17e85446..47cbc3edf 100644 --- a/docs/4.0/examples/cover/index.html +++ b/docs/4.0/examples/cover/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,7 +24,7 @@ <div class="cover-container"> - <div class="masthead clearfix"> + <header class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">Cover</h3> <nav class="nav nav-masthead"> @@ -33,21 +33,21 @@ <a class="nav-link" href="#">Contact</a> </nav> </div> - </div> + </header> - <div class="inner cover"> + <main role="main" class="inner cover"> <h1 class="cover-heading">Cover your page.</h1> <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> <p class="lead"> <a href="#" class="btn btn-lg btn-secondary">Learn more</a> </p> - </div> + </main> - <div class="mastfoot"> + <footer class="mastfoot"> <div class="inner"> - <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> - </div> + </footer> </div> @@ -62,7 +62,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css index b1248cd68..a59005148 100644 --- a/docs/4.0/examples/dashboard/dashboard.css +++ b/docs/4.0/examples/dashboard/dashboard.css @@ -12,8 +12,8 @@ body { */ h1 { - margin-bottom: 20px; padding-bottom: 9px; + margin-bottom: 20px; border-bottom: 1px solid #eee; } @@ -35,8 +35,8 @@ h1 { /* Sidebar navigation */ .sidebar { - padding-left: 0; padding-right: 0; + padding-left: 0; } .sidebar .nav { @@ -59,7 +59,7 @@ h1 { * Dashboard */ - /* Placeholders */ +/* Placeholders */ .placeholders { padding-bottom: 3rem; } diff --git a/docs/4.0/examples/dashboard/index.html b/docs/4.0/examples/dashboard/index.html index 79f871030..ece8fd595 100644 --- a/docs/4.0/examples/dashboard/index.html +++ b/docs/4.0/examples/dashboard/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,33 +17,35 @@ </head> <body> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Dashboard</a> - <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> + <header> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Dashboard</a> + <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <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> - <li class="nav-item"> - <a class="nav-link" href="#">Settings</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Profile</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Help</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> + <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <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> + <li class="nav-item"> + <a class="nav-link" href="#">Settings</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Profile</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Help</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> <div class="container-fluid"> <div class="row"> @@ -91,7 +93,7 @@ </ul> </nav> - <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> + <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3"> <h1>Dashboard</h1> <section class="row text-center placeholders"> @@ -256,7 +258,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/grid/index.html b/docs/4.0/examples/grid/index.html index c87b91ac7..0be50f816 100644 --- a/docs/4.0/examples/grid/index.html +++ b/docs/4.0/examples/grid/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -131,11 +131,5 @@ </div> </div> <!-- /container --> - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/index.md b/docs/4.0/examples/index.md index dd52fe9bd..344d5be30 100644 --- a/docs/4.0/examples/index.md +++ b/docs/4.0/examples/index.md @@ -1,8 +1,8 @@ --- layout: simple title: Examples -redirect_from: - - /examples/ +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +redirect_from: "/examples/" --- [Download the Bootstrap source code]({{ site.download.source }}) to snag these examples. diff --git a/docs/4.0/examples/jumbotron/index.html b/docs/4.0/examples/jumbotron/index.html index 2defd4882..a6a64cd26 100644 --- a/docs/4.0/examples/jumbotron/index.html +++ b/docs/4.0/examples/jumbotron/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,42 +51,46 @@ </div> </nav> - <!-- Main jumbotron for a primary marketing message or call to action --> - <div class="jumbotron"> - <div class="container"> - <h1 class="display-3">Hello, world!</h1> - <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> - <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> - </div> - </div> + <main role="main"> - <div class="container"> - <!-- Example row of columns --> - <div class="row"> - <div class="col-md-4"> - <h2>Heading</h2> - <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div> - <div class="col-md-4"> - <h2>Heading</h2> - <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> - </div> - <div class="col-md-4"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <!-- Main jumbotron for a primary marketing message or call to action --> + <div class="jumbotron"> + <div class="container"> + <h1 class="display-3">Hello, world!</h1> + <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> + <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> </div> </div> - <hr> + <div class="container"> + <!-- Example row of columns --> + <div class="row"> + <div class="col-md-4"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + <div class="col-md-4"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + <div class="col-md-4"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + </div> + </div> + + <hr> + + </div> <!-- /container --> - <footer> - <p>© Company 2017</p> - </footer> - </div> <!-- /container --> + </main> + <footer class="container"> + <p>© Company 2017</p> + </footer> <!-- Bootstrap core JavaScript ================================================== --> @@ -95,7 +99,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/justified-nav/index.html b/docs/4.0/examples/justified-nav/index.html index c05c9a221..495332195 100644 --- a/docs/4.0/examples/justified-nav/index.html +++ b/docs/4.0/examples/justified-nav/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,7 +20,7 @@ <div class="container"> - <div class="masthead"> + <header class="masthead"> <h3 class="text-muted">Project name</h3> <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3"> @@ -55,33 +55,37 @@ </ul> </div> </nav> - </div> + </header> - <!-- Jumbotron --> - <div class="jumbotron"> - <h1>Marketing stuff!</h1> - <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p> - <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p> - </div> + <main role="main"> - <!-- Example row of columns --> - <div class="row"> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + <!-- Jumbotron --> + <div class="jumbotron"> + <h1>Marketing stuff!</h1> + <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p> + <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p> </div> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> - </div> - <div class="col-lg-4"> - <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> - <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + + <!-- Example row of columns --> + <div class="row"> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> + <div class="col-lg-4"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> + <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> + </div> </div> - </div> + + </main> <!-- Site footer --> <footer class="footer"> @@ -98,7 +102,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/justified-nav/justified-nav.css b/docs/4.0/examples/justified-nav/justified-nav.css index 2f6de026e..0ca9aabb5 100644 --- a/docs/4.0/examples/justified-nav/justified-nav.css +++ b/docs/4.0/examples/justified-nav/justified-nav.css @@ -20,26 +20,19 @@ body { } .navbar { - background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee)); - background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%); - background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%); background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%); border: 1px solid #e5e5e5; } @media (min-width: 768px) { .navbar-nav { - display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; } .navbar-nav .nav-item { - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } } diff --git a/docs/4.0/examples/narrow-jumbotron/index.html b/docs/4.0/examples/narrow-jumbotron/index.html index 303470bb3..19ef46506 100644 --- a/docs/4.0/examples/narrow-jumbotron/index.html +++ b/docs/4.0/examples/narrow-jumbotron/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,7 +19,7 @@ <body> <div class="container"> - <div class="header clearfix"> + <header class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> @@ -34,48 +34,46 @@ </ul> </nav> <h3 class="text-muted">Project name</h3> - </div> + </header> - <div class="jumbotron"> - <h1 class="display-3">Jumbotron heading</h1> - <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> - </div> + <main role="main"> - <div class="row marketing"> - <div class="col-lg-6"> - <h4>Subheading</h4> - <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> + <div class="jumbotron"> + <h1 class="display-3">Jumbotron heading</h1> + <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> + </div> - <h4>Subheading</h4> - <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + <div class="row marketing"> + <div class="col-lg-6"> + <h4>Subheading</h4> + <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> - <h4>Subheading</h4> - <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> - </div> + <h4>Subheading</h4> + <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + + <h4>Subheading</h4> + <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + </div> - <div class="col-lg-6"> - <h4>Subheading</h4> - <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> + <div class="col-lg-6"> + <h4>Subheading</h4> + <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> - <h4>Subheading</h4> - <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> + <h4>Subheading</h4> + <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> - <h4>Subheading</h4> - <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + <h4>Subheading</h4> + <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> + </div> </div> - </div> + + </main> <footer class="footer"> <p>© Company 2017</p> </footer> </div> <!-- /container --> - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css index 28cf77381..dc4cf6c21 100644 --- a/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css +++ b/docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css @@ -17,6 +17,7 @@ body { padding-bottom: 1rem; border-bottom: .05rem solid #e5e5e5; } + /* Make the masthead heading the same height as the navigation */ .header h3 { margin-top: 0; @@ -68,10 +69,12 @@ body { padding-right: 0; padding-left: 0; } + /* Space out the masthead */ .header { margin-bottom: 2rem; } + /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; diff --git a/docs/4.0/examples/navbar-top-fixed/index.html b/docs/4.0/examples/navbar-top-fixed/index.html index 0906a8407..54e56fc48 100644 --- a/docs/4.0/examples/navbar-top-fixed/index.html +++ b/docs/4.0/examples/navbar-top-fixed/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,13 +42,13 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> - </div> + </main> <!-- Bootstrap core JavaScript @@ -58,7 +58,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbar-top/index.html b/docs/4.0/examples/navbar-top/index.html index 2d4cc46ab..3aeb45a8a 100644 --- a/docs/4.0/examples/navbar-top/index.html +++ b/docs/4.0/examples/navbar-top/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,13 +42,13 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="jumbotron"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> </div> - </div> + </main> <!-- Bootstrap core JavaScript @@ -58,7 +58,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbars/index.html b/docs/4.0/examples/navbars/index.html index 41299b523..297b8912f 100644 --- a/docs/4.0/examples/navbars/index.html +++ b/docs/4.0/examples/navbars/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -322,16 +322,18 @@ </div> </nav> - <div class="jumbotron"> - <div class="col-sm-8 mx-auto"> - <h1>Navbar examples</h1> - <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> - <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> - <p> - <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> - </p> + <main role="main"> + <div class="jumbotron"> + <div class="col-sm-8 mx-auto"> + <h1>Navbar examples</h1> + <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> + <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> + <p> + <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> + </p> + </div> </div> - </div> + </main> </div> @@ -342,7 +344,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/navbars/navbar.css b/docs/4.0/examples/navbars/navbar.css index 04f8c6b7f..70d209409 100644 --- a/docs/4.0/examples/navbars/navbar.css +++ b/docs/4.0/examples/navbars/navbar.css @@ -1,5 +1,4 @@ body { - /*padding-top: 20px;*/ padding-bottom: 20px; } diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html index d4e6be368..c3ba9694c 100644 --- a/docs/4.0/examples/offcanvas/index.html +++ b/docs/4.0/examples/offcanvas/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,7 +51,7 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="row row-offcanvas row-offcanvas-right"> @@ -115,11 +115,11 @@ <hr> - <footer> - <p>© Company 2017</p> - </footer> + </main><!--/.container--> - </div><!--/.container--> + <footer> + <p>© Company 2017</p> + </footer> <!-- Bootstrap core JavaScript @@ -129,8 +129,6 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="offcanvas.js"></script> </body> </html> diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css index 6047cb304..1c9ca3b44 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.css +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -20,9 +20,7 @@ footer { @media screen and (max-width: 767px) { .row-offcanvas { position: relative; - -webkit-transition: all .25s ease-out; - -o-transition: all .25s ease-out; - transition: all .25s ease-out; + transition: all .25s ease-out; } .row-offcanvas-right { @@ -33,23 +31,19 @@ footer { left: 0; } - .row-offcanvas-right - .sidebar-offcanvas { + .row-offcanvas-right .sidebar-offcanvas { right: -100%; /* 12 columns */ } - .row-offcanvas-right.active - .sidebar-offcanvas { + .row-offcanvas-right.active .sidebar-offcanvas { right: -50%; /* 6 columns */ } - .row-offcanvas-left - .sidebar-offcanvas { + .row-offcanvas-left .sidebar-offcanvas { left: -100%; /* 12 columns */ } - .row-offcanvas-left.active - .sidebar-offcanvas { + .row-offcanvas-left.active .sidebar-offcanvas { left: -50%; /* 6 columns */ } diff --git a/docs/4.0/examples/offcanvas/offcanvas.js b/docs/4.0/examples/offcanvas/offcanvas.js index d14cd68b8..a41847081 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.js +++ b/docs/4.0/examples/offcanvas/offcanvas.js @@ -1,5 +1,7 @@ -$(document).ready(function () { - $('[data-toggle="offcanvas"]').click(function () { +$(function () { + 'use strict' + + $('[data-toggle="offcanvas"]').on('click', function () { $('.row-offcanvas').toggleClass('active') - }); -}); + }) +}) diff --git a/docs/4.0/examples/signin/index.html b/docs/4.0/examples/signin/index.html index 237f62066..0416d78b6 100644 --- a/docs/4.0/examples/signin/index.html +++ b/docs/4.0/examples/signin/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -35,12 +35,5 @@ </form> </div> <!-- /container --> - - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/signin/signin.css b/docs/4.0/examples/signin/signin.css index 7c1fa4190..516aeb126 100644 --- a/docs/4.0/examples/signin/signin.css +++ b/docs/4.0/examples/signin/signin.css @@ -14,13 +14,12 @@ body { margin-bottom: 10px; } .form-signin .checkbox { - font-weight: normal; + font-weight: 400; } .form-signin .form-control { position: relative; + box-sizing: border-box; height: auto; - -webkit-box-sizing: border-box; - box-sizing: border-box; padding: 10px; font-size: 16px; } diff --git a/docs/4.0/examples/starter-template/index.html b/docs/4.0/examples/starter-template/index.html index 30cceb071..660f521fa 100644 --- a/docs/4.0/examples/starter-template/index.html +++ b/docs/4.0/examples/starter-template/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -51,14 +51,14 @@ </div> </nav> - <div class="container"> + <main role="main" class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> - </div><!-- /.container --> + </main><!-- /.container --> <!-- Bootstrap core JavaScript @@ -68,7 +68,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer-navbar/index.html b/docs/4.0/examples/sticky-footer-navbar/index.html index dcf62fb59..63beed2a4 100644 --- a/docs/4.0/examples/sticky-footer-navbar/index.html +++ b/docs/4.0/examples/sticky-footer-navbar/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,39 +18,41 @@ <body> - <!-- Fixed navbar --> - <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> - <a class="navbar-brand" href="#">Fixed navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="collapse navbar-collapse" id="navbarCollapse"> - <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> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#">Disabled</a> - </li> - </ul> - <form class="form-inline mt-2 mt-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> - </div> - </nav> + <header> + <!-- Fixed navbar --> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Fixed navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <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> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + </header> <!-- Begin page content --> - <div class="container"> + <main role="main" class="container"> <div class="mt-3"> <h1>Sticky footer with fixed navbar</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> - </div> + </main> <footer class="footer"> <div class="container"> @@ -66,7 +68,5 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer/index.html b/docs/4.0/examples/sticky-footer/index.html index 5d00f5407..a3055bb59 100644 --- a/docs/4.0/examples/sticky-footer/index.html +++ b/docs/4.0/examples/sticky-footer/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,25 +19,18 @@ <body> <!-- Begin page content --> - <div class="container"> + <main role="main" class="container"> <div class="mt-1"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> - </div> + </main> <footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> - - - <!-- Bootstrap core JavaScript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/4.0/examples/sticky-footer/sticky-footer.css b/docs/4.0/examples/sticky-footer/sticky-footer.css index 46578d1a5..ebe29104f 100644 --- a/docs/4.0/examples/sticky-footer/sticky-footer.css +++ b/docs/4.0/examples/sticky-footer/sticky-footer.css @@ -5,15 +5,13 @@ html { min-height: 100%; } body { - /* Margin bottom by footer height */ - margin-bottom: 60px; + margin-bottom: 60px; /* Margin bottom by footer height */ } .footer { position: absolute; bottom: 0; width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; + height: 60px; /* Set the fixed height of the footer here */ line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } diff --git a/docs/4.0/examples/tooltip-viewport/index.html b/docs/4.0/examples/tooltip-viewport/index.html index ea31d7ccf..b5899d2e9 100644 --- a/docs/4.0/examples/tooltip-viewport/index.html +++ b/docs/4.0/examples/tooltip-viewport/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -18,19 +18,19 @@ <body> - <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> - <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> - <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> + <button type="button" class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> + <button type="button" class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> + <button type="button" class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> - <button class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button> + <button type="button" class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button> <div class="container-viewport"> - <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> - <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> + <button type="button" class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> + <button type="button" class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> - <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> + <button type="button" class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> - <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> + <button type="button" class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> </div> @@ -41,8 +41,6 @@ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script> - <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> - <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="tooltip-viewport.js"></script> </body> </html> diff --git a/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js b/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js index e87f4eec7..dc75e18c6 100644 --- a/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js +++ b/docs/4.0/examples/tooltip-viewport/tooltip-viewport.js @@ -1,18 +1,32 @@ -$(document).ready(function () { +$(function () { + 'use strict' + $('.tooltip-right').tooltip({ placement: 'right', - viewport: {selector: 'body', padding: 2} + viewport: { + selector: 'body', + padding: 2 + } }) $('.tooltip-bottom').tooltip({ placement: 'bottom', - viewport: {selector: 'body', padding: 2} + viewport: { + selector: 'body', + padding: 2 + } }) $('.tooltip-viewport-right').tooltip({ placement: 'right', - viewport: {selector: '.container-viewport', padding: 2} + viewport: { + selector: '.container-viewport', + padding: 2 + } }) $('.tooltip-viewport-bottom').tooltip({ placement: 'bottom', - viewport: {selector: '.container-viewport', padding: 2} + viewport: { + selector: '.container-viewport', + padding: 2 + } }) }) diff --git a/docs/4.0/extend/icons.md b/docs/4.0/extend/icons.md index 3b4aea3eb..4b2e79fd6 100644 --- a/docs/4.0/extend/icons.md +++ b/docs/4.0/extend/icons.md @@ -8,6 +8,7 @@ group: extend Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support. ## Preferred + We've tested and used these icon sets ourselves. - [Iconic](https://useiconic.com/open/) @@ -15,11 +16,13 @@ We've tested and used these icon sets ourselves. - [Entypo](http://www.entypo.com/) ## More options + While we haven't tried these out, they do look promising and provide multiple formats—including SVG. +- [Bytesize](https://github.com/danklammer/bytesize-icons) - [Google Material icons](https://material.io/icons/) - [Ionicons](http://ionicons.com/) -- [Feather](http://colebemis.com/feather/) +- [Feather](https://feathericons.com/) - [Dripicons](http://demo.amitjakhu.com/dripicons/) - [Ikons](http://ikons.piotrkwiatkowski.co.uk/) - [Glyph](http://glyph.smarticons.co/) diff --git a/docs/4.0/extend/index.md b/docs/4.0/extend/index.md index 27ecfa3bb..a87e06470 100644 --- a/docs/4.0/extend/index.md +++ b/docs/4.0/extend/index.md @@ -3,4 +3,4 @@ layout: docs title: Extend --- -todo: this entire page
\ No newline at end of file +todo: this entire page diff --git a/docs/4.0/getting-started/best-practices.md b/docs/4.0/getting-started/best-practices.md index 0e4792513..feb751cab 100644 --- a/docs/4.0/getting-started/best-practices.md +++ b/docs/4.0/getting-started/best-practices.md @@ -12,6 +12,7 @@ We've designed and developed Bootstrap to work in a number of environments. Here {% endcallout %} ### General outline + - Working with CSS - Working with Sass files - Building new CSS components diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index 426692b32..6ffb73792 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -1,7 +1,7 @@ --- layout: docs title: Browsers and devices -description: Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each. +description: Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each. group: getting-started toc: true --- @@ -101,32 +101,10 @@ For a list of some of the browser bugs that Bootstrap has to grapple with, see o ## Internet Explorer -Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features. +Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](https://caniuse.com/) for details on browser support of CSS3 and HTML5 features. **If you require IE8-9 support, use Bootstrap 3.** It's the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it. -## Internet Explorer 10 in Windows Phone 8 - -Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**. - -{% highlight js %} -// Copyright 2014-2017 The Bootstrap Authors -// Copyright 2014-2017 Twitter, Inc. -// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -if (navigator.userAgent.match(/IEMobile\/10\.0/)) { - var msViewportStyle = document.createElement('style') - msViewportStyle.appendChild( - document.createTextNode( - '@-ms-viewport{width:auto!important}' - ) - ) - document.head.appendChild(msViewportStyle) -} -{% endhighlight %} - -For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/). - -As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration. ## Modals and dropdowns on mobile @@ -147,6 +125,7 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds. ## Sticky `:hover`/`:focus` on mobile + Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable. Bootstrap includes a workaround for this, although it is disabled by default. By setting `$enable-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details. @@ -155,7 +134,7 @@ Bootstrap includes a workaround for this, although it is disabled by default. By Even in some modern browsers, printing can be quirky. -As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS: +As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868]({{ site.repo }}/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS: {% highlight css %} @media print { @@ -189,7 +168,7 @@ Want to see an example? [Check out this JS Bin demo.](http://jsbin.com/OyaqoDO/2 ## Validators -In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement. +In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com/) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement. These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings. diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md index dd3cac0be..64b032021 100644 --- a/docs/4.0/getting-started/build-tools.md +++ b/docs/4.0/getting-started/build-tools.md @@ -8,14 +8,14 @@ toc: true ## Tooling setup -Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. +Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: -1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies. -2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json). -4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins. - - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. +1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies. +2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). +3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins. + - **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems. When completed, you'll be able to run the various commands provided from the command line. @@ -24,7 +24,7 @@ When completed, you'll be able to run the various commands provided from the com ## Using NPM scripts -Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes the following commands and tasks: +Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) includes the following commands and tasks: | Task | Description | | --- | --- | @@ -36,7 +36,7 @@ Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) i Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. -We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.config.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.js) for details. +We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [/package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) for details. ## Local documentation diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 468575494..cce660178 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -1,42 +1,58 @@ --- layout: docs title: Download -description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Bower, RubyGems, and more. +description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. group: getting-started toc: true --- -## Bootstrap CSS and JS +## Compiled CSS and JS -**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files. +Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}** to easily drop into your project, which includes: -**Current version:** v{{ site.current_version}} +- Compiled and minified CSS bundles (default, grid-only, and Reboot-only) +- Compiled and minified JavaScript plugins -<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a> +This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js). + +<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a> ## Source files -**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup). + +Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling: + +- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS. +- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing + +Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. <a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> ## Bootstrap CDN -Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project. +Skip the download with the Bootstrap CDN to deliver cached version of Bootstrap's compiled CSS and JS to your project. {% highlight html %} <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} +If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it. + +{% highlight html %} +<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> +{% endhighlight %} + ## Package managers Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. ### npm -Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): +Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): -{% highlight bash %} +{% highlight sh %} npm install bootstrap@{{ site.current_version }} {% endhighlight %} @@ -52,36 +68,28 @@ Bootstrap's `package.json` contains some additional metadata under the following Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html): {% highlight ruby %} -gem 'bootstrap', '~> 4.0.0.alpha6' +gem 'bootstrap', '~> 4.0.0.beta' {% endhighlight %} Alternatively, if you're not using Bundler, you can install the gem by running this command: -{% highlight bash %} -gem install bootstrap -v 4.0.0.alpha6 +{% highlight sh %} +gem install bootstrap -v 4.0.0.beta {% endhighlight %} [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details. ### Composer -You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org): +You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/): -{% highlight bash %} +{% highlight sh %} composer require twbs/bootstrap:{{ site.current_version }} {% endhighlight %} -### Bower - -Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io). - -{% highlight bash %} -bower install bootstrap#v{{ site.current_version }} -{% endhighlight %} - ### NuGet -If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org): +If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/): {% highlight powershell %} Install-Package bootstrap -Pre diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 233c82883..8a3badc8d 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -10,21 +10,23 @@ redirect_from: toc: true --- -<!-- Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. --> - -<!-- Here's how to quickly get started with the Bootstrap CDN and a template starter page. --> - ## Quick start Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/) +### CSS + Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS. {% highlight html %} <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> {% endhighlight %} -Add our JavaScript plugins, jQuery, and Popper.js near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our code depends on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported. +### JS + +Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. + +We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> @@ -32,16 +34,32 @@ Add our JavaScript plugins, jQuery, and Popper.js near the end of your pages, ri <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -And that's it—you're on your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template. +Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. + +<details> +<summary class="text-primary mb-3">Show components requiring JavaScript</summary> +{% markdown %} +- Alerts for dismissing +- Buttons for toggling states and checkbox/radio functionality +- Carousel for all slide behaviors, controls, and indicators +- Collapse for toggling visibility of content +- Dropdowns for displaying and positioning (also requires [Popper.js](https://popper.js.org/)) +- Modals for displaying, positioning, and scroll behavior +- Navbar for extending our Collapse plugin to implement responsive behavior +- Tooltips and popovers for displaying and positioning (also requires [Popper.js](https://popper.js.org/)) +- Scrollspy for scroll behavior and navigation updates +{% endmarkdown %} +</details> ## Starter template Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this: {% highlight html %} -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> + <title>Hello, world!</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> @@ -52,7 +70,8 @@ Be sure to have your pages set up with the latest design and development standar <body> <h1>Hello, world!</h1> - <!-- jQuery first, then Popper.js, then Bootstrap JS. --> + <!-- Optional JavaScript --> + <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> @@ -71,7 +90,7 @@ Bootstrap employs a handful of important global styles and settings that you'll Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups. {% highlight html %} -<!DOCTYPE html> +<!doctype html> <html lang="en"> ... </html> @@ -99,7 +118,7 @@ On the rare occasion you need to override it, use something like the following: } {% endhighlight %} -With the above snippet, nested elements—including generated content via `:before` and `:after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`. +With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`. Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/). diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index c4fb2366a..648132255 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -1,7 +1,7 @@ --- layout: docs title: JavaScript -description: Bring Bootstrap to life with our JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more. +description: Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more. group: getting-started toc: true --- @@ -12,7 +12,9 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) ## Dependencies -Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported. +Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported. + +Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/). ## Data attributes @@ -34,7 +36,7 @@ $(document).off('.alert.data-api') Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action. -All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. +All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`. {% highlight js %} $('#myModal').on('show.bs.modal', function (e) { @@ -82,6 +84,7 @@ $('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the s {% endhighlight %} ### Default settings + You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object: {% highlight js %} @@ -117,6 +120,6 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d ## Util -All Bootstrap Javascript depend on `util.js` and it has to be included alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there. +All Bootstrap's JavaScript files depend on `util.js` and it has to be included alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there. `util.js` includes utility functions and a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions. diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md deleted file mode 100644 index 4788c847a..000000000 --- a/docs/4.0/getting-started/options.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: docs -title: Customization options -description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. -group: getting-started -toc: true ---- - -## Customizing variables - -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. - -For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following: - -{% highlight scss %} -$body-bg: $gray-900; -$body-color: $gray-600; -{% endhighlight %} - -Do the same for any variable you need to override, including the global options listed below. - -## Global options - -Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. - -You can find and customize these variables for key global options in our `_variables.scss` file. - -| Variable | Values | Description | -| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | -| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). | -| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | -| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | -| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | -| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | -| `$enable-hover-media-query` | `true` or `false` (default) | ... | -| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | -| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | - -## Color - -Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. - -### All colors - -All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. - -<div class="row"> - {% for color in site.data.colors %} - <div class="col-md-4"> - {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} - <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> - {% endunless %} - </div> - {% endfor %} -</div> - -Here's how you can use these in your Sass: - -{% highlight scss %} -// With variable -.alpha { color: $purple; } - -// From the Sass map with our `color()` function -.beta { color: color("purple"); } -{% endhighlight %} - -[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. - -{% callout info %} -In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. -{% endcallout %} - -### Theme colors - -We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. - -<div class="row"> - {% for color in site.data.theme-colors %} - <div class="col-md-4"> - <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> - </div> - {% endfor %} -</div> - -### Grays - -An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. - -<div class="row mb-3"> - <div class="col-md-4"> - {% for color in site.data.grays %} - <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> - {% endfor %} - </div> -</div> - -Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: - -{% highlight scss %} -$colors: ( - red: $red, - orange: $orange, - yellow: $yellow, - green: $green, - teal: $teal, - blue: $blue, - pink: $pink, - purple: $purple, - white: $white, - gray: $gray-600, - gray-dark: $gray-900 -) !default; -{% endhighlight %} - -Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md new file mode 100644 index 000000000..c4c50dc4b --- /dev/null +++ b/docs/4.0/getting-started/theming.md @@ -0,0 +1,287 @@ +--- +layout: docs +title: Theming Bootstrap +description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. +group: getting-started +toc: true +redirect_from: "/docs/4.0/getting-started/options/" +--- + +## Introduction + +In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our `dist` files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach. + +Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet anymore; instead, you can enable the built-in theme to add gradients, shadows, and more. + +## Sass + +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. + +### File structure + +Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you've downloaded our source files or are using package manager, you'll have a file structure that looks like this: + +{% highlight plaintext %} +your-project/ +├── scss +│ └── custom.scss +└── node_modules/ + └── bootstrap + ├── js + └── scss +{% endhighlight %} + +In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. + +{% highlight scss %} +// Custom.scss +// Option A: Include all of Bootstrap + +@import "node_modules/bootstrap/scss/bootstrap"; +{% endhighlight %} + +{% highlight scss %} +// Custom.scss +// Option B: Include parts of Bootstrap + +// Required +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; + +// Optional +@import "node_modules/bootstrap/scss/reboot"; +@import "node_modules/bootstrap/scss/type"; +@import "node_modules/bootstrap/scss/images"; +@import "node_modules/bootstrap/scss/code"; +@import "node_modules/bootstrap/scss/grid"; +{% endhighlight %} + +With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. + +### Variable defaults + +Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. + +Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. + +Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm: + +{% highlight scss %} +// Your variable overrides +$body-bg: #000; +$body-color: #111; + +// Bootstrap and its default variables +@import "node_modules/bootstrap/scss/bootstrap"; +{% endhighlight %} + +Repeat as necessary for any variable in Bootstrap, including the global options below. + +### Maps and loops + +Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. + +For example, to modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: + +{% highlight scss %} +$theme-colors: ( + "primary": #0074d9, + "danger": #ff4136 +); +{% endhighlight %} + +To add a new color to `$theme-colors`, add the new key and value: + +{% highlight scss %} +$theme-colors: ( + "custom-color": #900 +); +{% endhighlight %} + +### Functions + +Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps: + +{% highlight scss %} +@function color($key: "blue") { + @return map-get($colors, $key); +} + +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} + +@function gray($key: "100") { + @return map-get($grays, $key); +} +{% endhighlight %} + +These allow you to pick one color from a Sass map much like how you'd use a color variable from v3. + +{% highlight scss %} +.custom-element { + color: gray("100"); + background-color: theme-color("dark"); +} +{% endhighlight %} + +We also have another function for getting a particular _level_ of color from the `$theme-colors` map. Negative level values will lighten the color, while higher levels will darken. + +{% highlight scss %} +@function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, #000, #fff); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} +{% endhighlight %} + +In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. + +{% highlight scss %} +.custom-element { + color: theme-color-level(primary, -10); +} +{% endhighlight %} + +Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose. + +## Sass options + +Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. + +You can find and customize these variables for key global options in our `_variables.scss` file. + +| Variable | Values | Description | +| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | +| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$enable-hover-media-query` | `true` or `false` (default) | ... | +| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | +| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | +| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | + +## Color + +Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. + +### All colors + +All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. + +<div class="row"> + {% for color in site.data.colors %} + {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} + <div class="col-md-4"> + <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + </div> + {% endunless %} + {% endfor %} +</div> + +Here's how you can use these in your Sass: + +{% highlight scss %} +// With variable +.alpha { color: $purple; } + +// From the Sass map with our `color()` function +.beta { color: color("purple"); } +{% endhighlight %} + +[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. + +{% callout info %} +In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. +{% endcallout %} + +### Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. + +<div class="row"> + {% for color in site.data.theme-colors %} + <div class="col-md-4"> + <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + </div> + {% endfor %} +</div> + +### Grays + +An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. + +<div class="row mb-3"> + <div class="col-md-4"> + {% for color in site.data.grays %} + <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + {% endfor %} + </div> +</div> + +Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: + +{% highlight scss %} +$colors: ( + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "blue": $blue, + "pink": $pink, + "purple": $purple, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-900 +) !default; +{% endhighlight %} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. + +## Components + +Many of Bootstrap's components and utilities are built with `@each` loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops. + +### Modifiers + +Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. + +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities. + +{% highlight scss %} +// Generate alert modifier classes +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); + } +} + +// Generate `.bg-*` color utilities +@each $color, $value in $theme-colors { + @include bg-variant('.bg-#{$color}', $value); +} +{% endhighlight %} + +### Responsive + +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. + +{% highlight scss %} +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .text#{$infix}-left { text-align: left !important; } + .text#{$infix}-right { text-align: right !important; } + .text#{$infix}-center { text-align: center !important; } + } +} +{% endhighlight %} + +Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md index 84ad74c7f..04af8d4f6 100644 --- a/docs/4.0/getting-started/webpack.md +++ b/docs/4.0/getting-started/webpack.md @@ -8,11 +8,11 @@ toc: true ## Installing Bootstrap -[Install bootstrap](/getting-started/download/#npm) as a node module using npm. +[Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/#npm) as a Node.js module using npm. ## Importing JavaScript -Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`): +Import [Bootstrap's JavaScript]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`): {% highlight js %} import 'bootstrap'; @@ -51,11 +51,11 @@ Notice that if you chose to **import plugins individually**, you must also insta ## Importing Styles -### Importing Precompiled SASS +### Importing Precompiled Sass To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process. -First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap: +First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap: {% highlight scss %} @import "custom"; @import "~bootstrap/scss/bootstrap"; diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index a4fbf9ca5..ca608477b 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -8,9 +8,12 @@ toc: true ## How it works -Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. +Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) and is fully responsive. Below is an example and an in-depth look at how the grid comes together. -<div class="bd-example bd-example-row"> +**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. + +<div class="bd-example-row"> +{% example html %} <div class="container"> <div class="row"> <div class="col-sm"> @@ -24,27 +27,26 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout </div> </div> </div> +{% endexample %} </div> The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`. Breaking it down, here's how it works: -- Containers provide a means to center your site's contents. Use `.container` for fixed width or `.container-fluid` for full width. -- Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on `.row` to ensure all your content is aligned properly down the left side. -- Content should be placed within columns, and only columns may be immediate children of rows. -- Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of `.col-sm` will each automatically be 25% wide for small breakpoints. -- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use `.col-sm-4`. +- Containers provide a means to center and horizontally pad your site's contents. Use `.container` for a responsive pixel width or `.container-fluid` for `width: 100%` across all viewport and device sizes. +- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side. +- In a grid layout, content must be placed within columns and only columns may be immediate children of rows. +- Thanks to flexbox, grid columns without a specified `width` will automatically layout as equal width columns. For example, four instances of `.col-sm` will each automatically be 25% wide from the small breakpoint and up. See the [auto-layout columns](#auto-layout-columns) section for more examples. +- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use `.col-4`. - Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element. - Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`. -- There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large. -- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices). -- You can use predefined grid classes or Sass mixins for more semantic markup. +- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large. +- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one breakpoint and all those above it** (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs` breakpoint). +- You can use predefined grid classes (like `.col-4`) or [Sass mixins](#sass-mixins) for more semantic markup. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). -Sounds good? Great, let's move on to seeing all that in an example. - ## Grid options While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units). @@ -474,9 +476,9 @@ If more than 12 columns are placed within a single row, each group of extra colu {% endexample %} </div> -### Column resets +### Column breaks -With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). +Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not ever implementation method can account for this. <div class="bd-example-row"> {% example html %} @@ -484,8 +486,8 @@ With the handful of grid tiers available, you're bound to run into issues where, <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> - <!-- Add the extra clearfix for only the required viewport --> - <div class="clearfix d-none d-sm-block"></div> + <!-- Force next columns to break to new line --> + <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> @@ -493,9 +495,26 @@ With the handful of grid tiers available, you're bound to run into issues where, {% endexample %} </div> +You may also apply this break at specific breakpoints with our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). + +<div class="bd-example-row"> +{% example html %} +<div class="row"> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> + + <!-- Force next columns to break to new line at md breakpoint and up --> + <div class="w-100 d-none d-md-block"></div> + + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> + <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> +</div> +{% endexample %} +</div> + ## Reordering -### Flex order +### Order classes Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers. @@ -517,9 +536,69 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes {% endexample %} </div> +There's also a responsive `.order-first` class that quickly changes the order of one element by applying `order: -1`. This class can also be intermixed with the numbered `.order-*` classes as needed. + +<div class="bd-example-row"> +{% example html %} +<div class="container"> + <div class="row"> + <div class="col"> + First, but unordered + </div> + <div class="col"> + Second, but unordered + </div> + <div class="col order-first"> + Third, but first + </div> + </div> +</div> +{% endexample %} +</div> + ### Offsetting columns -With the move to flexbox in v4, we no longer have v3's style of offset classes. Instead, use margin utilities like `.mr-auto` to force sibling columns away from one another. +You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. + +#### Offset classes + +Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. + +<div class="bd-example-row"> +{% example html %} +<div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> +</div> +<div class="row"> + <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> + <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> +</div> +<div class="row"> + <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> +</div> +{% endexample %} +</div> + +In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/). + +<div class="bd-example-row"> +{% example html %} +<div class="row"> + <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> + <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> +</div> + +<div class="row"> + <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div> + <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> +</div> +{% endexample %} +</div> + +#### Margin utilities + +With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another. <div class="bd-example-row"> {% example html %} @@ -604,6 +683,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // Make the element grid-ready (applying everything but the width) @include make-col-ready(); @include make-col($size, $columns: $grid-columns); + +// Get fancy by offsetting, or changing the sort order +@include make-col-offset($size, $columns: $grid-columns); {% endhighlight %} ### Example usage @@ -684,4 +766,4 @@ $container-max-widths: ( ); {% endhighlight %} -When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`). diff --git a/docs/4.0/layout/media-object.md b/docs/4.0/layout/media-object.md index e3377ef6b..3ffaf6412 100644 --- a/docs/4.0/layout/media-object.md +++ b/docs/4.0/layout/media-object.md @@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th {% example html %} <div class="media"> - <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. @@ -36,13 +36,13 @@ Media objects can be infinitely nested, though we suggest you stop at some point {% example html %} <div class="media"> - <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. <div class="media mt-3"> - <a class="d-flex pr-3" href="#"> + <a class="pr-3" href="#"> <img data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> @@ -60,7 +60,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul {% example html %} <div class="media"> - <img class="d-flex align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> @@ -71,7 +71,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul {% example html %} <div class="media"> - <img class="d-flex align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Center-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> @@ -82,7 +82,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul {% example html %} <div class="media"> - <img class="d-flex align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Bottom-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> @@ -101,7 +101,7 @@ Change the order of content in media objects by modifying the HTML itself, or by <h5 class="mt-0 mb-1">Media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> - <img class="d-flex ml-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image"> </div> {% endexample %} @@ -112,21 +112,21 @@ Because the media object has so few structural requirements, you can also use th {% example html %} <ul class="list-unstyled"> <li class="media"> - <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media my-4"> - <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media"> - <img class="d-flex mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> + <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md index 459191719..c86a432d3 100644 --- a/docs/4.0/layout/overview.md +++ b/docs/4.0/layout/overview.md @@ -162,7 +162,6 @@ Several Bootstrap components utilize `z-index`, the CSS property that helps cont We don't encourage customization of these values; should you change one, you likely need to change them all. ```scss -$zindex-dropdown-backdrop: 990 !default; $zindex-dropdown: 1000 !default; $zindex-fixed: 1030 !default; $zindex-sticky: 1030 !default; diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index 101f7f9de..7c70c7221 100644 --- a/docs/4.0/migration.md +++ b/docs/4.0/migration.md @@ -6,9 +6,23 @@ group: migration toc: true --- -{% callout info %} -**Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date. -{% endcallout %} +## Beta 2 changes + +While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2. + +### Breaking + +- Removed `$badge-color` variable and its usage on `.badge`. We use a color contrast function to pick a `color` based on the `background-color`, so the variable is unnecessary. +- Renamed `grayscale()` function to `gray()` to avoid breaking conflict with the CSS native `grayscale` filter. +- Renamed `.table-inverse`, `.thead-inverse`, and `.thead-default` to `.*-dark` and `.*-light`, matching our color schemes used elsewhere. +- Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed. +- Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details. +- Bootstrap now requires jQuery 3.0.0 or higher. + +### Highlights + +- Introduced new `pointer-events` usage on modals. The outer `.modal-dialog` passes through events with `pointer-events: none` for custom click handling (making it possible to just listen on the `.modal-backdrop` for any clicks), and then counteracts it for the actual `.modal-content` with `pointer-events: auto`. + ## Summary @@ -49,12 +63,12 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to ### Components -- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/cards/). +- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/). - **Dropped the Glyphicons icon font.** If you need icons, some options are: - the upstream version of [Glyphicons](https://glyphicons.com/) - [Octicons](https://octicons.github.com/) - [Font Awesome](http://fontawesome.io/) - - See the [Extend page]({{ site.baseurl }}/docs/{{ site.docs_version }}/extend) for a list of alternatives. Have additional suggestions? Please open an issue or PR. + - See the [Extend page]({{ site.baseurl }}/docs/{{ site.docs_version }}/extend/icons/) for a list of alternatives. Have additional suggestions? Please open an issue or PR. - Dropped the Affix jQuery plugin. - We recommend using `position: sticky` instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)/ - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library. @@ -90,7 +104,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version - Renamed `.table-condensed` to `.table-sm` for consistency. - Added a new `.table-inverse` option. - Added table header modifiers: `.thead-default` and `.thead-inverse`. -- Renamed contextual classes to have a `.table-`-prefix. Hence `.active`, `.success`, `.warning`, `.danger` and `.table-info` to `.table-active`, `.table-success`, `.table-warning`, `.table-danger` and `.table-info`. +- Renamed contextual classes to have a `.table-`-prefix. Hence `.active`, `.success`, `.warning`, `.danger` and `.info` to `.table-active`, `.table-success`, `.table-warning`, `.table-danger` and `.table-info`. ### Forms @@ -99,28 +113,29 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively. - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now. - Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`. +- Dropped `.radio-inline` and `.checkbox-inline`. +- Consolidated `.checkbox` and `.radio` into `.form-check` and the various `.form-check-*` classes. - Horizontal forms overhauled: - Dropped the `.form-horizontal` class requirement. - `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`). - Added new `.form-control-label` class to vertically center labels with `.form-control`s. - Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go). - Added custom forms support (for checkboxes, radios, selects, and file inputs). -- Added HTML5 form validation support via CSS's `:invalid` and `:valid` pseudo-classes. -- Renamed `.has-error` to `.has-danger`. +- Replaced `.has-error`, `.has-warning`, and `.has-success` classes with HTML5 form validation via CSS's `:invalid` and `:valid` pseudo-classes. - Renamed `.form-control-static` to `.form-control-plaintext`. ### Buttons - Renamed `.btn-default` to `.btn-secondary`. - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's. -- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to. +- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to. - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4. - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility). ### Button group - Rewrote component with flexbox. -- Removed `.btn-group-justified`. +- Removed `.btn-group-justified`. As a replacement you can use `<div class="btn-group d-flex" role="group"></div>` as a wrapper around elements with `.w-100`. - Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`. - Removed explicit spacing between button groups in button toolbars; use margin utilities now. - Improved documentation for use with other components. @@ -138,7 +153,8 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version ### Grid system - Added a new `576px` grid breakpoint as `sm`, meaning there are now five total tiers (`xs`, `sm`, `md`, `lg`, and `xl`). -- Renamed the responsive grid modifier classes from `.col-{breakpoint}-{modifier}-{size}` to `.{modifier}-{breakpoint}-{size}` for simpler grid classes. For example, instead of `.col-md-3.col-md-push-9` it's `.col-md-3.push-md-9`. +- Renamed the responsive grid modifier classes from `.col-{breakpoint}-{modifier}-{size}` to `.{modifier}-{breakpoint}-{size}` for simpler grid classes. +- Dropped push and pull modifier classes for the new flexbox-powered `order` classes. For example, instead of `.col-8.push-4` and `.col-4.pull-8`, you'd use `.col-8.order-2` and `.col-4.order-1`. - Added flexbox utility classes for grid system and components. ### List groups @@ -187,6 +203,7 @@ The navbar has been entirely rewritten in flexbox with improved support for alig - Renamed `.label` to `.badge` to disambiguate from the `<label>` element. - Dropped the `.badge` component as it was nearly identical to labels. Use the `.badge-pill` modifier together with the label component instead for that rounded look. - Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that. +- `.badge-default` has been dropped and `.badge-secondary` added to match component modifier classes used elsewhere. ### Panels, thumbnails, and wells @@ -203,13 +220,17 @@ Dropped entirely for the new card component. - `.panel-footer` to `.card-footer` - `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map. +### Progress + +- Replaced contextual `.progress-bar-*` classes with `.bg-*` utilities. For example, `class="progress-bar progress-bar-danger"` becomes `class="progress-bar bg-danger"`. + ### Carousel - Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons. - All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`. - For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`. - `.item` is also now `.carousel-item`. - - For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-right` and `.carousel-control-left`, meaning they no longer require a specific base class. + - For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-next` and `.carousel-control-prev`, meaning they no longer require a specific base class. - Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed. - Removed image overrides for images in carousel items, deferring to utilities. - Tweaked the Carousel example to include the new markup and styles. @@ -223,7 +244,7 @@ Dropped entirely for the new card component. - **Display, hidden, and more:** - Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`). - - Dropped the bulk of `.hidden-*` utilities for new [display utilities](({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. [More info under the Responsive utilities section of this page.](#responsive-utilities) + - Dropped the bulk of `.hidden-*` utilities for new [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. [More info under the Responsive utilities section of this page.](#responsive-utilities) - Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`. - **Type:** - Added responsive variations to our text alignment classes `.text-{sm,md,lg,xl}-{left,center,right}`. @@ -234,7 +255,7 @@ Dropped entirely for the new card component. ### Vendor prefix mixins -Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary. +Bootstrap 3's [vendor prefix](https://www.thoughtco.com/css-vendor-prefixes-3466867) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary. Removed the following mixins: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timing-function`, `backface-visibility`, `box-sizing`, `content-columns`, `hyphens`, `opacity`, `perspective`, `perspective-origin`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `skew`, `transform-origin`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `transition-transform`, `translate`, `translate3d`, `user-select` diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md index db8bcee19..fcc064d39 100644 --- a/docs/4.0/utilities/borders.md +++ b/docs/4.0/utilities/borders.md @@ -30,6 +30,7 @@ Change the border color using utilities built on our theme colors. {% example html %} {% for color in site.data.theme-colors %} <span class="border border-{{ color.name }}"></span>{% endfor %} +<span class="border border-white"></span> {% endexample %} </div> diff --git a/docs/4.0/utilities/clearfix.md b/docs/4.0/utilities/clearfix.md index 5b5727b11..535a33593 100644 --- a/docs/4.0/utilities/clearfix.md +++ b/docs/4.0/utilities/clearfix.md @@ -6,7 +6,7 @@ group: utilities toc: true --- -Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. +Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. {% highlight html %} <div class="clearfix">...</div> @@ -32,7 +32,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %} <div class="bg-info clearfix"> - <button class="btn btn-secondary float-left">Example Button floated left</button> - <button class="btn btn-secondary float-right">Example Button floated right</button> + <button type="button" class="btn btn-secondary float-left">Example Button floated left</button> + <button type="button" class="btn btn-secondary float-right">Example Button floated right</button> </div> {% endexample %} diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md index 11ac0be60..13c0adc8a 100644 --- a/docs/4.0/utilities/colors.md +++ b/docs/4.0/utilities/colors.md @@ -8,21 +8,26 @@ toc: true {% example html %} {% for color in site.data.theme-colors %} -<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %} +<p class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">.text-{{ color.name }}</p>{% endfor %} +<p class="text-muted">.text-muted</p> +<p class="text-white bg-dark">.text-white</p> {% endexample %} -Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.** +Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no link styling.** {% example html %} {% for color in site.data.theme-colors %} -<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %} +<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %} +<p><a href="#" class="text-muted">Muted link</a></p> +<p><a href="#" class="text-white bg-dark">White link</a></p> {% 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. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. {% example html %} {% for color in site.data.theme-colors %} -<div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %} +<div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %} +<div class="p-3 mb-2 bg-white text-dark">.bg-white</div> {% endexample %} {% callout info %} diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index 86c741190..bfb7f091e 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -47,6 +47,29 @@ Responsive variations also exist for every single utility mentioned above. - `.d{{ bp.abbr }}-flex` - `.d{{ bp.abbr }}-inline-flex`{% endfor %} +## Hiding Elements + +For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size. + +To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation. + +To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices. + +| Screen Size | Class | +| --- | --- | +| Hidden on all | `d-none` | +| Hidden only on xs | `d-none d-sm-block` | +| Hidden only on sm | `d-sm-none d-md-block` | +| Hidden only on md | `d-md-none d-lg-block` | +| Hidden only on lg | `d-lg-none d-xl-block` | +| Hidden only on xl | `d-xl-none` | +| Visible on all | `d-block` | +| Visible only on xs | `d-block d-sm-none` | +| Visible only on sm | `d-none d-sm-block d-md-none` | +| Visible only on md | `d-none d-md-block d-lg-none` | +| Visible only on lg | `d-none d-lg-block d-xl-none` | +| Visible only on xl | `d-none d-xl-block` | + ## Display in print Change the `display` value of elements when printing with our print display utilities. diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md index 4bc5996fb..1d28fab6d 100644 --- a/docs/4.0/utilities/flex.md +++ b/docs/4.0/utilities/flex.md @@ -357,17 +357,14 @@ Change the _visual_ order of specific flex items with a handful of `order` utili Responsive variations also exist for `order`. -{% for bp in site.data.breakpoints %} - {% for i in (1..12) %} - - `.order{{ bp.abbr }}-{{ i }}` - {% endfor %} -{% endfor %} +{% for bp in site.data.breakpoints %}{% for i in (1..12) %} +- `.order{{ bp.abbr }}-{{ i }}`{% endfor %}{% endfor %} ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. -**Heads up!** This property has no affect on single rows of flex items. +**Heads up!** This property has no effect on single rows of flex items. <div class="bd-example"> <div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px"> diff --git a/docs/4.0/utilities/image-replacement.md b/docs/4.0/utilities/image-replacement.md index b11c936c4..98c09346b 100644 --- a/docs/4.0/utilities/image-replacement.md +++ b/docs/4.0/utilities/image-replacement.md @@ -18,3 +18,9 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten @include text-hide; } {% endhighlight %} + +Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text. + +{% example html %} +<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1> +{% endexample %} diff --git a/docs/4.0/utilities/position.md b/docs/4.0/utilities/position.md index fb7d8bd9e..9cf952452 100644 --- a/docs/4.0/utilities/position.md +++ b/docs/4.0/utilities/position.md @@ -6,6 +6,18 @@ group: utilities toc: true --- +## Common values + +Quick positioning classes are available, though they are not responsive. + +{% highlight html %} +<div class="position-static">...</div> +<div class="position-relative">...</div> +<div class="position-absolute">...</div> +<div class="position-fixed">...</div> +<div class="position-sticky">...</div> +{% endhighlight %} + ## Fixed top Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS. diff --git a/docs/4.0/utilities/screenreaders.md b/docs/4.0/utilities/screenreaders.md index 6284804a8..358466f0c 100644 --- a/docs/4.0/utilities/screenreaders.md +++ b/docs/4.0/utilities/screenreaders.md @@ -1,7 +1,7 @@ --- layout: docs title: Screenreaders -description: Use screenreader utilities to hide elements on all devices execept screen readers. +description: Use screenreader utilities to hide elements on all devices except screen readers. group: utilities toc: true --- diff --git a/docs/4.0/utilities/spacing.md b/docs/4.0/utilities/spacing.md index d6d2d7b54..035a337af 100644 --- a/docs/4.0/utilities/spacing.md +++ b/docs/4.0/utilities/spacing.md @@ -39,6 +39,7 @@ Where *size* is one of: * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` * `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` * `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` +* `auto` - for classes that set the `margin` to auto (You can add more sizes by adding entries to the `$spacers` Sass map variable.) diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md index 8dcbba078..69b2dee8c 100644 --- a/docs/4.0/utilities/text.md +++ b/docs/4.0/utilities/text.md @@ -1,6 +1,6 @@ --- layout: docs -title: Typography +title: Text description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. group: utilities toc: true @@ -77,5 +77,6 @@ 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-weight-light">Light weight text.</p> <p class="font-italic">Italic text.</p> {% endexample %} |