mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:40:10 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto 2017-12-26 13:31:53 -08:00
commit dd7a8be711
10 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/4.0/components/button-group.md
View File

@ -19,7 +19,7 @@ Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}
#### Ensure correct `role` and provide a label ##### Ensure correct `role` and provide a label
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.

2
docs/4.0/components/buttons.md
View File

@ -95,7 +95,7 @@ Disabled buttons using the `<a>` element behave a bit different:
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}
#### Link functionality caveat ##### Link functionality caveat
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
{% endcallout %} {% endcallout %}

78
docs/4.0/components/card.md
View File

@ -20,7 +20,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -52,7 +52,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
{% example html %} {% example html %}
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Card link</a>
@ -109,7 +109,7 @@ Mix and match multiple content types to create the card you need, or throw every
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@ -134,7 +134,7 @@ Add an optional header and/or footer within a card.
Featured Featured
</div> </div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -145,9 +145,9 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %} {% example html %}
<div class="card"> <div class="card">
<h4 class="card-header">Featured</h4> <h5 class="card-header">Featured</h5>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -174,7 +174,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
Featured Featured
</div> </div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -197,7 +197,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -206,7 +206,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -222,7 +222,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
{% example html %} {% example html %}
<div class="card w-75"> <div class="card w-75">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Button</a>
</div> </div>
@ -230,7 +230,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
<div class="card w-50"> <div class="card w-50">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Button</a>
</div> </div>
@ -244,7 +244,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %} {% example html %}
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -258,7 +258,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
{% example html %} {% example html %}
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -266,7 +266,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
<div class="card text-center" style="width: 18rem;"> <div class="card text-center" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -274,7 +274,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
<div class="card text-right" style="width: 18rem;"> <div class="card text-right" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -301,7 +301,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</ul> </ul>
</div> </div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -324,7 +324,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
</ul> </ul>
</div> </div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -343,14 +343,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<div class="card mb-3"> <div class="card mb-3">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -366,7 +366,7 @@ Turn an image into a card background and overlay your card's text. Depending on
<div class="card bg-dark text-white"> <div class="card bg-dark text-white">
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image"> <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
<div class="card-img-overlay"> <div class="card-img-overlay">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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>
<p class="card-text">Last updated 3 mins ago</p> <p class="card-text">Last updated 3 mins ago</p>
</div> </div>
@ -386,7 +386,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;"> <div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4> <h5 class="card-title">{{ color.name | capitalize }} card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
</div>{% endfor %} </div>{% endfor %}
@ -404,7 +404,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
<div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;"> <div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}"> <div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4> <h5 class="card-title">{{ color.name | capitalize }} card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
</div>{% endfor %} </div>{% endfor %}
@ -418,7 +418,7 @@ You can also change the borders on the card header and footer as needed, and eve
<div class="card border-success mb-3" style="max-width: 18rem;"> <div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div> <div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success"> <div class="card-body text-success">
<h4 class="card-title">Success card title</h4> <h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
<div class="card-footer bg-transparent border-success">Footer</div> <div class="card-footer bg-transparent border-success">Footer</div>
@ -438,7 +438,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -446,7 +446,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -454,7 +454,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -469,7 +469,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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 class="card-footer"> <div class="card-footer">
@ -479,7 +479,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -489,7 +489,7 @@ When using card groups with footers, their content will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -508,7 +508,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -516,7 +516,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -524,7 +524,7 @@ Need a set of equal width and height cards that aren't attached to one another?
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -539,7 +539,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<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> <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 class="card-footer"> <div class="card-footer">
@ -549,7 +549,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -559,7 +559,7 @@ Just like with card groups, card footers in decks will automatically line up.
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -580,7 +580,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4> <h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a longer 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>
@ -597,7 +597,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -614,7 +614,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div> </div>
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
@ -634,7 +634,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div> </div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>

10
docs/4.0/components/carousel.md
View File

@ -104,7 +104,7 @@ You can also add the indicators to the carousel, alongside the controls, too.
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}
#### Initial active element required ##### Initial active element required
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
{% endcallout %} {% endcallout %}
@ -124,21 +124,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3> <h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3> <h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3> <h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div> </div>
</div> </div>
@ -158,7 +158,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
<div class="carousel-item"> <div class="carousel-item">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>...</h3> <h5>...</h5>
<p>...</p> <p>...</p>
</div> </div>
</div> </div>

6
docs/4.0/components/forms.md
View File

@ -249,7 +249,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
### Form groups ### Form groups
The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element. The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.
{% example html %} {% example html %}
<form> <form>
@ -611,7 +611,7 @@ Custom form controls and selects are also supported.
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}
#### Alternatives to hidden labels ##### Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
{% endcallout %} {% endcallout %}
@ -684,7 +684,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}
#### Caveat with anchors ##### 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 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. 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 %} {% endcallout %}

2
docs/4.0/components/tooltips.md
View File

@ -124,7 +124,7 @@ $('#example').tooltip(options)
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
{% callout warning %} {% callout warning %}
#### Making tooltips work for keyboard and assistive technology users ##### Making tooltips work for keyboard and assistive technology users
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation. You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
{% endcallout %} {% endcallout %}

2
docs/4.0/content/images.md
View File

@ -19,7 +19,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
{% endhighlight %} {% endhighlight %}
{% callout warning %} {% callout warning %}
#### SVG images and IE 10 ##### SVG images and IE 10
In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %} {% endcallout %}

2
docs/4.0/content/reboot.md
View File

@ -342,7 +342,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
{% endhighlight %} {% endhighlight %}
{% callout warning %} {% callout warning %}
#### jQuery incompatibility ##### jQuery incompatibility
`[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. `[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 %} {% endcallout %}

2
docs/4.0/getting-started/javascript.md
View File

@ -115,7 +115,7 @@ $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks. Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
{% callout warning %} {% callout warning %}
#### Third-party libraries ##### Third-party libraries
**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own. **Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
{% endcallout %} {% endcallout %}

2
scss/bootstrap.scss vendored
View File

@ -9,7 +9,6 @@
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "root"; @import "root";
@import "print";
@import "reboot"; @import "reboot";
@import "type"; @import "type";
@import "images"; @import "images";
@ -40,3 +39,4 @@
@import "popover"; @import "popover";
@import "carousel"; @import "carousel";
@import "utilities"; @import "utilities";
@import "print";