diff options
Diffstat (limited to 'site/content/docs/5.1')
| -rw-r--r-- | site/content/docs/5.1/components/list-group.md | 12 | ||||
| -rw-r--r-- | site/content/docs/5.1/content/reboot.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.1/customize/optimize.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.1/forms/checks-radios.md | 10 | ||||
| -rw-r--r-- | site/content/docs/5.1/helpers/text-truncation.md | 4 |
5 files changed, 16 insertions, 16 deletions
diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md index c47a05dd3..71e45245c 100644 --- a/site/content/docs/5.1/components/list-group.md +++ b/site/content/docs/5.1/components/list-group.md @@ -102,9 +102,9 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac {{< example >}} <ol class="list-group list-group-numbered"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">A list item</li> + <li class="list-group-item">A list item</li> + <li class="list-group-item">A list item</li> </ol> {{< /example >}} @@ -115,21 +115,21 @@ These work great with custom content as well. <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> - Cras justo odio + Content for list item </div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> - Cras justo odio + Content for list item </div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> - Cras justo odio + Content for list item </div> <span class="badge bg-primary rounded-pill">14</span> </li> diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index f726a6635..63f892de2 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -433,7 +433,7 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem The `<abbr>` element receives basic styling to make it stand out amongst paragraph text. <div class="bd-example"> - Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. + The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element. </div> ### Summary diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md index 29b152154..fc61728ce 100644 --- a/site/content/docs/5.1/customize/optimize.md +++ b/site/content/docs/5.1/customize/optimize.md @@ -71,9 +71,9 @@ Lastly, this [CSS Tricks article on unused CSS](https://css-tricks.com/how-do-yo Whenever possible, be sure to compress all the code you serve to your visitors. If you're using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you're building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS. -## Nonblocking files +## Non-blocking files -While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough. +While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough. If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md index 0f5507f54..efd040de0 100644 --- a/site/content/docs/5.1/forms/checks-radios.md +++ b/site/content/docs/5.1/forms/checks-radios.md @@ -102,23 +102,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty ## Switches -A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute. +A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute. {{< example >}} <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled> <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled> <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label> </div> {{< /example >}} diff --git a/site/content/docs/5.1/helpers/text-truncation.md b/site/content/docs/5.1/helpers/text-truncation.md index a92a171fd..799f2059b 100644 --- a/site/content/docs/5.1/helpers/text-truncation.md +++ b/site/content/docs/5.1/helpers/text-truncation.md @@ -12,12 +12,12 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi <!-- Block level --> <div class="row"> <div class="col-2 text-truncate"> - Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed. </div> </div> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 150px;"> - Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed. </span> {{< /example >}} |