-- cgit v1.2.3 From 8db02e24d6a938388ff9e0e4e9aa241c0f699437 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Thu, 9 Sep 2021 15:44:44 +0900 Subject: Non-blocking typo fix (#34935) --- site/content/docs/5.1/customize/optimize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md index 29b152154..2fc1bb3fc 100644 --- a/site/content/docs/5.1/customize/optimize.md +++ b/site/content/docs/5.1/customize/optimize.md @@ -71,7 +71,7 @@ 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. -- cgit v1.2.3 From 2a925d6fd800d89b072d9f035a069d84e735941b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 9 Sep 2021 08:50:55 +0200 Subject: Separator for table direct children (#34861) * fix(tables): separator for table direct children * fix(tables): drop universal selectors * fix(tables): trying the lobotomized owl selector * fix(tables): get closer to v4 * fix(tables): ensure borderless are borderless --- scss/_tables.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index d474ad566..e10e4c4e4 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -39,8 +39,8 @@ } // Highlight border color between thead, tbody and tfoot. - > :not(:last-child) > :last-child > * { - border-bottom-color: $table-group-separator-color; + > :not(:first-child) { + border-top: (2 * $table-border-width) solid $table-group-separator-color; } } @@ -91,6 +91,10 @@ > :not(caption) > * > * { border-bottom-width: 0; } + + > :not(:first-child) { + border-top-width: 0; + } } // Zebra-striping -- cgit v1.2.3 From f7c361f5538f0ea93badd1964b3d8b54d30ded86 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Thu, 9 Sep 2021 20:30:41 +0900 Subject: replace dummy text with English for Text truncation page (#34936) --- site/content/docs/5.1/helpers/text-truncation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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

- Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed.

- Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed. {{< /example >}} -- cgit v1.2.3 From cb87ed2a7985744f042b663d2c87653ce68da476 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Thu, 9 Sep 2021 20:37:52 +0900 Subject: docs: Add role="switch" to switches (#34824) * docs: Add role="switch" to switches * Tweak/expand explanation about assistive technologies Co-authored-by: Patrick H. Lauke --- site/content/docs/5.1/forms/checks-radios.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 ``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 >}}

- + Default switch checkbox input

- + Checked switch checkbox input

- + Disabled switch checkbox input

- + Disabled checked switch checkbox input

{{< /example >}} -- cgit v1.2.3 From 1df098361cac04217d6a464c80e890c4335ecb5c Mon Sep 17 00:00:00 2001 From: Kitty Giraudel <1889710+KittyGiraudel@users.noreply.github.com> Date: Thu, 9 Sep 2021 13:42:45 +0200 Subject: Update a URL mentioning dead name (#34937) --- scss/mixins/_visually-hidden.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss index ed7bc9c13..4fc7f49d6 100644 --- a/scss/mixins/_visually-hidden.scss +++ b/scss/mixins/_visually-hidden.scss @@ -3,7 +3,7 @@ // Hide content visually while keeping it accessible to assistive technologies // // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ -// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ +// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ @mixin visually-hidden() { position: absolute !important; -- cgit v1.2.3 From 8c4f66733e2c6757a57c2fbcc75bab82d1de839e Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 10 Sep 2021 20:02:58 +0900 Subject: Changes some latin/dummy text to English (#34946) Changes some latin/dummy text to English so spellcheck linter passes --- site/content/docs/5.1/components/list-group.md | 12 ++++++------ site/content/docs/5.1/content/reboot.md | 2 +- site/content/docs/5.1/customize/optimize.md | 2 +- 3 files changed, 8 insertions(+), 8 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 `

Cras justo odio
Cras justo odio
Cras justo odio
A list item
A list item
A list item

Subheading
- Cras justo odio + Content for list item
14
Subheading
- Cras justo odio + Content for list item
14
Subheading
- Cras justo odio + Content for list item
14

` element receives basic styling to make it stand out amongst paragraph text.

- Nulla attr vitae elit libero, a pharetra augue. + The HTML abbreviation element.

### Summary diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md index 2fc1bb3fc..fc61728ce 100644 --- a/site/content/docs/5.1/customize/optimize.md +++ b/site/content/docs/5.1/customize/optimize.md @@ -73,7 +73,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors. ## 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. -- cgit v1.2.3 From c9af4565fdc13eff025736e574ea10690fd21a39 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 13 Sep 2021 10:57:17 +0300 Subject: tests: fix lint warning (#34950) --- js/tests/unit/collapse.spec.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index ece88eff5..e37e37e55 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -2,7 +2,7 @@ import Collapse from '../../src/collapse' import EventHandler from '../../src/dom/event-handler' /** Test helpers */ -import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture' +import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture' describe('Collapse', () => { let fixtureEl @@ -294,14 +294,13 @@ describe('Collapse', () => { '

' ].join('') - // const btn = fixtureEl.querySelector('[data-bs-target="#collapseOne"]') const el = fixtureEl.querySelector('#collapseOne') const activeTabPane = fixtureEl.querySelector('#nav-home') const collapse = new Collapse(el) let times = 1 el.addEventListener('hidden.bs.collapse', () => { - setTimeout(() => collapse.show(), 10) + collapse.show() }) el.addEventListener('shown.bs.collapse', () => { -- cgit v1.2.3 From 55a352d02304cb0012194c33b8b50f9426b53f94 Mon Sep 17 00:00:00 2001 From: cdalexndr Date: Wed, 8 Sep 2021 14:40:45 +0300 Subject: Fix responsive img docs https://github.com/twbs/bootstrap/issues/34885 --- site/content/docs/5.1/content/images.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.1/content/images.md index f1012efbf..9d13ef4fb 100644 --- a/site/content/docs/5.1/content/images.md +++ b/site/content/docs/5.1/content/images.md @@ -1,14 +1,14 @@ --- layout: docs title: Images -description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. +description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes. group: content toc: true --- ## Responsive images -Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element. +Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width. {{< example >}} {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} -- cgit v1.2.3

Backdroped with scrolling

Backdrop with scrolling