mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
Merge branch 'v4-dev' into v4-utils
This commit is contained in:
Mark Otto
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Alerts
|
||||
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Breadcrumb
|
||||
description: Indicate the current page's location within a navigational hierarchy.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Button group
|
||||
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Buttons
|
||||
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
||||
group: components
|
||||
redirect_from: "/components/"
|
||||
---
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Cards
|
||||
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -141,7 +142,7 @@ Using custom widths:
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block">
|
||||
@@ -434,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
||||
|
||||
## Groups
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Carousel
|
||||
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
|
||||
group: components
|
||||
---
|
||||
|
||||
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
|
||||
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
|
||||
|
||||
## Contents
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Collapse
|
||||
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Dropdowns
|
||||
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -36,7 +37,7 @@ And with `<a>` elements:
|
||||
|
||||
{% example html %}
|
||||
<div class="dropdown open">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Forms
|
||||
description: Examples and usage guidelines for from controls, form layouts, and custom forms.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -191,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
|
||||
<div class="form-group row">
|
||||
<label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
|
||||
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
@@ -339,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms
|
||||
|
||||
### Using the Grid
|
||||
|
||||
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
|
||||
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
|
||||
|
||||
Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
|
||||
|
||||
@@ -584,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
||||
{% callout warning %}
|
||||
#### Caveat about link functionality of `<a>`
|
||||
|
||||
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](../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 }}/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.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout danger %}
|
||||
@@ -703,7 +704,7 @@ Here are some examples of the aforementioned classes in action.
|
||||
|
||||
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
|
||||
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
{% endcallout %}
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Input group
|
||||
description: Extend form controls with the input group.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Jumbotron
|
||||
description: Lightweight, flexible component for showcasing hero unit style content.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: List group
|
||||
description: Learn about Bootstrap's list group component for rendering series of related content.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Modal
|
||||
description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -411,6 +412,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>true</td>
|
||||
<td>Closes the modal when escape key is pressed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>focus</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Puts the focus on the modal when initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Navbar
|
||||
description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -26,7 +27,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
|
||||
|
||||
- `.navbar-brand` for your company, product, or project name
|
||||
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
|
||||
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
|
||||
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
|
||||
|
||||
Here's an example of all the sub-components included in a default, light navbar:
|
||||
|
||||
@@ -241,9 +242,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse" id="exCollapsingNavbar">
|
||||
<div class="bg-inverse p-1">
|
||||
<h4>Collapsed content</h4>
|
||||
@@ -257,9 +256,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
|
||||
<a class="navbar-brand" href="#">Responsive navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Navs
|
||||
description: Documentation and examples for how to use Bootstrap's included navigation components.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Pagination
|
||||
description: Documentation and examples for showing pagination links.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Popovers
|
||||
description: Documentation and examples for adding Bootstrap popovers to your site.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -16,8 +17,8 @@ Add small overlay content, like those found in iOS, to any element for housing s
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
|
||||
- Popovers rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency.
|
||||
- Popovers rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips/) as a dependency.
|
||||
- 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).
|
||||
@@ -141,7 +142,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
|
||||
{% callout danger %}
|
||||
#### Specific markup required for dismiss-on-next-click
|
||||
|
||||
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
|
||||
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
@@ -229,7 +230,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
|
||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>template</td>
|
||||
@@ -262,13 +263,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>constraints</td>
|
||||
<td>Array</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
|
||||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>string</td>
|
||||
<td>'0 0'</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Progress
|
||||
description: Documentation and examples for using Bootstrap progress bars.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -13,7 +14,7 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
|
||||
|
||||
## Example
|
||||
|
||||
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
|
||||
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
|
||||
|
||||
{% example html %}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Scrollspy
|
||||
description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Tags
|
||||
description: Documentation and examples for tags, our small label-badge component.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Tooltips
|
||||
description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
|
||||
group: components
|
||||
---
|
||||
|
||||
@@ -15,7 +16,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a
|
||||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
|
||||
- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
|
||||
@@ -186,7 +187,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>string | function</td>
|
||||
<td>'top'</td>
|
||||
<td>
|
||||
<p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
|
||||
<p>How to position the tooltip - top | bottom | left | right.</p>
|
||||
<p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -194,7 +195,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
|
||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>template</td>
|
||||
@@ -226,13 +227,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>constraints</td>
|
||||
<td>Array</td>
|
||||
<td>[]</td>
|
||||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
|
||||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>string</td>
|
||||
<td>'0 0'</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user