
...	...	This cell is aligned to the top.	...

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Footer	Footer	Footer	Footer

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Name	Upvotes	Downvotes
Alice	10	11
Bob	4	3
Charlie	7	9
Totals	21	23

#	الاسم الاول	الكنية	الاسم المستعار
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

#	الاسم الاول	الكنية	الاسم المستعار
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

Class	عنوان	عنوان
Default	خلية	خلية
{{ .name \| title }}	خلية	خلية

#	الاسم الاول	الكنية	الاسم المستعار
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

Class	Heading	Heading
Default	Cell	Cell
{{ .name \| title }}	Cell	Cell

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

#	عنوان	عنوان	عنوان	عنوان
1,001	بيانات	عشوائية	تثري	الجدول
1,002	تثري	مبهة	تصميم	تنسيق
1,003	عشوائية	غنية	قيمة	مفيدة
1,003	معلومات	تثري	توضيحية	عشوائية
1,004	الجدول	بيانات	تنسيق	قيمة
1,005	قيمة	مبهة	الجدول	تثري
1,006	قيمة	توضيحية	غنية	عشوائية
1,007	تثري	مفيدة	معلومات	مبهة
1,008	بيانات	عشوائية	تثري	الجدول
1,009	تثري	مبهة	تصميم	تنسيق
1,010	عشوائية	غنية	قيمة	مفيدة
1,011	معلومات	تثري	توضيحية	عشوائية
1,012	الجدول	تثري	تنسيق	قيمة
1,013	قيمة	مبهة	الجدول	تصميم
1,014	قيمة	توضيحية	غنية	عشوائية
1,015	بيانات	مفيدة	معلومات	الجدول

#	Header	Header	Header	Header
1,001	random	data	placeholder	text
1,002	placeholder	irrelevant	visual	layout
1,003	data	rich	dashboard	tabular
1,003	information	placeholder	illustrative	data
1,004	text	random	layout	dashboard
1,005	dashboard	irrelevant	text	placeholder
1,006	dashboard	illustrative	rich	data
1,007	placeholder	tabular	information	irrelevant
1,008	random	data	placeholder	text
1,009	placeholder	irrelevant	visual	layout
1,010	data	rich	dashboard	tabular
1,011	information	placeholder	illustrative	data
1,012	text	placeholder	layout	dashboard
1,013	dashboard	irrelevant	text	visual
1,014	dashboard	illustrative	rich	data
1,015	random	tabular	information	text

- View on GitHub -

{{ if (eq .Page.Params.toc true) }} -

- On this page - {{ .TableOfContents }} +

+ + On this page +

+ {{ .TableOfContents }} +

{{ end }} -

