mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Rewrite some callouts to remove most headings and reduce their content
This commit is contained in:
Mark Otto
Mark Otto
parent
d13c8f625c
commit
89f9ffc212
@ -54,11 +54,8 @@ $breadcrumb-divider: quote(">");
|
||||
|
||||
It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
|
||||
|
||||
|
||||
{{< callout info >}}
|
||||
### Using embedded SVG
|
||||
|
||||
Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
|
||||
**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
|
||||
@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
##### 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 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.
|
||||
{{< callout info >}}
|
||||
Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
|
||||
{{< /callout >}}
|
||||
|
||||
These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}).
|
||||
|
||||
@ -400,8 +400,7 @@ And putting it to use in a navbar:
|
||||
## Directions
|
||||
|
||||
{{< callout info >}}
|
||||
#### RTL
|
||||
Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
|
||||
**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
|
||||
{{< /callout >}}
|
||||
|
||||
### Centered
|
||||
@ -1057,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
|
||||
|
||||
### Via JavaScript
|
||||
|
||||
{{< callout warning >}}
|
||||
Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of using the Data API or JavaScript.
|
||||
{{< /callout >}}
|
||||
|
||||
Call the dropdowns via JavaScript:
|
||||
|
||||
```js
|
||||
@ -1064,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
|
||||
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
##### `data-bs-toggle="dropdown"` still required
|
||||
|
||||
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
|
||||
{{< /callout >}}
|
||||
|
||||
### Options
|
||||
|
||||
{{< markdown >}}
|
||||
|
||||
@ -111,12 +111,10 @@ You can customize the appearance of popovers using [CSS variables](#variables).
|
||||
|
||||
### Dismiss on next click
|
||||
|
||||
Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
|
||||
Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element.
|
||||
|
||||
{{< 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.
|
||||
**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example stackblitz_add_js="true" >}}
|
||||
@ -165,13 +163,11 @@ const popover = new bootstrap.Popover(exampleEl, options)
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
### Making popovers work for keyboard and assistive technology users
|
||||
**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.
|
||||
|
||||
To allow keyboard users to activate your popovers, you should only add them 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, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.
|
||||
Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to be announced to assistive technology users as one long, uninterrupted stream.
|
||||
|
||||
While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream.
|
||||
|
||||
Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>Tab</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.
|
||||
Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links). In cases where you must use these elements, consider using a modal dialog to help keep content accessible and usable for keyboard users and users of assistive technologies.
|
||||
{{< /callout >}}
|
||||
|
||||
### Options
|
||||
|
||||
@ -135,9 +135,7 @@ As part of Bootstrap’s evolving CSS variables approach, tooltips now use local
|
||||
|
||||
## Usage
|
||||
|
||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
|
||||
|
||||
Trigger the tooltip via JavaScript:
|
||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
|
||||
|
||||
```js
|
||||
const exampleEl = document.getElementById('example')
|
||||
@ -145,9 +143,7 @@ const tooltip = new bootstrap.Tooltip(exampleEl, options)
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Overflow `auto` and `scroll`
|
||||
|
||||
Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
|
||||
Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
|
||||
|
||||
```js
|
||||
const tooltip = new bootstrap.Tooltip('#example', {
|
||||
@ -161,9 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
|
||||
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 >}}
|
||||
##### 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, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
|
||||
**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
|
||||
{{< /callout >}}
|
||||
|
||||
```html
|
||||
|
||||
@ -269,6 +269,10 @@ Various form elements have been rebooted for simpler base styles. Here are some
|
||||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callouts/warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
<form class="bd-example">
|
||||
<fieldset>
|
||||
<legend>Example legend</legend>
|
||||
@ -391,10 +395,6 @@ These changes, and more, are demonstrated below.
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callouts/warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Pointers on buttons
|
||||
|
||||
Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
|
||||
@ -466,10 +466,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
|
||||
<input type="text" hidden>
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
##### 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.
|
||||
{{< callout info >}}
|
||||
Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||
{{< /callout >}}
|
||||
|
||||
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]({{< docsref "/utilities/visibility" >}}) instead.
|
||||
|
||||
@ -42,14 +42,11 @@ import 'bootstrap/js/dist/modal';
|
||||
This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
|
||||
|
||||
{{< callout info >}}
|
||||
### Default Exports
|
||||
|
||||
Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following:
|
||||
**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
|
||||
|
||||
<!-- eslint-skip -->
|
||||
```js
|
||||
import Modal from 'bootstrap/js/dist/modal'
|
||||
|
||||
const modal = new Modal(document.getElementById('myModal'))
|
||||
```
|
||||
{{< /callout >}}
|
||||
|
||||
@ -56,10 +56,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
|
||||
Block-level or inline-level form text can be created using `.form-text`.
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Associating form text with form controls
|
||||
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute.
|
||||
This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
{{< /callout >}}
|
||||
|
||||
Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
|
||||
|
||||
@ -13,9 +13,7 @@ We recommend getting familiar with Bootstrap first by reading through our [Getti
|
||||
You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL.
|
||||
|
||||
{{< callout warning >}}
|
||||
### Experimental feature
|
||||
|
||||
The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
|
||||
**Bootstrap's RTL feature is still experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
|
||||
{{< /callout >}}
|
||||
|
||||
## Required HTML
|
||||
@ -163,9 +161,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r
|
||||
After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction.
|
||||
|
||||
{{< callout warning >}}
|
||||
#### Edge cases and known limitations
|
||||
|
||||
While this approach is understandable, please pay attention to the following:
|
||||
**Edge cases and known limitations —** Please consider the following when working with a combined LTR and RTL implementation:
|
||||
|
||||
1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly.
|
||||
2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/).
|
||||
|
||||
@ -1,5 +1 @@
|
||||
#### Asynchronous methods and transitions
|
||||
|
||||
All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
|
||||
|
||||
[See our JavaScript documentation for more information](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions).
|
||||
**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions)
|
||||
|
||||
@ -1,3 +1 @@
|
||||
##### Conveying meaning to assistive technologies
|
||||
|
||||
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
**ProTip!** Conveying meaning through color alone will not be conveyed to users of assistive technologies like screen readers. Please ensure the context is is obvious itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
@ -1,3 +1 @@
|
||||
##### Date & color input support
|
||||
|
||||
Keep in mind date inputs are [not fully supported](https://caniuse.com/input-datetime) by all browsers, namely Safari.
|
||||
Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user