{{ range .Page.Params.sections }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 8ba99c718..ae1a41faa 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -1,14 +1,19 @@ {{ define "main" }}

{{ if eq .Title "Examples" }} -

- Download examples - Download source code +

+ + + Download examples + + + Download source code +

@@ -20,7 +25,7 @@

{{ .Content }} {{ if eq .Title "Examples" }} @@ -30,7 +35,7 @@

{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}

Go further with Bootstrap Themes

Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 171a2ad73..441c2bd56 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,74 +1,89 @@ -

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index eec268ceb..3ffe9f4d4 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -1,8 +1,8 @@ -

{{- $url := split .Permalink "/" -}} {{- $page_slug := index $url (sub (len $url) 2) -}} -

- + -
-
- {{ $doc.title }}
-
+
- {{ $doc.title }}
- +

+ {{ $group.title }}

diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 48f77f470..95f394f5a 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -1,37 +1,39 @@ -

- {{ partial "icons/code.svg" (dict "width" "32" "height" "32") }} -

Installation

- Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. -

Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.

- Read installation docs -

- {{ highlight "npm install bootstrap" "sh" "" }} - {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} +

Get started any way you want

+ Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. +

+ + Read installation docs + + +

- {{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }} -

jsDelivr

- When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. +

+ +

Install via package manager

+ Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.

+ {{ highlight "npm install bootstrap" "sh" "" }} + {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}

- See it in action with our simple starter template, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately. + Read our installation docs for more info and additional package managers.

- Explore the docs

+ +

Include via CDN

+ When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple starter template, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately. +

{{ highlight (printf (` `) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }} @@ -41,21 +43,267 @@

+ +

Customize everything with Sass

+ Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. +

+ + Learn more about customizing + + +

+ +

Include all of Bootstrap’s Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

+ {{ highlight (printf `// Variable overrides first +$primary: #900; +$enable-shadows: true; +$variable-prefix: "mo-"; + +// Then import Bootstrap +@import "../node_modules/bootstrap/scss/bootstrap"; +`) "scss" "" }} +

Learn more about our global Sass options.

Include what you need

The easiest way to customize Bootstrap—include only the CSS you need.

+{{ highlight (printf `// Functions first +@import "../node_modules/bootstrap/scss/functions"; + +// Variable overrides second +$primary: #900; +$enable-shadows: true; +$variable-prefix: "mo-"; + +// Required Bootstrap imports +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// Optional components +@import "../node_modules/bootstrap/scss/utilities"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/helpers"; +@import "../node_modules/bootstrap/scss/utilities/api"; +`) "scss" "" }} +

Learn more about using Bootstrap with Sass.

+ +

Build and extend in real-time with CSS variables

+ Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. +

+ + Learn more about CSS variables + + +

Using CSS variables

Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements.

+ {{ highlight (printf `.component { + color: var(--bs-gray-800); + background-color: var(--bs-gray-100); + border: 1px solid var(--bs-gray-200); + border-radius: .25rem; +} + +.component-header { + color: var(--bs-purple); +}`) "scss" "" }} +

Customizing via CSS variables

Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.

+ {{ highlight (printf `body { + --bs-body-font-family: var(--bs-font-monospace); + --bs-body-line-height: 1.4; + --bs-body-bg: var(--bs-gray-100); +} + +.table { + --bs-table-color: var(--bs-gray-600); + --bs-table-bg: var(--bs-gray-100); + --bs-table-border-color: transparent; +}`) "scss" "" }} +

+ +

+ + + +

Components, meet the Utility API

+ New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. +

+ + Learn more about utilities + + + + Explore customized components + + +

Quickly customize components

+ {{ highlight (printf `// Create and extend utilities with the Utility API + +@import "bootstrap/scss/bootstrap"; + +$utilities: map-merge( + $utilities, + ( + "cursor": ( + property: cursor, + class: cursor, + responsive: true, + values: auto pointer grab, + ) + ) +); +`) "scss" "" }} +

+ +

Powerful JavaScript plugins without jQuery

+ Easily add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. JavaScript in Bootstrap is HTML-first, which means adding plugins is as easy as adding data attributes. Need more control? Include individual plugins programmatically. +

+ + Learn more about Bootstrap JavaScript + + +

Data attribute API

Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding data attributes.

+ +

+ + {{ highlight (printf ` +`) "html" "" }} +

Learn more about our JavaScript as modules and using the programmatic API.

Comprehensive set of plugins

Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.

+ {{- range $plugin := .Site.Data.plugins -}} + {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} +

+ +

+ {{ $plugin.description }} + +

+ {{- end }} +

+ +

+ -

Bootstrap Icons

Personalize it with Bootstrap Icons

- For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. + Bootstrap Icons is an open source SVG icon library featuring over 1,500 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.

- Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implemented in several ways, and can be styled with CSS. +

+ + Get Bootstrap Icons + +

- Get Bootstrap Icons

+ -

Official Themes

Make it yours with official Bootstrap Themes

- Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. + Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

- Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. +

+ + Browse Bootstrap Themes + +

- Browse themes

- {{ partial "icons/homepage-hero.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "600" "height" "533") }} -

Build fast, responsive sites with Bootstrap

- Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. -

- -

- Get started - Download +

+ + + CSS Grid, offcanvas navbars, improved utilities, and more! + +

Build fast, responsive sites with Bootstrap

+ Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. +

+ {{ highlight "npm i bootstrap" "sh" "" }}

- Currently v{{ .Site.Params.current_version }} - · - v4.6.x docs - · - All releases -

+ + + Read the docs +

+ Currently v{{ .Site.Params.current_version }} + · + Download + · + v4.6.x docs + · + All releases +

+ {{ partial "ads" . }}

- {{ partial "ads" . }}

diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html new file mode 100644 index 000000000..9841e143a --- /dev/null +++ b/site/layouts/partials/icons.html @@ -0,0 +1,72 @@ + diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 2b70521f5..5e2e52e90 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -25,8 +25,7 @@ // Open in StackBlitz logic document.querySelectorAll('.btn-edit').forEach(btn => { btn.addEventListener('click', event => { - const htmlSnippet = event.target.closest('.bd-edit').previousSibling.innerHTML - + const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML StackBlitzSDK.openBootstrapSnippet(htmlSnippet) }) }) diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index a808c2589..9dab2f9d1 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -15,17 +15,30 @@ {{- $show_markup := .Get "show_markup" | default true -}} {{- $input := .Inner -}} -{{- if eq $show_preview true -}} - - {{- $input -}} -

-{{- end -}} - -{{- if eq $show_markup true -}} -

- +

+ {{- if eq $show_preview true -}} + + {{- $input -}}

- {{- $content := replaceRE `

` $input -}} - {{- $content = replaceRE ` (class=" *?")` "" $content -}} - {{- highlight (trim $content "\n") $lang "" -}} -{{- end -}} + {{- end -}} + + {{- if eq $show_markup true -}} + {{- if eq $show_preview true -}} +

+ {{- $lang -}} +

+ + +

+ {{- end -}} + + {{- $content := replaceRE `

` $input -}} + {{- $content = replaceRE ` (class=" *?")` "" $content -}} + {{- highlight (trim $content "\n") $lang "" -}} + {{- end -}} +

diff --git a/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png new file mode 100644 index 000000000..81b000dbf Binary files /dev/null and b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png differ diff --git a/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png new file mode 100644 index 000000000..af5313436 Binary files /dev/null and b/site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png differ -- cgit v1.2.3 From 5602093c7be8726f1b1043b3d71bb887d6f1f607 Mon Sep 17 00:00:00 2001 From: Toto Date: Mon, 18 Apr 2022 15:56:13 +0700 Subject: change `.border-right` to `.border-end` --- site/content/docs/5.1/examples/modals/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site') diff --git a/site/content/docs/5.1/examples/modals/index.html b/site/content/docs/5.1/examples/modals/index.html index 8043f2b44..0f16aabf8 100644 --- a/site/content/docs/5.1/examples/modals/index.html +++ b/site/content/docs/5.1/examples/modals/index.html @@ -83,7 +83,7 @@ body_class: ""

You can always change your mind in your account settings.

-- cgit v1.2.3 From 3990ff04a00f2768b768e1c852594e3a365b9c61 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 18:05:09 -0700 Subject: Fix spacing of code snippets --- site/assets/scss/_component-examples.scss | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) (limited to 'site') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b305f088f..701682d20 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,16 +85,10 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem ($bd-gutter-x * -.5) 0; - border: solid $border-color; - border-width: 1px 0 0; @include clearfix(); @include media-breakpoint-up(md) { padding: 1.5rem; - margin-right: 0; - margin-left: 0; - border-width: 1px; @include border-top-radius(var(--bs-border-radius)); } @@ -375,23 +369,24 @@ } } -.bd-example-snippet { +.bd-code-snippet { + margin: $spacer ($bd-gutter-x * -.5); + border: solid $border-color; + border-width: 1px 0; + .highlight { - @include border-top-radius(0); - border: 1px solid $border-color; - } - .highlight-toolbar { - border: solid $border-color; - border-width: 0 1px; + margin-bottom: 0; } -} - -.bd-content .highlight { - margin-right: $bd-gutter-x * -.5; - margin-left: $bd-gutter-x * -.5; @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; + border-width: 1px; + @include border-radius($border-radius); } } + +.highlight-toolbar { + border: solid $border-color; + border-width: 1px 0; +} -- cgit v1.2.3 From 3362c8cf13cc3610a6e0ac1efc673f7f8c74ac08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 20:56:18 -0700 Subject: Do some CSS and Migration guide cleanup (#36191) * Do some CSS and Migration guide cleanup - More code snippet tweaks - Fix some homepage hero bugs - Do a cleanup on Migration guide content to highlight more changes and fix some issues from merge conflicts --- site/assets/scss/_component-examples.scss | 12 +++++++--- site/assets/scss/_masthead.scss | 6 ++++- site/assets/scss/_syntax.scss | 2 +- site/content/docs/5.1/components/offcanvas.md | 22 ++++-------------- site/content/docs/5.1/migration.md | 32 +++++++++------------------ 5 files changed, 30 insertions(+), 44 deletions(-) (limited to 'site') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 701682d20..73ffe2f8e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -82,6 +82,15 @@ // Docs examples // +.bd-example-snippet { + border: solid $border-color; + border-width: 1px 0; + + @include media-breakpoint-up(md) { + border-width: 1px; + } +} + .bd-example { position: relative; padding: 1rem; @@ -371,8 +380,6 @@ .bd-code-snippet { margin: $spacer ($bd-gutter-x * -.5); - border: solid $border-color; - border-width: 1px 0; .highlight { margin-bottom: 0; @@ -381,7 +388,6 @@ @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; - border-width: 1px; @include border-radius($border-radius); } } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 42ad0f385..4bb356e10 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -20,9 +20,13 @@ color: $gray-700; } + .bd-code-snippet { + margin: 0; + @include border-radius(.5rem); + } + .highlight { padding: .5rem 4rem .5rem 1rem; - margin-bottom: 0; line-height: 1.25; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 662f70dc4..487550bfd 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -35,7 +35,7 @@ font-weight: 600; color: #fff; } -.gi { color: var(--base0C); } +.gi { color: var(--bs-success); } .gp { font-weight: 600; color: var(--base04); diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 6ad9b6e89..3abdc3acf 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -143,24 +143,10 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. -

- - -

Resize your browser to show the responsive offcanvas toggle.

- -

This is content within an .offcanvas-lg.

+{{< example >}} + -```html - +

Resize your browser to show the responsive offcanvas toggle.

-``` +{{< /example >}} Responsive offcanvas classes are available across for each breakpoint. diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index baba2dffa..21b965e56 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -17,23 +17,7 @@ Bootstrap v5.2.0 features a subtle design update for a handful of components and ### More CSS variables -**We've updated nearly all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. - -The following components are now built with CSS variables: - -- [Alerts]({{< docsref "/components/alerts/" >}}) -- [Badges]({{< docsref "/components/badge/" >}}) -- [Breadcrumbs]({{< docsref "/components/breadcrumb/" >}}) -- [Buttons]({{< docsref "/components/buttons/" >}}) -- [Dropdowns]({{< docsref "/components/dropdowns/" >}}) -- [Navbars]({{< docsref "/components/navbar/" >}}) -- [Pagination]({{< docsref "/components/pagination/" >}}) -- [Popovers]({{< docsref "/components/popovers/" >}}) -- [Progress]({{< docsref "/components/progress/" >}}) -- [Spinners]({{< docsref "/components/spinners/" >}}) -- [Tooltips]({{< docsref "/components/tooltips/" >}}) - -Read more about CSS variables in each component on their respective documentation pages. The rest of our components, forms, and more will be updated by v5.3. +**We've updated all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. In subsequent releases, we'll continue to expand our use of CSS variables into our layout, forms, helpers, and utilities. Read more about CSS variables in each component on their respective documentation pages. Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we'd love to fully implement these across the board, they do run the risk of causing breaking changes. For example, setting `$alert-border-width: var(--bs-border-width)` in our source code breaks potential Sass in your own code if you were doing `$alert-border-width * 2` for some reason. @@ -43,7 +27,7 @@ As such, wherever possible, we will continue to push towards more CSS variables, **Bootstrap v5.2.0 introduced a new Sass file with `_maps.scss`.** It pulls out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. _There's a similar shortcoming with CSS variables when they're used to compose other CSS variables._ -This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`: +This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new `_maps.scss`: - `$theme-colors-rgb` - `$utilities-colors` @@ -92,11 +76,19 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa - **Introduced new `$enable-container-classes` option. —** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. Containers also now keep their gutter values. +- **Offcanvas component now has [responsive variations]({{< docsref "/components/offcanvas#responsive" >}}).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class. + - **Thicker table dividers are now opt-in. —** We've removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, `.table-group-divider`. [See the table docs for an example.]({{< docsref "/content/tables#table-group-dividers" >}}) +- **[Scrollspy has been rewritten](https://github.com/twbs/bootstrap/pull/33421) to use the Intersection Observer API**, which means you no longer need relative parent wrappers, deprecates `offset` config, and more. Look for your Scrollspy implementations to be more accurate and consistent in their nav highlighting. + +- **Popovers and tooltips now use CSS variables.** Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: `$popover-arrow-color`, `$popover-arrow-outer-color`, and `$tooltip-arrow-color`. + - Added `.form-check-reverse` modifier to flip the order of labels and associated checkboxes/radios. -- Added striped columns support to tables via +- Added [striped columns]({{< docsref "/content/tables#striped-columns" >}}) support to tables via the new `.table-striped-columns` class. + +For a complete list of changes, [see the v5.2.0 project on GitHub](https://github.com/twbs/bootstrap/projects/32). ## v5.1.0 @@ -128,8 +120,6 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co **Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don't reflect the additional changes shown above. {{< /callout >}} -- **Popovers and tooltips now use CSS variables.** Both components have been updated to use CSS variables on their base classes, `.popover` and `.tooltip`. Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: `$popover-arrow-color`, `$popover-arrow-outer-color`, and `$tooltip-arrow-color`. - ## Dependencies - Dropped jQuery. -- cgit v1.2.3 From 2aad1696f1536202b1d66205f7f9889b3b311755 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 21:41:58 -0700 Subject: One more code snippet fix --- site/assets/scss/_component-examples.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'site') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 73ffe2f8e..75d4e96cd 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -94,13 +94,25 @@ .bd-example { position: relative; padding: 1rem; + margin: 0 ($bd-gutter-x * -.5); + border: solid $border-color; + border-width: 1px 0 0; @include clearfix(); @include media-breakpoint-up(md) { padding: 1.5rem; + margin-right: 0; + margin-left: 0; + border-width: 1px; @include border-top-radius(var(--bs-border-radius)); } + + .bd-code-snippet { + @include border-top-radius(0); + border: solid $border-color; + border-width: 0 1px 1px; + } + + p { margin-top: 2rem; } @@ -379,12 +391,16 @@ } .bd-code-snippet { - margin: $spacer ($bd-gutter-x * -.5); + margin: 0 ($bd-gutter-x * -.5) $spacer; .highlight { margin-bottom: 0; } + .bd-example { + border: 0; + } + @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; -- cgit v1.2.3 From 9ec51f449904bae076b2334e748559706182f046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 19 Apr 2022 08:14:40 +0200 Subject: Realign Cheatsheet nav tabs example rendering with the examples in the doc --- site/content/docs/5.1/examples/cheatsheet/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html index 580e084df..c3c76fae0 100644 --- a/site/content/docs/5.1/examples/cheatsheet/index.html +++ b/site/content/docs/5.1/examples/cheatsheet/index.html @@ -1174,13 +1174,13 @@ body_class: "bg-light"

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

{{< /example >}} -- cgit v1.2.3 From e089aef00fef68c6a815327d8b988e14cfcf4d9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Apr 2022 11:21:43 -0700 Subject: Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things --- site/assets/scss/_component-examples.scss | 190 ++++----- site/content/docs/5.1/components/modal.md | 4 +- site/content/docs/5.1/components/offcanvas.md | 2 +- site/content/docs/5.1/components/pagination.md | 4 +- site/content/docs/5.1/components/tooltips.md | 15 +- site/content/docs/5.1/layout/css-grid.md | 30 +- site/content/docs/5.1/utilities/flex.md | 546 ++++++++++++------------- site/content/docs/5.1/utilities/position.md | 2 +- 8 files changed, 378 insertions(+), 415 deletions(-) (limited to 'site') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 75d4e96cd..d48154a86 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -1,83 +1,3 @@ -// -// Grid examples -// - -.bd-example-row { - .row { - > .col, - > [class^="col-"] { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(39, 41, 43, .03); - border: 1px solid rgba(39, 41, 43, .1); - } - } - - .row + .row { - margin-top: 1rem; - } -} - -.bd-example-row-flex-cols .row { - min-height: 10rem; - background-color: rgba(255, 0, 0, .1); -} - -.bd-example-cssgrid { - text-align: center; - - .grid + .grid { - margin-top: 1rem; - } - - .grid > * { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(255, 0, 255, .1); - border: 1px solid rgba(255, 0, 255, .25); - } -} - -.bd-highlight { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); -} - -// Grid mixins -.example-container { - width: 800px; - @include make-container(); -} - -.example-row { - @include make-row(); -} - -.example-content-main { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(8); - } -} - -.example-content-secondary { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(4); - } -} - - // // Docs examples // @@ -92,15 +12,18 @@ } .bd-example { + --bd-example-padding: 1rem; + position: relative; - padding: 1rem; + padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5); border: solid $border-color; - border-width: 1px 0 0; + border-width: 1px 0; @include clearfix(); @include media-breakpoint-up(md) { - padding: 1.5rem; + --bd-example-padding: 1.5rem; + margin-right: 0; margin-left: 0; border-width: 1px; @@ -127,7 +50,7 @@ > .alert + .alert, > .navbar + .navbar, > .progress + .progress { - margin-top: 1rem; + margin-top: $spacer; } > .dropdown-menu { @@ -171,30 +94,80 @@ .fixed-top, .sticky-top { position: static; - margin: -1rem -1rem 1rem; + margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list } .fixed-bottom, .sticky-bottom { position: static; - margin: 1rem -1rem -1rem; - } + margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list - @include media-breakpoint-up(sm) { - .fixed-top, - .sticky-top { - margin: -1.5rem -1.5rem 1rem; - } - .fixed-bottom, - .sticky-bottom { - margin: 1rem -1.5rem -1.5rem; - } } // Pagination .pagination { - margin-top: .5rem; - margin-bottom: .5rem; + margin-bottom: 0; + } +} + +// +// Grid examples +// + +.bd-example-row [class^="col"], +.bd-example-cssgrid .grid > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(var(--bd-violet-rgb), .1); + border: 1px solid rgba(var(--bd-violet-rgb), .25); +} + +.bd-example-row .row + .row, +.bd-example-cssgrid .grid + .grid { + margin-top: 1rem; +} + +.bd-example-row-flex-cols .row { + min-height: 10rem; + background-color: rgba(255, 0, 0, .1); +} + +.bd-example-flex div { + background-color: rgba($bd-purple, .15); + border: 1px solid rgba($bd-purple, .15); +} + +// Grid mixins +.example-container { + width: 800px; + @include make-container(); +} + +.example-row { + @include make-row(); +} + +.example-content-main { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(8); + } +} + +.example-content-secondary { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(4); } } @@ -224,18 +197,7 @@ } } -.bd-example-modal { - background-color: #fafafa; - - .modal { - position: static; - display: block; - } -} - .bd-example-offcanvas { - @include border-start-radius(0); - .offcanvas { position: static; display: block; @@ -250,9 +212,11 @@ white-space: nowrap; } +// scss-docs-start custom-tooltip .custom-tooltip { --bs-tooltip-bg: var(--bs-primary); } +// scss-docs-end custom-tooltip // scss-docs-start custom-popovers .custom-popover { @@ -290,7 +254,6 @@ .active { background-color: rgba($bd-purple, .15); } - } .bd-example-border-utils { @@ -317,7 +280,7 @@ .bd-example-position-utils { position: relative; - padding: 3em; + padding: 2rem; .position-relative { height: 200px; @@ -325,8 +288,8 @@ } .position-absolute { - width: 2em; - height: 2em; + width: 2rem; + height: 2rem; background-color: $dark; @include border-radius(); } @@ -398,6 +361,7 @@ } .bd-example { + margin: 0; border: 0; } diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index a33f7e615..d9bd120d4 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines. Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. -

diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 3abdc3acf..56ae26e6b 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -151,7 +151,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified

This is content within an .offcanvas-lg.

diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md index 8e05a1861..725140576 100644 --- a/site/content/docs/5.1/components/pagination.md +++ b/site/content/docs/5.1/components/pagination.md @@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for ## Alignment -Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). +Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`: {{< example >}} {{< /example >}} +Or with `.justify-content-end`: + {{< example >}}

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project. +

Item 1

...

Item 1-1

...

Item 1-2

...

Item 2

...

Item 3

...

Item 3-1

...

Item 3-2

...

Item 1

...

Item 1-1

...

Item 1-2

...

Item 2

...

Item 3

...

Item 3-1

...

Item 3-2

...

``` -- cgit v1.2.3 From 584600bda36ac13ea325617783216d6c6a331c08 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 21 Apr 2022 21:41:43 +0300 Subject: Manipulator: Add JSON parse support (#35077) Support parsing JSON from each component's main element using the `data-bs-config` attribute. The `bs-config` attribute will be reserved and omitted during `getDataAttributes` parsing. With this commit, every component, will create its config object, using: * defaults * data-bs-config * the rest of data attributes * configuration object given during instance initialization Co-authored-by: XhmikosR Co-authored-by: Mark Otto Co-authored-by: Mark Otto --- site/content/docs/5.1/components/carousel.md | 4 +++- site/content/docs/5.1/components/collapse.md | 4 +++- site/content/docs/5.1/components/dropdowns.md | 4 +++- site/content/docs/5.1/components/modal.md | 4 +++- site/content/docs/5.1/components/offcanvas.md | 4 +++- site/content/docs/5.1/components/popovers.md | 4 +++- site/content/docs/5.1/components/scrollspy.md | 4 +++- site/content/docs/5.1/components/toasts.md | 4 +++- site/content/docs/5.1/components/tooltips.md | 4 +++- site/layouts/partials/js-data-attributes.md | 3 +++ 10 files changed, 30 insertions(+), 9 deletions(-) create mode 100644 site/layouts/partials/js-data-attributes.md (limited to 'site') diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md index 86de96a07..14f91911d 100644 --- a/site/content/docs/5.1/components/carousel.md +++ b/site/content/docs/5.1/components/carousel.md @@ -308,7 +308,9 @@ var carousel = new bootstrap.Carousel(myCarousel) ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md index 4fb6f5e94..60b16826c 100644 --- a/site/content/docs/5.1/components/collapse.md +++ b/site/content/docs/5.1/components/collapse.md @@ -141,7 +141,9 @@ var collapseList = collapseElementList.map(function (collapseEl) { ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 7751a9bad..86b8491ca 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -1064,7 +1064,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index d9bd120d4..011aee2f4 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -820,7 +820,9 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 56ae26e6b..10d184ed5 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -279,7 +279,9 @@ var offcanvasList = offcanvasElementList.map(function (offcanvasEl) { ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md index f2cfdb6d0..7dce91563 100644 --- a/site/content/docs/5.1/components/popovers.md +++ b/site/content/docs/5.1/components/popovers.md @@ -166,7 +166,9 @@ Additionally, while it is possible to also include interactive controls (such as ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index 6dfd9732f..e48cc06f2 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -338,7 +338,9 @@ Target elements that are not visible will be ignored and their corresponding nav ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-root-margin=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index a54a6656a..32a0f2f41 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -355,7 +355,9 @@ var toastList = toastElList.map(function (toastEl) { ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< bs-table "table" >}} | Name | Type | Default | Description | diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index 9460da2a0..f913ff5fe 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -193,7 +193,9 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`. +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. diff --git a/site/layouts/partials/js-data-attributes.md b/site/layouts/partials/js-data-attributes.md new file mode 100644 index 000000000..c188652f0 --- /dev/null +++ b/site/layouts/partials/js-data-attributes.md @@ -0,0 +1,3 @@ +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`. + +As of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`. -- cgit v1.2.3 From 554736834dd929263ab307593f4d4d3f28f61479 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 21 Apr 2022 22:42:17 +0300 Subject: Carousel: Fix not used option (`ride`), simplify `cycle` method (#35983) * Fix not used option (`ride`) (according to docs), continuing of #35753 a247fe9 * separate concept of `programmatical cycle` vs `maybe cycle after click` functionality --- site/content/docs/5.1/components/carousel.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md index 14f91911d..782d620aa 100644 --- a/site/content/docs/5.1/components/carousel.md +++ b/site/content/docs/5.1/components/carousel.md @@ -77,7 +77,7 @@ Adding in the previous and next controls. We recommend using ` @@ -110,7 +110,7 @@ You can also add the indicators to the carousel, alongside the controls, too. Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. {{< example >}} -

@@ -318,9 +318,9 @@ var carousel = new bootstrap.Carousel(myCarousel) | `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically cycle. | | `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. | | `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. | -| `ride` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If set to`"carousel"`, autoplays the carousel on load. | -| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. | +| `ride` | string, boolean | `false` | If set to `true`, autoplays the carousel after the user manually cycles the first item. If set to `"carousel"`, autoplays the carousel on load. | | `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. | +| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. | {{< /bs-table >}} ### Methods -- cgit v1.2.3 From 9a614a7e1dd21d6a4b2f6e36c0ad390fd4767528 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 21 Apr 2022 10:05:14 -0700 Subject: Add .show class to offcanvas example, and disable it's normal behavior in our JS --- site/assets/js/application.js | 8 ++++++++ site/content/docs/5.1/components/offcanvas.md | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) (limited to 'site') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 55e896980..20d917990 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -131,4 +131,12 @@ modalBodyInput.value = recipient }) } + + // Offcanvas demo + const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + if (myOffcanvas) { + myOffcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + } })() diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 10d184ed5..5df9aecc1 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -28,7 +28,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. {{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} -

Offcanvas

-- cgit v1.2.3 From 00d45b11e7088981d52027df65bebf7f5e4c6050 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 26 Apr 2022 19:38:41 +0300 Subject: Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter --- site/.eslintrc.json | 36 +++++++++++++++++++ site/content/docs/5.1/components/alerts.md | 33 ++++++++--------- site/content/docs/5.1/components/buttons.md | 8 ++--- site/content/docs/5.1/components/carousel.md | 11 +++--- site/content/docs/5.1/components/collapse.md | 13 +++---- site/content/docs/5.1/components/dropdowns.md | 16 ++++----- site/content/docs/5.1/components/list-group.md | 35 +++++++++--------- site/content/docs/5.1/components/modal.md | 32 +++++++++-------- site/content/docs/5.1/components/navs-tabs.md | 32 ++++++++--------- site/content/docs/5.1/components/offcanvas.md | 13 +++---- site/content/docs/5.1/components/popovers.md | 27 +++++++------- site/content/docs/5.1/components/scrollspy.md | 13 ++++--- site/content/docs/5.1/components/toasts.md | 22 ++++++------ site/content/docs/5.1/components/tooltips.md | 29 +++++++-------- site/content/docs/5.1/customize/optimize.md | 2 ++ .../content/docs/5.1/getting-started/javascript.md | 42 +++++++++++----------- site/content/docs/5.1/getting-started/parcel.md | 1 + site/content/docs/5.1/getting-started/webpack.md | 8 +++-- site/content/docs/5.1/migration.md | 4 +-- 19 files changed, 198 insertions(+), 179 deletions(-) (limited to 'site') diff --git a/site/.eslintrc.json b/site/.eslintrc.json index 5bdb283e2..7cca4bc20 100644 --- a/site/.eslintrc.json +++ b/site/.eslintrc.json @@ -3,6 +3,42 @@ "browser": true, "node": false }, + "plugins": [ + "markdown" + ], + "overrides": [ + { + // 2. Enable the Markdown processor for all .md files. + "files": ["./**/*.md"], + "processor": "markdown/markdown" + }, + { + // In v2, configuration for fenced code blocks is separate from the + // containing Markdown file. Each code block has a virtual filename + // appended to the Markdown file's path. + "files": [ + "./**/*.md/*.js" + ], + // Configuration for fenced code blocks goes with the override for + // the code block's virtual filename, for example: + "parserOptions": { + "ecmaFeatures": { + "impliedStrict": true + } + }, + "rules": { + "no-array-for-each": "off", + "no-undef": "off", + "no-unused-vars": "off", + "unicorn/no-array-for-each": "off", + "unicorn/numeric-separators-style": "off", + "no-unused-expressions": "off", + "no-unused-labels": "off", + "no-labels": "off", + "no-redeclare": "off" + } + } + ], "parserOptions": { "sourceType": "script" }, diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index 694b749bd..59f9a349f 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -35,18 +35,23 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: ```js -var alertPlaceholder = document.getElementById('liveAlertPlaceholder') -var alertTrigger = document.getElementById('liveAlertBtn') +const alertPlaceholder = document.getElementById('liveAlertPlaceholder') -function alert(message, type) { - var wrapper = document.createElement('div') - wrapper.innerHTML = '

' + message + '

' +const alert = (message, type) => { + const wrapper = document.createElement('div') + wrapper.innerHTML = [ + `

`, + `

${message}

`, + ' ', + '

' + ].join('') alertPlaceholder.append(wrapper) } +const alertTrigger = document.getElementById('liveAlertBtn') if (alertTrigger) { - alertTrigger.addEventListener('click', function () { + alertTrigger.addEventListener('click', () => { alert('Nice, you triggered this alert message!', 'success') }) } @@ -189,10 +194,8 @@ Loop that generates the modifier classes with the `alert-variant()` mixin. Initialize elements as alerts ```js -var alertList = document.querySelectorAll('.alert') -var alerts = Array.prototype.slice.call(alertList).map(function (element) { - return new bootstrap.Alert(element) -}) +const alertList = document.querySelectorAll('.alert') +const alerts = [...alertList].map(element => new bootstrap.Alert(element)) ``` {{< callout info >}} @@ -212,8 +215,7 @@ See the [triggers](#triggers) section for more details. You can create an alert instance with the alert constructor, for example: ```js -var myAlert = document.getElementById('myAlert') -var bsAlert = new bootstrap.Alert(myAlert) +const bsAlert = new bootstrap.Alert('#myAlert') ``` This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.) @@ -230,8 +232,7 @@ This makes an alert listen for click events on descendant elements which have th Basic usage: ```js -var alertNode = document.querySelector('.alert') -var alert = bootstrap.Alert.getOrCreateInstance(alertNode) +const alert = bootstrap.Alert.getOrCreateInstance('#myAlert') alert.close() ``` @@ -247,8 +248,8 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali {{< /bs-table >}} ```js -var myAlert = document.getElementById('myAlert') -myAlert.addEventListener('closed.bs.alert', function () { +const myAlert = document.getElementById('myAlert') +myAlert.addEventListener('closed.bs.alert', event => { // do something, for instance, explicitly move focus to the most appropriate element, // so it doesn't get lost/reset to the start of the page // document.getElementById('...').focus() diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md index bacc6b23d..fb9249e6c 100644 --- a/site/content/docs/5.1/components/buttons.md +++ b/site/content/docs/5.1/components/buttons.md @@ -180,8 +180,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre You can create a button instance with the button constructor, for example: ```js -var button = document.getElementById('myButton') -var bsButton = new bootstrap.Button(button) +const bsButton = new bootstrap.Button('#myButton') ``` {{< bs-table "table" >}} @@ -196,9 +195,8 @@ var bsButton = new bootstrap.Button(button) For example, to toggle all buttons ```js -var buttons = document.querySelectorAll('.btn') -buttons.forEach(function (button) { - var button = new bootstrap.Button(button) +document.querySelectorAll('.btn').forEach(buttonElement => { + const button = bootstrap.Button.getOrCreateInstance(buttonElement) button.toggle() }) ``` diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md index 782d620aa..2714a09dc 100644 --- a/site/content/docs/5.1/components/carousel.md +++ b/site/content/docs/5.1/components/carousel.md @@ -302,8 +302,7 @@ The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating Call carousel manually with: ```js -var myCarousel = document.querySelector('#myCarousel') -var carousel = new bootstrap.Carousel(myCarousel) +const carousel = new bootstrap.Carousel('#myCarousel') ``` ### Options @@ -332,8 +331,8 @@ var carousel = new bootstrap.Carousel(myCarousel) You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items: ```js -var myCarousel = document.querySelector('#myCarousel') -var carousel = new bootstrap.Carousel(myCarousel, { +const myCarouselElement = document.querySelector('#myCarousel') +const carousel = new bootstrap.Carousel(myCarouselElement, { interval: 2000, wrap: false }) @@ -372,9 +371,9 @@ All carousel events are fired at the carousel itself (i.e. at the `

new bootstrap.Dropdown(dropdownToggleEl)) ``` {{< callout info >}} @@ -1082,9 +1080,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d #### Using function with `popperConfig` ```js -var dropdown = new bootstrap.Dropdown(element, { - popperConfig: function (defaultBsPopperConfig) { - // var newPopperConfig = {...} +const dropdown = new bootstrap.Dropdown(element, { + popperConfig(defaultBsPopperConfig) { + // const newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } @@ -1119,8 +1117,8 @@ All dropdown events are fired at the toggling element and then bubbled up. So yo {{< /bs-table >}} ```js -var myDropdown = document.getElementById('myDropdown') -myDropdown.addEventListener('show.bs.dropdown', function () { +const myDropdown = document.getElementById('myDropdown') +myDropdown.addEventListener('show.bs.dropdown', event => { // do something... }) ``` diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md index c566a3138..45d65ddc0 100644 --- a/site/content/docs/5.1/components/list-group.md +++ b/site/content/docs/5.1/components/list-group.md @@ -405,11 +405,11 @@ You can activate a list group navigation without writing any JavaScript by simpl Enable tabbable list item via JavaScript (each list item needs to be activated individually): ```js -var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab a')) -triggerTabList.forEach(function (triggerEl) { - var tabTrigger = new bootstrap.Tab(triggerEl) +const triggerTabList = document.querySelectorAll('#myTab a') +triggerTabList.forEach(triggerEl => { + const tabTrigger = new bootstrap.Tab(triggerEl) - triggerEl.addEventListener('click', function (event) { + triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) @@ -419,10 +419,10 @@ triggerTabList.forEach(function (triggerEl) { You can activate individual list item in several ways: ```js -var triggerEl = document.querySelector('#myTab a[href="#profile"]') +const triggerEl = document.querySelector('#myTab a[href="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name -var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') +const triggerFirstTabEl = document.querySelector('#myTab li:first-child a') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` @@ -461,8 +461,8 @@ Activates a list item element and content container. Tab should have either a `d

@@ -473,10 +473,9 @@ Activates a list item element and content container. Tab should have either a `d Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs). ```js - var someListItemEl = document.querySelector('#someListItem') - var tab = new bootstrap.Tab(someListItemEl) +const tab = new bootstrap.Tab('#someListItem') - tab.show() +tab.show() ``` #### dispose @@ -488,8 +487,7 @@ Destroys an element's tab. *Static* method which allows you to get the tab instance associated with a DOM element ```js -var triggerEl = document.querySelector('#trigger') -var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance +const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance ``` #### getOrCreateInstance @@ -497,8 +495,7 @@ var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized ```js -var triggerEl = document.querySelector('#trigger') -var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance +const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance ``` ### Events @@ -522,11 +519,11 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will {{< /bs-table >}} ```js -var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]') -tabElms.forEach(function(tabElm) { - tabElm.addEventListener('shown.bs.tab', function (event) { +const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]') +tabElms.forEach(tabElm => { + tabElm.addEventListener('shown.bs.tab', event => { event.target // newly activated tab event.relatedTarget // previous active tab }) -} +}) ``` diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index 011aee2f4..2db62d3bb 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -18,10 +18,10 @@ Before getting started with Bootstrap's modal component, be sure to read the fol - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: ```js -var myModal = document.getElementById('myModal') -var myInput = document.getElementById('myInput') +const myModal = document.getElementById('myModal') +const myInput = document.getElementById('myInput') -myModal.addEventListener('shown.bs.modal', function () { +myModal.addEventListener('shown.bs.modal', () => { myInput.focus() }) ``` @@ -478,20 +478,20 @@ Below is a live demo followed by example HTML and JavaScript. For more informati {{< /example >}} ```js -var exampleModal = document.getElementById('exampleModal') -exampleModal.addEventListener('show.bs.modal', function (event) { +const exampleModal = document.getElementById('exampleModal') +exampleModal.addEventListener('show.bs.modal', event => { // Button that triggered the modal - var button = event.relatedTarget + const button = event.relatedTarget // Extract info from data-bs-* attributes - var recipient = button.getAttribute('data-bs-whatever') + const recipient = button.getAttribute('data-bs-whatever') // If necessary, you could initiate an AJAX request here // and then do the updating in a callback. // // Update the modal's content. - var modalTitle = exampleModal.querySelector('.modal-title') - var modalBodyInput = exampleModal.querySelector('.modal-body input') + const modalTitle = exampleModal.querySelector('.modal-title') + const modalBodyInput = exampleModal.querySelector('.modal-body input') - modalTitle.textContent = 'New message to ' + recipient + modalTitle.textContent = `New message to ${recipient}` modalBodyInput.value = recipient }) ``` @@ -815,7 +815,9 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f Create a modal with a single line of JavaScript: ```js -var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) +const myModal = new bootstrap.Modal(document.getElementById('myModal'), options) +// or +const myModalAlternative = new bootstrap.Modal('#myModal', options) ``` ### Options @@ -843,7 +845,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) Activates your content as a modal. Accepts an optional options `object`. ```js -var myModal = new bootstrap.Modal(document.getElementById('myModal'), { +const myModal = new bootstrap.Modal('#myModal', { keyboard: false }) ``` @@ -852,7 +854,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), { | Method | Description | | --- | --- | | `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). | -| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | +| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | | `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | | `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). | | `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | @@ -875,8 +877,8 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit {{< /bs-table >}} ```js -var myModalEl = document.getElementById('myModal') -myModalEl.addEventListener('hidden.bs.modal', function (event) { +const myModalEl = document.getElementById('myModal') +myModalEl.addEventListener('hidden.bs.modal', event => { // do something... }) ``` diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index e8994fd0c..d43058b33 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -553,11 +553,11 @@ You can activate a tab or pill navigation without writing any JavaScript by simp Enable tabbable tabs via JavaScript (each tab needs to be activated individually): ```js -var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button')) -triggerTabList.forEach(function (triggerEl) { - var tabTrigger = new bootstrap.Tab(triggerEl) +const triggerTabList = document.querySelectorAll('#myTab button') +triggerTabList.forEach(triggerEl => { + const tabTrigger = new bootstrap.Tab(triggerEl) - triggerEl.addEventListener('click', function (event) { + triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) @@ -567,10 +567,10 @@ triggerTabList.forEach(function (triggerEl) { You can activate individual tabs in several ways: ```js -var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]') +const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name -var triggerFirstTabEl = document.querySelector('#myTab li:first-child button') +const triggerFirstTabEl = document.querySelector('#myTab li:first-child button') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` @@ -621,8 +621,8 @@ Activates a tab element and content container. Tab should have either a `data-bs

` element. group: helpers toc: true +added: "5.1" --- ## How it works diff --git a/site/content/docs/5.1/utilities/opacity.md b/site/content/docs/5.1/utilities/opacity.md index a2fdc3807..5cc4c225f 100644 --- a/site/content/docs/5.1/utilities/opacity.md +++ b/site/content/docs/5.1/utilities/opacity.md @@ -3,6 +3,7 @@ layout: docs title: Opacity description: Control the opacity of elements. group: utilities +added: "5.1" --- The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent. diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index dd234c387..4e81c6126 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -1,22 +1,34 @@ {{- $url := split .Permalink "/" -}} +{{- $page_version := index $url (sub (len $url) 4) -}} {{- $group_slug := index $url (sub (len $url) 3) -}} {{- $page_slug := index $url (sub (len $url) 2) -}} +{{- $versions_link := "" -}} +{{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}} + {{- .Scratch.Set "versions_link" (printf "%s/%s/" $group_slug $page_slug) -}} +{{- else if (eq .Layout "single") }} + {{- .Scratch.Set "versions_link" (printf "%s/" $page_slug) -}} +{{- end }} +

@@ -598,7 +598,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the

-- cgit v1.2.3 From 8cd3c3e3bc6b966c2be9491091ad1c0c629a4b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Apr 2022 20:40:23 -0700 Subject: Add new text-bg-color utilities --- site/content/docs/5.1/helpers/color-background.md | 52 +++++++++++++++++++++++ site/data/sidebar.yml | 1 + 2 files changed, 53 insertions(+) create mode 100644 site/content/docs/5.1/helpers/color-background.md (limited to 'site') diff --git a/site/content/docs/5.1/helpers/color-background.md b/site/content/docs/5.1/helpers/color-background.md new file mode 100644 index 000000000..c4174845c --- /dev/null +++ b/site/content/docs/5.1/helpers/color-background.md @@ -0,0 +1,52 @@ +--- +layout: docs +title: Color & background +description: Set a background color with contrasting foreground color. +group: helpers +toc: true +added: "5.2" +--- + +## Overview + +{{< added-in "5.2.0" >}} + +Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`. + +{{< callout warning >}} +**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities. +{{< /callout >}} + +{{< example >}} +{{< text-bg.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

{{ .name | title }} with contrasting color

+{{- end -}} +{{< /text-bg.inline >}} +{{< /example >}} + +## With components + +Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}): + +{{< example >}} +Primary +Info +{{< /example >}} + +Or on [cards]({{< docsref "/components/card#background-and-color" >}}): + +{{< example >}} +

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

+{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index eb03285c5..cdf0b04d8 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -100,6 +100,7 @@ icon_color: orange pages: - title: Clearfix + - title: Color & background - title: Colored links - title: Ratio - title: Position -- cgit v1.2.3 From 1ac2997cf623f8bf4217aab6bdd573b9f1ee7e48 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Apr 2022 09:58:10 -0700 Subject: Update badges, cards, and toasts to use new helpers --- site/content/docs/5.1/components/badge.md | 10 ++++++---- site/content/docs/5.1/components/card.md | 6 ++++-- site/content/docs/5.1/components/toasts.md | 4 ++-- 3 files changed, 12 insertions(+), 8 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md index e00b21a12..55b1ffb85 100644 --- a/site/content/docs/5.1/components/badge.md +++ b/site/content/docs/5.1/components/badge.md @@ -27,7 +27,7 @@ Badges can be used as part of links or buttons to provide a counter. {{< example >}} {{< /example >}} @@ -62,12 +62,14 @@ You can also replace the `.badge` class with a few more utilities without a coun ## Background colors -Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`. +{{< added-in "5.2.0" >}} + +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} +{{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} @@ -82,7 +84,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} +{{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md index 22b413325..9e395cd5e 100644 --- a/site/content/docs/5.1/components/card.md +++ b/site/content/docs/5.1/components/card.md @@ -417,12 +417,14 @@ Cards include various options for customizing their backgrounds, borders, and co ### Background and color -Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card. +{{< added-in "5.2.0" >}} + +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} -

Header

{{ .name | title }} card title

diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index 02fdff2d3..e0750d534 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -180,10 +180,10 @@ Alternatively, you can also add additional controls and components to toasts. ### Color schemes -Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. +Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. {{< example class="bg-light" >}} -

Hello, world! This is a toast message. -- cgit v1.2.3 From a078b5e0b9c11d5a04497c1d1561fe9d4e0b028b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Apr 2022 10:01:24 -0700 Subject: include in migration guide --- site/content/docs/5.1/migration.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'site') diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index d7fad95a6..9750e4e77 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -84,6 +84,8 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa - **Popovers and tooltips now use CSS variables.** Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: `$popover-arrow-color`, `$popover-arrow-outer-color`, and `$tooltip-arrow-color`. +- **Added new `.text-bg-{color}` helpers.** Instead of setting individual `.text-*` and `.bg-*` utilities, you can now use [the `.text-bg-*` helpers]({{< docsref "helpers/color-background" >}}) to set a `background-color` with contrasting foreground `color`. + - Added `.form-check-reverse` modifier to flip the order of labels and associated checkboxes/radios. - Added [striped columns]({{< docsref "/content/tables#striped-columns" >}}) support to tables via the new `.table-striped-columns` class. -- cgit v1.2.3 From 51535cd95ac8eb5746e19c057aeabdbcafef3a8b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Apr 2022 11:41:12 -0700 Subject: Improve version picker for new pages in v5.2.x --- site/layouts/partials/docs-versions.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'site') diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 4e81c6126..8e34122be 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -22,10 +22,14 @@

- + {{- if (eq .Page.Params.added "5.2") }} + + {{- else }} + + {{- end }}

- {{- if eq .Page.Params.added "5.1" }} + {{- if or (eq .Page.Params.added "5.1") (eq .Page.Params.added "5.2") }} {{- else }} -- cgit v1.2.3 From 5d9500bdfdd02b3b1d91df2be86b1723f517fc52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 6 May 2022 04:26:15 +0200 Subject: Handle disabled focused tabs with tab JavaScript plugin (#36169) * Handle disabled tabs * Fix after feedback * Update js/src/tab.js Co-authored-by: GeoSot * Update js/src/tab.js Co-authored-by: GeoSot * Commit suggestions via GitHub broke the thing * Add some unit tests * Remove temp doc modification * Add tests for left arrow * Add disabled tabs in JavaScript Behavior section * Compact 4 tests to 2 tests * Compact 4 tests to 2 tests * Add 'disabled' attribute for all buttons * Change the disabled pane position only for the vertical version * Change ids for the confusing first example in JavaScript behavior * Use disabled attribute instead of the class for buttons in tabs Co-authored-by: GeoSot --- site/content/docs/5.1/components/navs-tabs.md | 64 ++++++++++++++++++++------- 1 file changed, 48 insertions(+), 16 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index d43058b33..b3d306750 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -335,44 +335,54 @@ Use the tab JavaScript plugin—include it individually or through the compiled

- +
- +
- + +
+

This is some placeholder content the Disabled tab's associated content.

```html

- +
- +
- + +
+

...

``` @@ -384,6 +394,7 @@ To help fit your needs, this works with `

@@ -396,6 +407,9 @@ To help fit your needs, this works with `

This is some placeholder content the Disabled tab's associated content.

@@ -405,12 +419,14 @@ To help fit your needs, this works with `

...

``` @@ -427,6 +443,9 @@ The tabs plugin also works with pills.

+ +

@@ -438,6 +457,9 @@ The tabs plugin also works with pills.

This is some placeholder content the Disabled tab's associated content.

@@ -452,11 +474,15 @@ The tabs plugin also works with pills.

+ +

...

``` @@ -467,21 +493,25 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

@@ -492,12 +522,14 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o

...

-- cgit v1.2.3 From bca99232b8bef6a53719e4827de40729098d4ec8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 May 2022 21:32:02 -0700 Subject: Iterate on border utilities (#36239) * Remove `--bs-border-opacity: 1` from `.border-*` utilities We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this. * Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues * Add some demos of border utils to the docs --- site/content/docs/5.1/utilities/borders.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md index bba34358e..1df69f372 100644 --- a/site/content/docs/5.1/utilities/borders.md +++ b/site/content/docs/5.1/utilities/borders.md @@ -12,6 +12,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord ### Additive +Add borders to custom elements: + {{< example class="bd-example-border-utils" >}} @@ -22,6 +24,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord ### Subtractive +Or remove borders: + {{< example class="bd-example-border-utils bd-example-border-utils-0" >}} @@ -43,11 +47,22 @@ Change the border color using utilities built on our theme colors. {{< /example >}} -{{< callout >}} -Unlike text and background color utilities, border color utilities redeclare the `border-color` property **without** an additional `--bs-border-opacity`, as opposed to resetting only `--bs-border-color`. This ensures the backward compatibility of border color utilities applying to other components while providing additional functionality through CSS variables. +Or modify the default `border-color` of a component: -This will be revisited in a future major release. -{{< /callout >}} +{{< example >}} +

+ Email address + +

+ +

+ Dangerous heading +

+ +

+ Changing border color and width +

+{{< /example >}} ## Opacity -- cgit v1.2.3 From d2497b0384d05af9159743d7ff58fd071d5c5cbb Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 4 May 2022 01:48:30 +0300 Subject: ref(Docs assets): Separate js assets --- site/assets/js/application.js | 112 ----------------------------------- site/assets/js/snippets.js | 132 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+), 112 deletions(-) create mode 100644 site/assets/js/snippets.js (limited to 'site') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 20d917990..dec23635d 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -10,8 +10,6 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global bootstrap: false */ - (() => { 'use strict' @@ -29,114 +27,4 @@ sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2) } } - - // Tooltip and popover demos - document.querySelectorAll('.tooltip-demo') - .forEach(tooltip => { - new bootstrap.Tooltip(tooltip, { - selector: '[data-bs-toggle="tooltip"]' - }) - }) - - document.querySelectorAll('[data-bs-toggle="popover"]') - .forEach(popover => { - new bootstrap.Popover(popover) - }) - - const toastPlacement = document.getElementById('toastPlacement') - if (toastPlacement) { - document.getElementById('selectToastPlacement').addEventListener('change', function () { - if (!toastPlacement.dataset.originalClass) { - toastPlacement.dataset.originalClass = toastPlacement.className - } - - toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}` - }) - } - - document.querySelectorAll('.bd-example .toast') - .forEach(toastNode => { - const toast = new bootstrap.Toast(toastNode, { - autohide: false - }) - - toast.show() - }) - - const toastTrigger = document.getElementById('liveToastBtn') - const toastLiveExample = document.getElementById('liveToast') - if (toastTrigger) { - toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) - } - - const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - const alertTrigger = document.getElementById('liveAlertBtn') - - function alert(message, type) { - const wrapper = document.createElement('div') - wrapper.innerHTML = `

${message}

` - - alertPlaceholder.append(wrapper) - } - - if (alertTrigger) { - alertTrigger.addEventListener('click', () => { - alert('Nice, you triggered this alert message!', 'success') - }) - } - - // Demos within modals - document.querySelectorAll('.tooltip-test') - .forEach(tooltip => { - new bootstrap.Tooltip(tooltip) - }) - - document.querySelectorAll('.popover-test') - .forEach(popover => { - new bootstrap.Popover(popover) - }) - - // Indeterminate checkbox example - document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') - .forEach(checkbox => { - checkbox.indeterminate = true - }) - - // Disable empty links in docs examples - document.querySelectorAll('.bd-content [href="#"]') - .forEach(link => { - link.addEventListener('click', event => { - event.preventDefault() - }) - }) - - // Modal relatedTarget demo - const exampleModal = document.getElementById('exampleModal') - if (exampleModal) { - exampleModal.addEventListener('show.bs.modal', event => { - // Button that triggered the modal - const button = event.relatedTarget - // Extract info from data-bs-* attributes - const recipient = button.getAttribute('data-bs-whatever') - - // Update the modal's content. - const modalTitle = exampleModal.querySelector('.modal-title') - const modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = `New message to ${recipient}` - modalBodyInput.value = recipient - }) - } - - // Offcanvas demo - const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') - if (myOffcanvas) { - myOffcanvas.addEventListener('show.bs.offcanvas', event => { - event.preventDefault() - }, false) - } })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js new file mode 100644 index 000000000..61aec7d08 --- /dev/null +++ b/site/assets/js/snippets.js @@ -0,0 +1,132 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +/*! + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +/* global bootstrap: false */ + +(() => { + 'use strict' + + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(tooltip => { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(popover => { + new bootstrap.Popover(popover) + }) + + const toastPlacement = document.getElementById('toastPlacement') + if (toastPlacement) { + document.getElementById('selectToastPlacement').addEventListener('change', function () { + if (!toastPlacement.dataset.originalClass) { + toastPlacement.dataset.originalClass = toastPlacement.className + } + + toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}` + }) + } + + document.querySelectorAll('.bd-example .toast') + .forEach(toastNode => { + const toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + const toastTrigger = document.getElementById('liveToastBtn') + const toastLiveExample = document.getElementById('liveToast') + if (toastTrigger) { + toastTrigger.addEventListener('click', () => { + const toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) + } + + const alertPlaceholder = document.getElementById('liveAlertPlaceholder') + const alertTrigger = document.getElementById('liveAlertBtn') + + const appendAlert = (message, type) => { + const wrapper = document.createElement('div') + wrapper.innerHTML = [ + `

`, + `

${message}

`, + ' ', + '

' + ].join('') + + alertPlaceholder.append(wrapper) + } + + if (alertTrigger) { + alertTrigger.addEventListener('click', () => { + appendAlert('Nice, you triggered this alert message!', 'success') + }) + } + + // Demos within modals + document.querySelectorAll('.tooltip-test') + .forEach(tooltip => { + new bootstrap.Tooltip(tooltip) + }) + + document.querySelectorAll('.popover-test') + .forEach(popover => { + new bootstrap.Popover(popover) + }) + + // Indeterminate checkbox example + document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') + .forEach(checkbox => { + checkbox.indeterminate = true + }) + + // Disable empty links in docs examples + document.querySelectorAll('.bd-content [href="#"]') + .forEach(link => { + link.addEventListener('click', event => { + event.preventDefault() + }) + }) + + // Modal relatedTarget demo + const exampleModal = document.getElementById('exampleModal') + if (exampleModal) { + exampleModal.addEventListener('show.bs.modal', event => { + // Button that triggered the modal + const button = event.relatedTarget + // Extract info from data-bs-* attributes + const recipient = button.getAttribute('data-bs-whatever') + + // Update the modal's content. + const modalTitle = exampleModal.querySelector('.modal-title') + const modalBodyInput = exampleModal.querySelector('.modal-body input') + + modalTitle.textContent = `New message to ${recipient}` + modalBodyInput.value = recipient + }) + } + + // Offcanvas demo + const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + if (myOffcanvas) { + myOffcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + } +})() -- cgit v1.2.3 From 6b49d26b21cabb7322a820183c6d925263cddba1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 May 2022 16:56:43 -0700 Subject: v5.2.0: Migrate to DocSearch 3 (#36176) * Migrate to DocSearch v3 Fixes #33338 * initialize `siteDocsVersion` const after the proper check * Update site/layouts/partials/stylesheet.html Co-authored-by: GeoSot * Update header.html * code review changes * Update search.js * Fix contrast issue, tweak some styles * Fix some navbar changes * temporary safari fix for docsearch3 Co-authored-by: GeoSot Co-authored-by: XhmikosR --- site/assets/js/search.js | 45 ++++------ site/assets/scss/_navbar.scss | 2 +- site/assets/scss/_search.scss | 137 ++++++++++++++++++++++--------- site/assets/scss/_variables.scss | 3 +- site/layouts/_default/docs.html | 1 + site/layouts/partials/docs-navbar.html | 4 +- site/layouts/partials/docs-versions.html | 4 +- site/layouts/partials/header.html | 4 + site/layouts/partials/scripts.html | 2 +- site/layouts/partials/stylesheet.html | 5 +- 10 files changed, 131 insertions(+), 76 deletions(-) (limited to 'site') diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 6c90a2087..9bad2749f 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -5,51 +5,40 @@ (() => { 'use strict' - const inputElement = document.getElementById('search-input') + const searchElement = document.getElementById('docsearch') - if (!window.docsearch || !inputElement) { + if (!window.docsearch || !searchElement) { return } - const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') - - document.addEventListener('keydown', event => { - if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) { - event.preventDefault() - inputElement.focus() - } - }) - - if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) { - const searchShortcut = document.querySelector('.bd-search') - searchShortcut.setAttribute('data-shortcut', '⌃K') - } + const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version') window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', + apiKey: '3151f502c7b9e9dafd5e6372b691a24e', indexName: 'bootstrap', - inputSelector: '#search-input', - algoliaOptions: { + appId: 'AK7KMZKZHQ', + container: searchElement, + searchParameters: { facetFilters: [`version:${siteDocsVersion}`] }, - transformData(hits) { - return hits.map(hit => { + transformItems(items) { + return items.map(item => { const liveUrl = 'https://getbootstrap.com/' - hit.url = window.location.origin.startsWith(liveUrl) ? + item.url = window.location.origin.startsWith(liveUrl) ? // On production, return the result as is - hit.url : - // On development or Netlify, replace `hit.url` with a trailing slash, + item.url : + // On development or Netlify, replace `item.url` with a trailing slash, // so that the result link is relative to the server root - hit.url.replace(liveUrl, '/') + item.url.replace(liveUrl, '/') // Prevent jumping to first header - if (hit.anchor === 'content') { - hit.url = hit.url.replace(/#content$/, '') - hit.anchor = null + if (item.anchor === 'content') { + item.url = item.url.replace(/#content$/, '') + item.anchor = null } - return hit + return item }) }, // Set debug to `true` if you want to inspect the dropdown diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 57e3f47b7..4805a3c47 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -63,7 +63,7 @@ } .dropdown-toggle { - &:focus { + &:focus:not(:focus-visible) { outline: 0; } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 1825337a0..9739d7a3a 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -1,25 +1,9 @@ +// stylelint-disable selector-class-pattern + .bd-search { position: relative; width: 100%; - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: rgba($white, .65); - // content: "⌘K"; - content: attr(data-shortcut); - background-color: rgba($white, .1); - @include border-radius(.125rem); - } - @include media-breakpoint-up(lg) { position: absolute; top: .75rem; @@ -33,30 +17,105 @@ margin-left: -140px; } - .form-control { - padding-right: 2.75rem; - color: $white; - background-color: rgba($black, .1); - border-color: rgba($white, .4); - transition-property: background-color, border-color, box-shadow; +} - &::placeholder { - color: rgba($white, .65); - } +.DocSearch-Container { + --docsearch-muted-color: #{$text-muted}; + --docsearch-hit-shadow: none; - &::-webkit-search-cancel-button { - appearance: none; - width: 1rem; - height: 1rem; - cursor: pointer; - background: escape-svg($search-clear-icon) no-repeat 0 0; - background-size: 100% 100%; - } + z-index: 1030; - &:focus { - background-color: rgba($black, .25); - border-color: rgba($bd-accent, 1); - box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + @include media-breakpoint-up(lg) { + padding-top: 4rem; + } +} + +.DocSearch-Button { + --docsearch-searchbox-background: #{rgba($black, .1)}; + --docsearch-searchbox-color: #{$white}; + --docsearch-searchbox-focus-background: #{rgba($black, .25)}; + --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)}; + --docsearch-text-color: #{$white}; + --docsearch-muted-color: #{rgba($white, .65)}; + + width: 100%; + margin: 0; + border: 1px solid rgba($white, .4); + @include border-radius(.375rem); + + .DocSearch-Search-Icon { + opacity: .65; + } + + &:active, + &:focus, + &:hover { + border-color: rgba($bd-accent, 1); + + .DocSearch-Search-Icon { + opacity: 1; } } } + +.DocSearch-Button-Keys { + min-width: 0; + padding-right: .25rem; + padding-left: .25rem; + background: rgba($black, .25); + @include border-radius(.25rem); +} + +.DocSearch-Button-Key { + top: 0; + width: auto; + height: 1.25rem; + padding-right: .125rem; + padding-left: .125rem; + margin-right: 0; + font-size: .875rem; + background: none; + box-shadow: none; +} + +.DocSearch-Commands-Key { + padding-left: 1px; + font-size: .875rem; + background-color: rgba($black, .1); + background-image: none; + box-shadow: none; +} + +.DocSearch-Form { + @include border-radius(var(--bs-border-radius)); +} + +.DocSearch-Hits { + mark { + padding: 0; + } +} + +.DocSearch-Hit { + padding-bottom: 0; + @include border-radius(0); + + a { + @include border-radius(0); + border: solid var(--bs-border-color); + border-width: 0 1px 1px; + } + + &:first-child a { + @include border-top-radius(var(--bs-border-radius)); + border-top-width: 1px; + } + &:last-child a { + @include border-bottom-radius(var(--bs-border-radius)); + } +} + +.DocSearch-Hit-icon { + display: flex; + align-items: center; +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 8f74f94d0..b460392d0 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -6,7 +6,6 @@ $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable- $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; $dropdown-active-icon: url("data:image/svg+xml,"); -$search-clear-icon: url("data:image/svg+xml,"); $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; @@ -19,4 +18,6 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; + --docsearch-primary-color: var(--bd-violet); + --docsearch-logo-color: var(--bd-violet); } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 3c61cd342..d08e5a393 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -62,4 +62,5 @@ {{ range .Page.Params.extra_js -}} {{- end -}} +

{{ end }} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 441c2bd56..c54d3fa44 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -46,9 +46,7 @@

{{ if eq .Layout "docs" }} - - - +

{{ end }} diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 8e34122be..fb340bb59 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -11,9 +11,9 @@ {{- end }}

@@ -347,10 +347,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html ``` -- cgit v1.2.3 From 92e6856235555622c14f120b641f8118af33a5a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 7 May 2022 07:23:49 +0300 Subject: Docs(Scrollspy): minor changes to be aligned with new version of javascript (#36260) * Docs(Scrollspy): minor changes to be aligned with new version of javascript code * first example: add proper root-margin * 'nested nav' example: add more content to sections & enable smooth-scroll * fix typo * Changes after feedback * Update examples and docs to streamline some things and improve how it works section Co-authored-by: Mark Otto --- site/assets/scss/_component-examples.scss | 11 +--- site/content/docs/5.1/components/scrollspy.md | 76 +++++++++++++-------------- 2 files changed, 39 insertions(+), 48 deletions(-) (limited to 'site') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index d48154a86..52b67543a 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -242,17 +242,8 @@ } .simple-list-example-scrollspy { - a { - padding: .25rem; - margin: .5rem 0; - - &:focus { - background-color: rgba($bd-purple, .65); - } - } - .active { - background-color: rgba($bd-purple, .15); + background-color: rgba(var(--bd-violet-rgb), .15); } } diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index 21b6a5e2f..30cf79b3e 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -8,20 +8,26 @@ toc: true ## How it works -Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Generally, it will be most useful in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. +Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works. -{{< callout >}} -### Scrollable containers and keyboard access +- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `` or a custom element with a set `height` and `overflow-y: scroll`. -If you're making a scrollable container (other than the ``), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access. -{{< /callout >}} +- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access. + +- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `home` must correspond to something in the DOM like `

` + +- Target elements that aren't visible will be ignored and their corresponding nav items will never receive an `.active` class. -## Example in navbar +Checkout the examples below to see it in action. -Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. +## Examples + +### Navbar + +Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.

+ -

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

@@ -76,7 +82,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown

First heading

...

Second heading

@@ -90,15 +96,14 @@ Scroll the area below the navbar and watch the active class change. The dropdown

``` -## Example with nested nav +### Nested nav Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.