From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- .bundlewatch.config.json | 24 +- .cspell.json | 2 + .eslintignore | 3 +- .eslintrc.json | 157 +- .github/CONTRIBUTING.md | 18 +- .github/PULL_REQUEST_TEMPLATE.md | 2 +- .github/codeql/codeql-config.yml | 3 + .github/dependabot.yml | 11 +- .github/workflows/browserstack.yml | 12 +- .github/workflows/bundlewatch.yml | 11 +- .github/workflows/calibreapp-image-actions.yml | 2 + .github/workflows/codeql.yml | 14 +- .github/workflows/cspell.yml | 14 +- .github/workflows/css.yml | 14 +- .github/workflows/docs.yml | 11 +- .github/workflows/issue-close-require.yml | 7 + .github/workflows/issue-labeled.yml | 7 + .github/workflows/js.yml | 17 +- .github/workflows/lint.yml | 11 +- .github/workflows/node-sass.yml | 24 +- .github/workflows/release-notes.yml | 7 + .gitignore | 1 + .npmrc | 1 + .stylelintrc | 31 - .stylelintrc.json | 60 + CODE_OF_CONDUCT.md | 20 +- LICENSE | 3 +- README.md | 36 +- build/.eslintrc.json | 15 - build/banner.js | 1 + build/build-plugins.js | 7 +- build/change-version.js | 42 +- build/generate-sri.js | 15 +- build/rollup.config.js | 2 +- build/vnu-jar.js | 10 +- build/zip-examples.js | 4 +- config.yml | 88 - hugo.yml | 89 + js/index.esm.js | 26 +- js/index.umd.js | 26 +- js/src/alert.js | 10 +- js/src/base-component.js | 12 +- js/src/button.js | 8 +- js/src/carousel.js | 19 +- js/src/collapse.js | 23 +- js/src/dom/data.js | 2 +- js/src/dom/event-handler.js | 19 +- js/src/dom/manipulator.js | 2 +- js/src/dom/selector-engine.js | 53 +- js/src/dropdown.js | 21 +- js/src/modal.js | 27 +- js/src/offcanvas.js | 27 +- js/src/popover.js | 6 +- js/src/scrollspy.js | 14 +- js/src/tab.js | 22 +- js/src/toast.js | 10 +- js/src/tooltip.js | 36 +- js/src/util/backdrop.js | 8 +- js/src/util/component-functions.js | 9 +- js/src/util/config.js | 9 +- js/src/util/focustrap.js | 8 +- js/src/util/index.js | 68 +- js/src/util/sanitizer.js | 82 +- js/src/util/scrollbar.js | 8 +- js/src/util/swipe.js | 8 +- js/src/util/template-factory.js | 12 +- js/tests/browsers.js | 3 +- js/tests/integration/bundle-modularity.js | 2 + js/tests/integration/rollup.bundle-modularity.js | 4 +- js/tests/integration/rollup.bundle.js | 2 +- js/tests/karma.conf.js | 6 +- js/tests/unit/.eslintrc.json | 13 - js/tests/unit/alert.spec.js | 6 +- js/tests/unit/base-component.spec.js | 8 +- js/tests/unit/button.spec.js | 4 +- js/tests/unit/carousel.spec.js | 10 +- js/tests/unit/collapse.spec.js | 48 +- js/tests/unit/dom/data.spec.js | 6 +- js/tests/unit/dom/event-handler.spec.js | 6 +- js/tests/unit/dom/manipulator.spec.js | 4 +- js/tests/unit/dom/selector-engine.spec.js | 160 +- js/tests/unit/dropdown.spec.js | 9 +- js/tests/unit/jquery.spec.js | 26 +- js/tests/unit/modal.spec.js | 8 +- js/tests/unit/offcanvas.spec.js | 10 +- js/tests/unit/popover.spec.js | 6 +- js/tests/unit/scrollspy.spec.js | 42 +- js/tests/unit/tab.spec.js | 61 +- js/tests/unit/toast.spec.js | 4 +- js/tests/unit/tooltip.spec.js | 110 +- js/tests/unit/util/backdrop.spec.js | 6 +- js/tests/unit/util/component-functions.spec.js | 8 +- js/tests/unit/util/config.spec.js | 6 +- js/tests/unit/util/focustrap.spec.js | 8 +- js/tests/unit/util/index.spec.js | 138 +- js/tests/unit/util/sanitizer.spec.js | 80 +- js/tests/unit/util/scrollbar.spec.js | 6 +- js/tests/unit/util/swipe.spec.js | 8 +- js/tests/unit/util/template-factory.spec.js | 4 +- js/tests/visual/.eslintrc.json | 19 - js/tests/visual/button.html | 4 +- js/tests/visual/carousel.html | 2 +- js/tests/visual/input.html | 78 + js/tests/visual/modal.html | 2 +- js/tests/visual/scrollspy.html | 9 + js/tests/visual/toast.html | 2 +- js/tests/visual/tooltip.html | 2 +- nuget/bootstrap.nuspec | 5 +- nuget/bootstrap.png | Bin 6636 -> 6421 bytes nuget/bootstrap.sass.nuspec | 5 +- package-lock.json | 8950 +++++++++++--------- package.js | 2 +- package.json | 95 +- scss/_accordion.scss | 9 + scss/_alert.scss | 19 +- scss/_button-group.scss | 4 +- scss/_buttons.scss | 6 +- scss/_card.scss | 5 + scss/_carousel.scss | 22 +- scss/_close.scss | 41 +- scss/_dropdown.scss | 1 + scss/_functions.scss | 2 +- scss/_grid.scss | 6 + scss/_helpers.scss | 2 + scss/_list-group.scss | 19 +- scss/_maps.scss | 120 + scss/_mixins.scss | 3 +- scss/_nav.scss | 43 +- scss/_navbar.scss | 19 +- scss/_offcanvas.scss | 6 +- scss/_pagination.scss | 2 +- scss/_progress.scss | 11 +- scss/_reboot.scss | 6 +- scss/_root.scss | 131 +- scss/_tables.scss | 29 +- scss/_tooltip.scss | 9 +- scss/_utilities.scss | 185 +- scss/_variables-dark.scss | 85 + scss/_variables.scss | 415 +- scss/bootstrap-grid.scss | 4 +- scss/bootstrap-reboot.scss | 1 + scss/bootstrap-utilities.scss | 1 + scss/bootstrap.scss | 1 + scss/forms/_floating-labels.scss | 25 +- scss/forms/_form-check.scss | 35 +- scss/forms/_form-control.scss | 26 +- scss/forms/_form-select.scss | 13 +- scss/forms/_input-group.scss | 2 +- scss/helpers/_color-bg.scss | 2 - scss/helpers/_colored-links.scss | 22 +- scss/helpers/_focus-ring.scss | 5 + scss/helpers/_icon-link.scss | 25 + scss/mixins/_alert.scss | 5 +- scss/mixins/_banner.scss | 6 +- scss/mixins/_caret.scss | 55 +- scss/mixins/_color-mode.scss | 21 + scss/mixins/_forms.scss | 15 +- scss/mixins/_list-group.scss | 2 + scss/mixins/_utilities.scss | 2 +- scss/mixins/_visually-hidden.scss | 6 +- scss/tests/jasmine.js | 16 + scss/tests/mixins/_color-modes.test.scss | 69 + .../mixins/_media-query-color-mode-full.test.scss | 8 + scss/tests/mixins/_utilities.test.scss | 393 + scss/tests/sass-true/register.js | 14 + scss/tests/sass-true/runner.js | 17 + scss/tests/utilities/_api.test.scss | 75 + scss/vendor/_rfs.scss | 52 +- site/.eslintrc.json | 54 - site/assets/js/application.js | 8 +- site/assets/js/code-examples.js | 11 +- site/assets/js/search.js | 4 +- site/assets/js/snippets.js | 40 +- site/assets/scss/_ads.scss | 6 +- site/assets/scss/_brand.scss | 4 +- site/assets/scss/_buttons.scss | 25 +- site/assets/scss/_callouts.scss | 9 +- site/assets/scss/_clipboard-js.scss | 8 +- site/assets/scss/_colors.scss | 1 - site/assets/scss/_component-examples.scss | 142 +- site/assets/scss/_content.scss | 89 +- site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 53 +- site/assets/scss/_navbar.scss | 64 +- site/assets/scss/_scrolling.scss | 13 + site/assets/scss/_search.scss | 33 +- site/assets/scss/_sidebar.scss | 19 +- site/assets/scss/_syntax.scss | 57 +- site/assets/scss/_toc.scss | 36 +- site/assets/scss/_variables.scss | 26 +- site/assets/scss/docs.scss | 8 +- site/content/docs/5.2/_index.html | 5 - site/content/docs/5.2/about/brand.md | 47 - site/content/docs/5.2/about/license.md | 34 - site/content/docs/5.2/about/overview.md | 29 - site/content/docs/5.2/about/team.md | 23 - site/content/docs/5.2/about/translations.md | 20 - site/content/docs/5.2/components/accordion.md | 165 - site/content/docs/5.2/components/alerts.md | 257 - site/content/docs/5.2/components/badge.md | 103 - site/content/docs/5.2/components/breadcrumb.md | 111 - site/content/docs/5.2/components/button-group.md | 256 - site/content/docs/5.2/components/buttons.md | 242 - site/content/docs/5.2/components/card.md | 739 -- site/content/docs/5.2/components/carousel.md | 385 - site/content/docs/5.2/components/close-button.md | 38 - site/content/docs/5.2/components/collapse.md | 198 - site/content/docs/5.2/components/dropdowns.md | 1124 --- site/content/docs/5.2/components/list-group.md | 494 -- site/content/docs/5.2/components/modal.md | 888 -- site/content/docs/5.2/components/navbar.md | 813 -- site/content/docs/5.2/components/navs-tabs.md | 671 -- site/content/docs/5.2/components/offcanvas.md | 353 - site/content/docs/5.2/components/pagination.md | 177 - site/content/docs/5.2/components/placeholders.md | 145 - site/content/docs/5.2/components/popovers.md | 284 - site/content/docs/5.2/components/progress.md | 154 - site/content/docs/5.2/components/scrollspy.md | 427 - site/content/docs/5.2/components/spinners.md | 213 - site/content/docs/5.2/components/toasts.md | 401 - site/content/docs/5.2/components/tooltips.md | 301 - site/content/docs/5.2/content/figures.md | 33 - site/content/docs/5.2/content/images.md | 63 - site/content/docs/5.2/content/reboot.md | 446 - site/content/docs/5.2/content/tables.md | 835 -- site/content/docs/5.2/content/typography.md | 286 - site/content/docs/5.2/customize/color.md | 151 - site/content/docs/5.2/customize/components.md | 77 - site/content/docs/5.2/customize/css-variables.md | 60 - site/content/docs/5.2/customize/optimize.md | 95 - site/content/docs/5.2/customize/options.md | 31 - site/content/docs/5.2/customize/overview.md | 51 - site/content/docs/5.2/customize/sass.md | 311 - site/content/docs/5.2/examples/.stylelintrc | 15 - site/content/docs/5.2/examples/_index.md | 45 - .../content/docs/5.2/examples/album-rtl/index.html | 209 - site/content/docs/5.2/examples/album/index.html | 208 - site/content/docs/5.2/examples/blog-rtl/index.html | 206 - site/content/docs/5.2/examples/blog/blog.css | 69 - site/content/docs/5.2/examples/blog/blog.rtl.css | 69 - site/content/docs/5.2/examples/blog/index.html | 258 - .../docs/5.2/examples/carousel-rtl/index.html | 167 - .../docs/5.2/examples/carousel/carousel.css | 82 - .../docs/5.2/examples/carousel/carousel.rtl.css | 74 - site/content/docs/5.2/examples/carousel/index.html | 166 - .../docs/5.2/examples/cheatsheet-rtl/index.html | 1618 ---- .../docs/5.2/examples/cheatsheet/cheatsheet.css | 164 - .../docs/5.2/examples/cheatsheet/cheatsheet.js | 73 - .../5.2/examples/cheatsheet/cheatsheet.rtl.css | 157 - .../docs/5.2/examples/cheatsheet/index.html | 1602 ---- .../docs/5.2/examples/checkout-rtl/index.html | 232 - .../docs/5.2/examples/checkout/form-validation.css | 3 - .../docs/5.2/examples/checkout/form-validation.js | 19 - site/content/docs/5.2/examples/checkout/index.html | 232 - site/content/docs/5.2/examples/cover/cover.css | 50 - site/content/docs/5.2/examples/cover/index.html | 34 - .../docs/5.2/examples/dashboard-rtl/dashboard.js | 53 - .../docs/5.2/examples/dashboard-rtl/index.html | 253 - .../docs/5.2/examples/dashboard/dashboard.css | 92 - .../docs/5.2/examples/dashboard/dashboard.js | 53 - .../docs/5.2/examples/dashboard/dashboard.rtl.css | 88 - .../content/docs/5.2/examples/dashboard/index.html | 252 - .../docs/5.2/examples/dropdowns/dropdowns.css | 79 - .../content/docs/5.2/examples/dropdowns/index.html | 338 - .../docs/5.2/examples/features/features.css | 36 - site/content/docs/5.2/examples/features/index.html | 347 - .../5.2/examples/features/unsplash-photo-1.jpg | Bin 10451 -> 0 bytes .../5.2/examples/features/unsplash-photo-2.jpg | Bin 113018 -> 0 bytes .../5.2/examples/features/unsplash-photo-3.jpg | Bin 40607 -> 0 bytes site/content/docs/5.2/examples/footers/index.html | 186 - site/content/docs/5.2/examples/grid/grid.css | 13 - site/content/docs/5.2/examples/grid/index.html | 188 - site/content/docs/5.2/examples/headers/headers.css | 15 - site/content/docs/5.2/examples/headers/index.html | 295 - .../docs/5.2/examples/heroes/bootstrap-docs.png | Bin 371399 -> 0 bytes .../docs/5.2/examples/heroes/bootstrap-themes.png | Bin 278159 -> 0 bytes site/content/docs/5.2/examples/heroes/heroes.css | 3 - site/content/docs/5.2/examples/heroes/index.html | 125 - .../content/docs/5.2/examples/jumbotron/index.html | 45 - .../docs/5.2/examples/list-groups/index.html | 222 - .../docs/5.2/examples/list-groups/list-groups.css | 61 - site/content/docs/5.2/examples/masonry/index.html | 105 - site/content/docs/5.2/examples/modals/index.html | 173 - site/content/docs/5.2/examples/modals/modals.css | 15 - .../docs/5.2/examples/navbar-bottom/index.html | 41 - .../docs/5.2/examples/navbar-fixed/index.html | 40 - .../5.2/examples/navbar-fixed/navbar-top-fixed.css | 5 - .../docs/5.2/examples/navbar-static/index.html | 40 - .../docs/5.2/examples/navbar-static/navbar-top.css | 4 - .../docs/5.2/examples/navbars-offcanvas/index.html | 147 - .../docs/5.2/examples/navbars-offcanvas/navbar.css | 7 - site/content/docs/5.2/examples/navbars/index.html | 416 - site/content/docs/5.2/examples/navbars/navbar.css | 7 - .../docs/5.2/examples/offcanvas-navbar/index.html | 140 - .../5.2/examples/offcanvas-navbar/offcanvas.css | 52 - .../5.2/examples/offcanvas-navbar/offcanvas.js | 7 - site/content/docs/5.2/examples/pricing/index.html | 187 - site/content/docs/5.2/examples/pricing/pricing.css | 11 - site/content/docs/5.2/examples/product/index.html | 148 - site/content/docs/5.2/examples/product/product.css | 69 - site/content/docs/5.2/examples/sidebars/index.html | 391 - .../docs/5.2/examples/sidebars/sidebars.css | 59 - .../content/docs/5.2/examples/sidebars/sidebars.js | 8 - site/content/docs/5.2/examples/sign-in/index.html | 32 - site/content/docs/5.2/examples/sign-in/signin.css | 33 - .../docs/5.2/examples/starter-template/index.html | 52 - .../examples/starter-template/starter-template.css | 9 - .../5.2/examples/sticky-footer-navbar/index.html | 52 - .../sticky-footer-navbar/sticky-footer-navbar.css | 7 - .../docs/5.2/examples/sticky-footer/index.html | 24 - .../5.2/examples/sticky-footer/sticky-footer.css | 9 - site/content/docs/5.2/extend/approach.md | 86 - site/content/docs/5.2/extend/icons.md | 40 - site/content/docs/5.2/forms/checks-radios.md | 307 - site/content/docs/5.2/forms/floating-labels.md | 152 - site/content/docs/5.2/forms/form-control.md | 152 - site/content/docs/5.2/forms/input-group.md | 316 - site/content/docs/5.2/forms/layout.md | 329 - site/content/docs/5.2/forms/overview.md | 154 - site/content/docs/5.2/forms/range.md | 49 - site/content/docs/5.2/forms/select.md | 81 - site/content/docs/5.2/forms/validation.md | 380 - .../docs/5.2/getting-started/accessibility.md | 62 - .../docs/5.2/getting-started/best-practices.md | 20 - .../docs/5.2/getting-started/browsers-devices.md | 79 - site/content/docs/5.2/getting-started/contents.md | 111 - .../content/docs/5.2/getting-started/contribute.md | 67 - site/content/docs/5.2/getting-started/download.md | 119 - .../docs/5.2/getting-started/introduction.md | 162 - .../content/docs/5.2/getting-started/javascript.md | 337 - site/content/docs/5.2/getting-started/parcel.md | 159 - site/content/docs/5.2/getting-started/rfs.md | 86 - site/content/docs/5.2/getting-started/rtl.md | 182 - site/content/docs/5.2/getting-started/vite.md | 198 - site/content/docs/5.2/getting-started/webpack.md | 322 - site/content/docs/5.2/helpers/clearfix.md | 36 - site/content/docs/5.2/helpers/color-background.md | 52 - site/content/docs/5.2/helpers/colored-links.md | 21 - site/content/docs/5.2/helpers/position.md | 63 - site/content/docs/5.2/helpers/ratio.md | 81 - site/content/docs/5.2/helpers/stacks.md | 85 - site/content/docs/5.2/helpers/stretched-link.md | 74 - site/content/docs/5.2/helpers/text-truncation.md | 23 - site/content/docs/5.2/helpers/vertical-rule.md | 45 - site/content/docs/5.2/helpers/visually-hidden.md | 29 - site/content/docs/5.2/layout/breakpoints.md | 174 - site/content/docs/5.2/layout/columns.md | 317 - site/content/docs/5.2/layout/containers.md | 91 - site/content/docs/5.2/layout/css-grid.md | 267 - site/content/docs/5.2/layout/grid.md | 530 -- site/content/docs/5.2/layout/gutters.md | 165 - site/content/docs/5.2/layout/utilities.md | 25 - site/content/docs/5.2/layout/z-index.md | 16 - site/content/docs/5.2/migration.md | 504 -- site/content/docs/5.2/utilities/api.md | 616 -- site/content/docs/5.2/utilities/background.md | 124 - site/content/docs/5.2/utilities/borders.md | 166 - site/content/docs/5.2/utilities/colors.md | 113 - site/content/docs/5.2/utilities/display.md | 112 - site/content/docs/5.2/utilities/flex.md | 666 -- site/content/docs/5.2/utilities/float.md | 48 - site/content/docs/5.2/utilities/interactions.md | 42 - site/content/docs/5.2/utilities/opacity.md | 31 - site/content/docs/5.2/utilities/overflow.md | 40 - site/content/docs/5.2/utilities/position.md | 130 - site/content/docs/5.2/utilities/shadows.md | 30 - site/content/docs/5.2/utilities/sizing.md | 60 - site/content/docs/5.2/utilities/spacing.md | 127 - site/content/docs/5.2/utilities/text.md | 155 - site/content/docs/5.2/utilities/vertical-align.md | 48 - site/content/docs/5.2/utilities/visibility.md | 37 - site/content/docs/5.3/_index.html | 5 + site/content/docs/5.3/about/brand.md | 43 + site/content/docs/5.3/about/license.md | 34 + site/content/docs/5.3/about/overview.md | 29 + site/content/docs/5.3/about/team.md | 23 + site/content/docs/5.3/about/translations.md | 20 + site/content/docs/5.3/components/accordion.md | 165 + site/content/docs/5.3/components/alerts.md | 242 + site/content/docs/5.3/components/badge.md | 103 + site/content/docs/5.3/components/breadcrumb.md | 108 + site/content/docs/5.3/components/button-group.md | 252 + site/content/docs/5.3/components/buttons.md | 256 + site/content/docs/5.3/components/card.md | 739 ++ site/content/docs/5.3/components/carousel.md | 448 + site/content/docs/5.3/components/close-button.md | 54 + site/content/docs/5.3/components/collapse.md | 198 + site/content/docs/5.3/components/dropdowns.md | 1131 +++ site/content/docs/5.3/components/list-group.md | 502 ++ site/content/docs/5.3/components/modal.md | 871 ++ site/content/docs/5.3/components/navbar.md | 817 ++ site/content/docs/5.3/components/navs-tabs.md | 698 ++ site/content/docs/5.3/components/offcanvas.md | 357 + site/content/docs/5.3/components/pagination.md | 177 + site/content/docs/5.3/components/placeholders.md | 145 + site/content/docs/5.3/components/popovers.md | 280 + site/content/docs/5.3/components/progress.md | 202 + site/content/docs/5.3/components/scrollspy.md | 427 + site/content/docs/5.3/components/spinners.md | 211 + site/content/docs/5.3/components/toasts.md | 391 + site/content/docs/5.3/components/tooltips.md | 294 + site/content/docs/5.3/content/figures.md | 33 + site/content/docs/5.3/content/images.md | 63 + site/content/docs/5.3/content/reboot.md | 473 ++ site/content/docs/5.3/content/tables.md | 839 ++ site/content/docs/5.3/content/typography.md | 286 + site/content/docs/5.3/customize/color-modes.md | 258 + site/content/docs/5.3/customize/color.md | 510 ++ site/content/docs/5.3/customize/components.md | 77 + site/content/docs/5.3/customize/css-variables.md | 93 + site/content/docs/5.3/customize/optimize.md | 92 + site/content/docs/5.3/customize/options.md | 32 + site/content/docs/5.3/customize/overview.md | 53 + site/content/docs/5.3/customize/sass.md | 314 + site/content/docs/5.3/docsref.md | 49 + site/content/docs/5.3/examples/_index.md | 66 + .../content/docs/5.3/examples/album-rtl/index.html | 209 + site/content/docs/5.3/examples/album/index.html | 208 + site/content/docs/5.3/examples/badges/badges.css | 3 + site/content/docs/5.3/examples/badges/index.html | 149 + site/content/docs/5.3/examples/blog-rtl/index.html | 257 + site/content/docs/5.3/examples/blog/blog.css | 39 + site/content/docs/5.3/examples/blog/blog.rtl.css | 39 + site/content/docs/5.3/examples/blog/index.html | 309 + .../docs/5.3/examples/breadcrumbs/breadcrumbs.css | 50 + .../docs/5.3/examples/breadcrumbs/index.html | 88 + site/content/docs/5.3/examples/buttons/index.html | 88 + .../docs/5.3/examples/carousel-rtl/index.html | 167 + .../docs/5.3/examples/carousel/carousel.css | 82 + .../docs/5.3/examples/carousel/carousel.rtl.css | 74 + site/content/docs/5.3/examples/carousel/index.html | 166 + .../docs/5.3/examples/cheatsheet-rtl/index.html | 1622 ++++ .../docs/5.3/examples/cheatsheet/cheatsheet.css | 164 + .../docs/5.3/examples/cheatsheet/cheatsheet.js | 73 + .../5.3/examples/cheatsheet/cheatsheet.rtl.css | 157 + .../docs/5.3/examples/cheatsheet/index.html | 1606 ++++ .../docs/5.3/examples/checkout-rtl/index.html | 232 + .../docs/5.3/examples/checkout/checkout.css | 3 + .../content/docs/5.3/examples/checkout/checkout.js | 19 + site/content/docs/5.3/examples/checkout/index.html | 232 + site/content/docs/5.3/examples/cover/cover.css | 50 + site/content/docs/5.3/examples/cover/index.html | 33 + .../docs/5.3/examples/dashboard-rtl/dashboard.js | 49 + .../docs/5.3/examples/dashboard-rtl/index.html | 333 + .../docs/5.3/examples/dashboard/dashboard.css | 48 + .../docs/5.3/examples/dashboard/dashboard.js | 49 + .../docs/5.3/examples/dashboard/dashboard.rtl.css | 48 + .../content/docs/5.3/examples/dashboard/index.html | 332 + .../docs/5.3/examples/dropdowns/dropdowns.css | 71 + .../content/docs/5.3/examples/dropdowns/index.html | 462 + .../docs/5.3/examples/features/features.css | 26 + site/content/docs/5.3/examples/features/index.html | 340 + .../5.3/examples/features/unsplash-photo-1.jpg | Bin 0 -> 10451 bytes .../5.3/examples/features/unsplash-photo-2.jpg | Bin 0 -> 113018 bytes .../5.3/examples/features/unsplash-photo-3.jpg | Bin 0 -> 40607 bytes site/content/docs/5.3/examples/footers/index.html | 186 + site/content/docs/5.3/examples/grid/grid.css | 13 + site/content/docs/5.3/examples/grid/index.html | 187 + site/content/docs/5.3/examples/headers/headers.css | 15 + site/content/docs/5.3/examples/headers/index.html | 297 + .../docs/5.3/examples/heroes/bootstrap-docs.png | Bin 0 -> 371399 bytes .../docs/5.3/examples/heroes/bootstrap-themes.png | Bin 0 -> 278159 bytes site/content/docs/5.3/examples/heroes/heroes.css | 3 + site/content/docs/5.3/examples/heroes/index.html | 125 + .../content/docs/5.3/examples/jumbotron/index.html | 44 + .../docs/5.3/examples/jumbotrons/index.html | 82 + .../docs/5.3/examples/jumbotrons/jumbotrons.css | 1 + .../docs/5.3/examples/list-groups/index.html | 225 + .../docs/5.3/examples/list-groups/list-groups.css | 63 + site/content/docs/5.3/examples/masonry/index.html | 105 + site/content/docs/5.3/examples/modals/index.html | 150 + site/content/docs/5.3/examples/modals/modals.css | 8 + .../docs/5.3/examples/navbar-bottom/index.html | 41 + .../docs/5.3/examples/navbar-fixed/index.html | 40 + .../5.3/examples/navbar-fixed/navbar-fixed.css | 5 + .../docs/5.3/examples/navbar-static/index.html | 40 + .../5.3/examples/navbar-static/navbar-static.css | 4 + .../docs/5.3/examples/navbars-offcanvas/index.html | 147 + .../navbars-offcanvas/navbars-offcanvas.css | 7 + site/content/docs/5.3/examples/navbars/index.html | 450 + site/content/docs/5.3/examples/navbars/navbars.css | 7 + .../docs/5.3/examples/offcanvas-navbar/index.html | 140 + .../examples/offcanvas-navbar/offcanvas-navbar.css | 52 + .../examples/offcanvas-navbar/offcanvas-navbar.js | 7 + site/content/docs/5.3/examples/pricing/index.html | 186 + site/content/docs/5.3/examples/pricing/pricing.css | 11 + site/content/docs/5.3/examples/product/index.html | 189 + site/content/docs/5.3/examples/product/product.css | 74 + site/content/docs/5.3/examples/sidebars/index.html | 356 + .../docs/5.3/examples/sidebars/sidebars.css | 63 + .../content/docs/5.3/examples/sidebars/sidebars.js | 8 + site/content/docs/5.3/examples/sign-in/index.html | 32 + site/content/docs/5.3/examples/sign-in/sign-in.css | 25 + .../docs/5.3/examples/starter-template/index.html | 107 + .../5.3/examples/sticky-footer-navbar/index.html | 52 + .../sticky-footer-navbar/sticky-footer-navbar.css | 7 + .../docs/5.3/examples/sticky-footer/index.html | 23 + .../5.3/examples/sticky-footer/sticky-footer.css | 9 + site/content/docs/5.3/extend/approach.md | 86 + site/content/docs/5.3/extend/icons.md | 40 + site/content/docs/5.3/forms/checks-radios.md | 313 + site/content/docs/5.3/forms/floating-labels.md | 180 + site/content/docs/5.3/forms/form-control.md | 190 + site/content/docs/5.3/forms/input-group.md | 319 + site/content/docs/5.3/forms/layout.md | 329 + site/content/docs/5.3/forms/overview.md | 116 + site/content/docs/5.3/forms/range.md | 49 + site/content/docs/5.3/forms/select.md | 81 + site/content/docs/5.3/forms/validation.md | 394 + .../docs/5.3/getting-started/accessibility.md | 62 + .../docs/5.3/getting-started/best-practices.md | 20 + .../docs/5.3/getting-started/browsers-devices.md | 79 + site/content/docs/5.3/getting-started/contents.md | 111 + .../content/docs/5.3/getting-started/contribute.md | 67 + site/content/docs/5.3/getting-started/download.md | 119 + .../docs/5.3/getting-started/introduction.md | 162 + .../content/docs/5.3/getting-started/javascript.md | 312 + site/content/docs/5.3/getting-started/parcel.md | 159 + site/content/docs/5.3/getting-started/rfs.md | 86 + site/content/docs/5.3/getting-started/rtl.md | 178 + site/content/docs/5.3/getting-started/vite.md | 181 + site/content/docs/5.3/getting-started/webpack.md | 347 + site/content/docs/5.3/helpers/clearfix.md | 36 + site/content/docs/5.3/helpers/color-background.md | 54 + site/content/docs/5.3/helpers/colored-links.md | 43 + site/content/docs/5.3/helpers/focus-ring.md | 68 + site/content/docs/5.3/helpers/icon-link.md | 88 + site/content/docs/5.3/helpers/position.md | 63 + site/content/docs/5.3/helpers/ratio.md | 81 + site/content/docs/5.3/helpers/stacks.md | 85 + site/content/docs/5.3/helpers/stretched-link.md | 74 + site/content/docs/5.3/helpers/text-truncation.md | 23 + site/content/docs/5.3/helpers/vertical-rule.md | 45 + site/content/docs/5.3/helpers/visually-hidden.md | 29 + site/content/docs/5.3/layout/breakpoints.md | 174 + site/content/docs/5.3/layout/columns.md | 334 + site/content/docs/5.3/layout/containers.md | 95 + site/content/docs/5.3/layout/css-grid.md | 267 + site/content/docs/5.3/layout/grid.md | 530 ++ site/content/docs/5.3/layout/gutters.md | 165 + site/content/docs/5.3/layout/utilities.md | 25 + site/content/docs/5.3/layout/z-index.md | 16 + site/content/docs/5.3/migration.md | 737 ++ site/content/docs/5.3/utilities/api.md | 623 ++ site/content/docs/5.3/utilities/background.md | 150 + site/content/docs/5.3/utilities/borders.md | 194 + site/content/docs/5.3/utilities/colors.md | 141 + site/content/docs/5.3/utilities/display.md | 114 + site/content/docs/5.3/utilities/flex.md | 664 ++ site/content/docs/5.3/utilities/float.md | 48 + site/content/docs/5.3/utilities/interactions.md | 42 + site/content/docs/5.3/utilities/link.md | 105 + site/content/docs/5.3/utilities/object-fit.md | 63 + site/content/docs/5.3/utilities/opacity.md | 33 + site/content/docs/5.3/utilities/overflow.md | 99 + site/content/docs/5.3/utilities/position.md | 130 + site/content/docs/5.3/utilities/shadows.md | 30 + site/content/docs/5.3/utilities/sizing.md | 62 + site/content/docs/5.3/utilities/spacing.md | 154 + site/content/docs/5.3/utilities/text.md | 160 + site/content/docs/5.3/utilities/vertical-align.md | 48 + site/content/docs/5.3/utilities/visibility.md | 37 + site/content/docs/5.3/utilities/z-index.md | 50 + site/content/docs/_index.html | 2 +- site/content/docs/versions.md | 8 +- site/data/core-team.yml | 15 +- site/data/docs-versions.yml | 65 +- site/data/examples.yml | 47 + site/data/sidebar.yml | 6 + site/data/theme-colors.yml | 1 + site/layouts/_default/baseof.html | 2 +- site/layouts/_default/docs.html | 22 +- site/layouts/_default/examples.html | 95 +- site/layouts/_default/home.html | 10 +- .../partials/callout-danger-async-methods.md | 5 - .../callout-info-mediaqueries-breakpoints.md | 1 - site/layouts/partials/callout-info-npm-starter.md | 1 - .../partials/callout-info-prefersreducedmotion.md | 1 - site/layouts/partials/callout-info-sanitizer.md | 1 - ...callout-warning-color-assistive-technologies.md | 3 - .../callout-warning-data-bs-title-vs-title.md | 1 - .../partials/callout-warning-input-support.md | 3 - .../partials/callouts/danger-async-methods.md | 1 + .../callouts/info-mediaqueries-breakpoints.md | 1 + site/layouts/partials/callouts/info-npm-starter.md | 1 + .../partials/callouts/info-prefersreducedmotion.md | 1 + site/layouts/partials/callouts/info-sanitizer.md | 1 + .../warning-color-assistive-technologies.md | 1 + .../callouts/warning-data-bs-title-vs-title.md | 1 + .../partials/callouts/warning-input-support.md | 1 + site/layouts/partials/docs-navbar.html | 48 +- site/layouts/partials/docs-versions.html | 14 +- site/layouts/partials/footer.html | 10 +- site/layouts/partials/header.html | 3 + .../partials/home/components-utilities.html | 88 + site/layouts/partials/home/css-variables.html | 48 + site/layouts/partials/home/customize.html | 59 + site/layouts/partials/home/get-started.html | 58 + site/layouts/partials/home/icons.html | 23 + site/layouts/partials/home/masthead-followup.html | 356 - site/layouts/partials/home/masthead.html | 12 +- site/layouts/partials/home/plugins.html | 65 + site/layouts/partials/home/themes.html | 23 + site/layouts/partials/icons.html | 15 +- .../partials/icons/bootstrap-logo-solid.svg | 1 - site/layouts/partials/icons/bootstrap.svg | 1 - site/layouts/partials/icons/cloud-fill.svg | 3 - site/layouts/partials/icons/code.svg | 3 - site/layouts/partials/icons/collapse.svg | 4 - site/layouts/partials/icons/expand.svg | 4 - site/layouts/partials/icons/homepage-hero.svg | 1 - site/layouts/partials/icons/list.svg | 3 - site/layouts/partials/icons/menu.svg | 1 - site/layouts/partials/js-data-attributes.md | 2 + site/layouts/partials/social.html | 28 +- site/layouts/shortcodes/added-in.html | 2 +- .../callout-deprecated-dark-variants.html | 9 + site/layouts/shortcodes/deprecated-in.html | 5 + site/layouts/shortcodes/example.html | 14 +- site/layouts/shortcodes/js-dismiss.html | 4 +- site/layouts/shortcodes/js-docs.html | 64 + site/layouts/shortcodes/placeholder.html | 23 +- site/layouts/shortcodes/scss-docs.html | 35 +- .../docs/5.2/assets/brand/bootstrap-logo-black.svg | 1 - .../5.2/assets/brand/bootstrap-logo-shadow.png | Bin 48625 -> 0 bytes .../docs/5.2/assets/brand/bootstrap-logo-white.svg | 1 - .../docs/5.2/assets/brand/bootstrap-logo.svg | 1 - .../5.2/assets/brand/bootstrap-social-logo.png | Bin 145590 -> 0 bytes .../docs/5.2/assets/brand/bootstrap-social.png | Bin 724582 -> 0 bytes .../static/docs/5.2/assets/img/bootstrap-icons.png | Bin 40798 -> 0 bytes .../docs/5.2/assets/img/bootstrap-icons@2x.png | Bin 125442 -> 0 bytes .../5.2/assets/img/bootstrap-themes-collage.png | Bin 74829 -> 0 bytes .../5.2/assets/img/bootstrap-themes-collage@2x.png | Bin 244640 -> 0 bytes .../docs/5.2/assets/img/bootstrap-themes.png | Bin 88695 -> 0 bytes .../docs/5.2/assets/img/bootstrap-themes@2x.png | Bin 278159 -> 0 bytes .../docs/5.2/assets/img/examples/album-rtl.png | Bin 6392 -> 0 bytes .../docs/5.2/assets/img/examples/album-rtl@2x.png | Bin 15450 -> 0 bytes site/static/docs/5.2/assets/img/examples/album.png | Bin 10760 -> 0 bytes .../docs/5.2/assets/img/examples/album@2x.png | Bin 25026 -> 0 bytes .../docs/5.2/assets/img/examples/blog-rtl.png | Bin 12545 -> 0 bytes .../docs/5.2/assets/img/examples/blog-rtl@2x.png | Bin 31035 -> 0 bytes site/static/docs/5.2/assets/img/examples/blog.png | Bin 15245 -> 0 bytes .../docs/5.2/assets/img/examples/blog@2x.png | Bin 36944 -> 0 bytes .../docs/5.2/assets/img/examples/carousel-rtl.png | Bin 10344 -> 0 bytes .../5.2/assets/img/examples/carousel-rtl@2x.png | Bin 24535 -> 0 bytes .../docs/5.2/assets/img/examples/carousel.png | Bin 13314 -> 0 bytes .../docs/5.2/assets/img/examples/carousel@2x.png | Bin 31465 -> 0 bytes .../5.2/assets/img/examples/cheatsheet-rtl.png | Bin 6089 -> 0 bytes .../5.2/assets/img/examples/cheatsheet-rtl@2x.png | Bin 13863 -> 0 bytes .../docs/5.2/assets/img/examples/cheatsheet.png | Bin 8132 -> 0 bytes .../docs/5.2/assets/img/examples/cheatsheet@2x.png | Bin 19324 -> 0 bytes .../docs/5.2/assets/img/examples/checkout-rtl.png | Bin 8848 -> 0 bytes .../5.2/assets/img/examples/checkout-rtl@2x.png | Bin 21965 -> 0 bytes .../docs/5.2/assets/img/examples/checkout.png | Bin 7639 -> 0 bytes .../docs/5.2/assets/img/examples/checkout@2x.png | Bin 19105 -> 0 bytes site/static/docs/5.2/assets/img/examples/cover.png | Bin 7240 -> 0 bytes .../docs/5.2/assets/img/examples/cover@2x.png | Bin 17927 -> 0 bytes .../docs/5.2/assets/img/examples/dashboard-rtl.png | Bin 8261 -> 0 bytes .../5.2/assets/img/examples/dashboard-rtl@2x.png | Bin 19399 -> 0 bytes .../docs/5.2/assets/img/examples/dashboard.png | Bin 11914 -> 0 bytes .../docs/5.2/assets/img/examples/dashboard@2x.png | Bin 26556 -> 0 bytes .../docs/5.2/assets/img/examples/dropdowns.png | Bin 6146 -> 0 bytes .../docs/5.2/assets/img/examples/dropdowns@2x.png | Bin 15203 -> 0 bytes .../docs/5.2/assets/img/examples/features.png | Bin 6067 -> 0 bytes .../docs/5.2/assets/img/examples/features@2x.png | Bin 15002 -> 0 bytes .../docs/5.2/assets/img/examples/footers.png | Bin 4324 -> 0 bytes .../docs/5.2/assets/img/examples/footers@2x.png | Bin 10238 -> 0 bytes site/static/docs/5.2/assets/img/examples/grid.png | Bin 14485 -> 0 bytes .../docs/5.2/assets/img/examples/grid@2x.png | Bin 34834 -> 0 bytes .../docs/5.2/assets/img/examples/headers.png | Bin 5197 -> 0 bytes .../docs/5.2/assets/img/examples/headers@2x.png | Bin 12639 -> 0 bytes .../static/docs/5.2/assets/img/examples/heroes.png | Bin 9017 -> 0 bytes .../docs/5.2/assets/img/examples/heroes@2x.png | Bin 23433 -> 0 bytes .../docs/5.2/assets/img/examples/jumbotron.png | Bin 9155 -> 0 bytes .../docs/5.2/assets/img/examples/jumbotron@2x.png | Bin 23316 -> 0 bytes .../docs/5.2/assets/img/examples/list-groups.png | Bin 7134 -> 0 bytes .../5.2/assets/img/examples/list-groups@2x.png | Bin 17804 -> 0 bytes .../docs/5.2/assets/img/examples/masonry.png | Bin 15253 -> 0 bytes .../docs/5.2/assets/img/examples/masonry@2x.png | Bin 37733 -> 0 bytes .../static/docs/5.2/assets/img/examples/modals.png | Bin 4814 -> 0 bytes .../docs/5.2/assets/img/examples/modals@2x.png | Bin 11689 -> 0 bytes .../docs/5.2/assets/img/examples/navbar-bottom.png | Bin 4873 -> 0 bytes .../5.2/assets/img/examples/navbar-bottom@2x.png | Bin 11666 -> 0 bytes .../docs/5.2/assets/img/examples/navbar-fixed.png | Bin 5911 -> 0 bytes .../5.2/assets/img/examples/navbar-fixed@2x.png | Bin 14103 -> 0 bytes .../docs/5.2/assets/img/examples/navbar-static.png | Bin 6624 -> 0 bytes .../5.2/assets/img/examples/navbar-static@2x.png | Bin 15155 -> 0 bytes .../5.2/assets/img/examples/navbars-offcanvas.png | Bin 6864 -> 0 bytes .../assets/img/examples/navbars-offcanvas@2x.png | Bin 17070 -> 0 bytes .../docs/5.2/assets/img/examples/navbars.png | Bin 13124 -> 0 bytes .../docs/5.2/assets/img/examples/navbars@2x.png | Bin 31168 -> 0 bytes .../5.2/assets/img/examples/offcanvas-navbar.png | Bin 9691 -> 0 bytes .../assets/img/examples/offcanvas-navbar@2x.png | Bin 23975 -> 0 bytes .../docs/5.2/assets/img/examples/pricing.png | Bin 11621 -> 0 bytes .../docs/5.2/assets/img/examples/pricing@2x.png | Bin 29088 -> 0 bytes .../docs/5.2/assets/img/examples/product.png | Bin 12906 -> 0 bytes .../docs/5.2/assets/img/examples/product@2x.png | Bin 27953 -> 0 bytes .../docs/5.2/assets/img/examples/sidebars.png | Bin 12287 -> 0 bytes .../docs/5.2/assets/img/examples/sidebars@2x.png | Bin 33499 -> 0 bytes .../docs/5.2/assets/img/examples/sign-in.png | Bin 2199 -> 0 bytes .../docs/5.2/assets/img/examples/sign-in@2x.png | Bin 4568 -> 0 bytes .../5.2/assets/img/examples/starter-template.png | Bin 7753 -> 0 bytes .../assets/img/examples/starter-template@2x.png | Bin 20134 -> 0 bytes .../assets/img/examples/sticky-footer-navbar.png | Bin 6979 -> 0 bytes .../img/examples/sticky-footer-navbar@2x.png | Bin 15836 -> 0 bytes .../docs/5.2/assets/img/examples/sticky-footer.png | Bin 4280 -> 0 bytes .../5.2/assets/img/examples/sticky-footer@2x.png | Bin 9665 -> 0 bytes .../assets/img/favicons/android-chrome-192x192.png | Bin 8364 -> 0 bytes .../assets/img/favicons/android-chrome-512x512.png | Bin 23832 -> 0 bytes .../5.2/assets/img/favicons/apple-touch-icon.png | Bin 7650 -> 0 bytes .../docs/5.2/assets/img/favicons/favicon-16x16.png | Bin 525 -> 0 bytes .../docs/5.2/assets/img/favicons/favicon-32x32.png | Bin 1159 -> 0 bytes .../docs/5.2/assets/img/favicons/favicon.ico | Bin 15086 -> 0 bytes .../docs/5.2/assets/img/favicons/manifest.json | 20 - .../5.2/assets/img/favicons/safari-pinned-tab.svg | 1 - .../5.2/assets/img/guides/bootstrap-parcel.png | Bin 161826 -> 0 bytes .../5.2/assets/img/guides/bootstrap-parcel@2x.png | Bin 564766 -> 0 bytes .../docs/5.2/assets/img/guides/bootstrap-vite.png | Bin 169189 -> 0 bytes .../5.2/assets/img/guides/bootstrap-vite@2x.png | Bin 558538 -> 0 bytes .../5.2/assets/img/guides/bootstrap-webpack.png | Bin 169872 -> 0 bytes .../5.2/assets/img/guides/bootstrap-webpack@2x.png | Bin 572482 -> 0 bytes .../img/guides/parcel-dev-server-bootstrap.png | Bin 102674 -> 0 bytes .../5.2/assets/img/guides/parcel-dev-server.png | Bin 75744 -> 0 bytes .../img/guides/vite-dev-server-bootstrap.png | Bin 75894 -> 0 bytes .../docs/5.2/assets/img/guides/vite-dev-server.png | Bin 74851 -> 0 bytes .../img/guides/webpack-dev-server-bootstrap.png | Bin 77318 -> 0 bytes .../5.2/assets/img/guides/webpack-dev-server.png | Bin 76154 -> 0 bytes site/static/docs/5.2/assets/img/parcel.png | Bin 6042 -> 0 bytes site/static/docs/5.2/assets/img/vite.svg | 1 - site/static/docs/5.2/assets/img/webpack.svg | 1 - site/static/docs/5.2/assets/js/validate-forms.js | 19 - .../docs/5.3/assets/brand/bootstrap-logo-black.svg | 1 + .../5.3/assets/brand/bootstrap-logo-shadow.png | Bin 0 -> 48625 bytes .../docs/5.3/assets/brand/bootstrap-logo-white.svg | 1 + .../docs/5.3/assets/brand/bootstrap-logo.svg | 1 + .../docs/5.3/assets/brand/bootstrap-social.png | Bin 0 -> 724582 bytes .../static/docs/5.3/assets/img/bootstrap-icons.png | Bin 0 -> 40798 bytes .../docs/5.3/assets/img/bootstrap-icons@2x.png | Bin 0 -> 125442 bytes .../5.3/assets/img/bootstrap-themes-collage.png | Bin 0 -> 74442 bytes .../5.3/assets/img/bootstrap-themes-collage@2x.png | Bin 0 -> 244640 bytes .../docs/5.3/assets/img/bootstrap-themes.png | Bin 0 -> 88695 bytes .../docs/5.3/assets/img/bootstrap-themes@2x.png | Bin 0 -> 278159 bytes .../docs/5.3/assets/img/examples/album-rtl.png | Bin 0 -> 6391 bytes .../docs/5.3/assets/img/examples/album-rtl@2x.png | Bin 0 -> 15347 bytes site/static/docs/5.3/assets/img/examples/album.png | Bin 0 -> 10678 bytes .../docs/5.3/assets/img/examples/album@2x.png | Bin 0 -> 25026 bytes .../static/docs/5.3/assets/img/examples/badges.png | Bin 0 -> 6328 bytes .../docs/5.3/assets/img/examples/badges@2x.png | Bin 0 -> 14798 bytes .../docs/5.3/assets/img/examples/blog-rtl.png | Bin 0 -> 12545 bytes .../docs/5.3/assets/img/examples/blog-rtl@2x.png | Bin 0 -> 31035 bytes site/static/docs/5.3/assets/img/examples/blog.png | Bin 0 -> 15245 bytes .../docs/5.3/assets/img/examples/blog@2x.png | Bin 0 -> 36944 bytes .../docs/5.3/assets/img/examples/breadcrumbs.png | Bin 0 -> 2382 bytes .../5.3/assets/img/examples/breadcrumbs@2x.png | Bin 0 -> 6028 bytes .../docs/5.3/assets/img/examples/buttons.png | Bin 0 -> 4545 bytes .../docs/5.3/assets/img/examples/buttons@2x.png | Bin 0 -> 9994 bytes .../docs/5.3/assets/img/examples/carousel-rtl.png | Bin 0 -> 10344 bytes .../5.3/assets/img/examples/carousel-rtl@2x.png | Bin 0 -> 24460 bytes .../docs/5.3/assets/img/examples/carousel.png | Bin 0 -> 13219 bytes .../docs/5.3/assets/img/examples/carousel@2x.png | Bin 0 -> 31320 bytes .../5.3/assets/img/examples/cheatsheet-rtl.png | Bin 0 -> 6089 bytes .../5.3/assets/img/examples/cheatsheet-rtl@2x.png | Bin 0 -> 13863 bytes .../docs/5.3/assets/img/examples/cheatsheet.png | Bin 0 -> 8132 bytes .../docs/5.3/assets/img/examples/cheatsheet@2x.png | Bin 0 -> 19324 bytes .../docs/5.3/assets/img/examples/checkout-rtl.png | Bin 0 -> 8848 bytes .../5.3/assets/img/examples/checkout-rtl@2x.png | Bin 0 -> 21965 bytes .../docs/5.3/assets/img/examples/checkout.png | Bin 0 -> 7639 bytes .../docs/5.3/assets/img/examples/checkout@2x.png | Bin 0 -> 19105 bytes site/static/docs/5.3/assets/img/examples/cover.png | Bin 0 -> 7240 bytes .../docs/5.3/assets/img/examples/cover@2x.png | Bin 0 -> 17927 bytes .../docs/5.3/assets/img/examples/dashboard-rtl.png | Bin 0 -> 8261 bytes .../5.3/assets/img/examples/dashboard-rtl@2x.png | Bin 0 -> 19399 bytes .../docs/5.3/assets/img/examples/dashboard.png | Bin 0 -> 11914 bytes .../docs/5.3/assets/img/examples/dashboard@2x.png | Bin 0 -> 26556 bytes .../docs/5.3/assets/img/examples/dropdowns.png | Bin 0 -> 6146 bytes .../docs/5.3/assets/img/examples/dropdowns@2x.png | Bin 0 -> 15203 bytes .../docs/5.3/assets/img/examples/features.png | Bin 0 -> 6067 bytes .../docs/5.3/assets/img/examples/features@2x.png | Bin 0 -> 15002 bytes .../docs/5.3/assets/img/examples/footers.png | Bin 0 -> 4297 bytes .../docs/5.3/assets/img/examples/footers@2x.png | Bin 0 -> 10238 bytes site/static/docs/5.3/assets/img/examples/grid.png | Bin 0 -> 9395 bytes .../docs/5.3/assets/img/examples/grid@2x.png | Bin 0 -> 24996 bytes .../docs/5.3/assets/img/examples/headers.png | Bin 0 -> 5196 bytes .../docs/5.3/assets/img/examples/headers@2x.png | Bin 0 -> 12639 bytes .../static/docs/5.3/assets/img/examples/heroes.png | Bin 0 -> 9017 bytes .../docs/5.3/assets/img/examples/heroes@2x.png | Bin 0 -> 23433 bytes .../docs/5.3/assets/img/examples/jumbotron.png | Bin 0 -> 9155 bytes .../docs/5.3/assets/img/examples/jumbotron@2x.png | Bin 0 -> 23316 bytes .../docs/5.3/assets/img/examples/jumbotrons.png | Bin 0 -> 6463 bytes .../docs/5.3/assets/img/examples/jumbotrons@2x.png | Bin 0 -> 13933 bytes .../docs/5.3/assets/img/examples/list-groups.png | Bin 0 -> 7134 bytes .../5.3/assets/img/examples/list-groups@2x.png | Bin 0 -> 17804 bytes .../docs/5.3/assets/img/examples/masonry.png | Bin 0 -> 15253 bytes .../docs/5.3/assets/img/examples/masonry@2x.png | Bin 0 -> 37705 bytes .../static/docs/5.3/assets/img/examples/modals.png | Bin 0 -> 4814 bytes .../docs/5.3/assets/img/examples/modals@2x.png | Bin 0 -> 11689 bytes .../docs/5.3/assets/img/examples/navbar-bottom.png | Bin 0 -> 4819 bytes .../5.3/assets/img/examples/navbar-bottom@2x.png | Bin 0 -> 11666 bytes .../docs/5.3/assets/img/examples/navbar-fixed.png | Bin 0 -> 5876 bytes .../5.3/assets/img/examples/navbar-fixed@2x.png | Bin 0 -> 13979 bytes .../docs/5.3/assets/img/examples/navbar-static.png | Bin 0 -> 6541 bytes .../5.3/assets/img/examples/navbar-static@2x.png | Bin 0 -> 15155 bytes .../5.3/assets/img/examples/navbars-offcanvas.png | Bin 0 -> 6850 bytes .../assets/img/examples/navbars-offcanvas@2x.png | Bin 0 -> 16965 bytes .../docs/5.3/assets/img/examples/navbars.png | Bin 0 -> 12965 bytes .../docs/5.3/assets/img/examples/navbars@2x.png | Bin 0 -> 31168 bytes .../5.3/assets/img/examples/offcanvas-navbar.png | Bin 0 -> 9691 bytes .../assets/img/examples/offcanvas-navbar@2x.png | Bin 0 -> 23975 bytes .../docs/5.3/assets/img/examples/pricing.png | Bin 0 -> 11621 bytes .../docs/5.3/assets/img/examples/pricing@2x.png | Bin 0 -> 29088 bytes .../docs/5.3/assets/img/examples/product.png | Bin 0 -> 12906 bytes .../docs/5.3/assets/img/examples/product@2x.png | Bin 0 -> 27953 bytes .../docs/5.3/assets/img/examples/sidebars.png | Bin 0 -> 12287 bytes .../docs/5.3/assets/img/examples/sidebars@2x.png | Bin 0 -> 33499 bytes .../docs/5.3/assets/img/examples/sign-in.png | Bin 0 -> 2199 bytes .../docs/5.3/assets/img/examples/sign-in@2x.png | Bin 0 -> 4568 bytes .../5.3/assets/img/examples/starter-template.png | Bin 0 -> 7753 bytes .../assets/img/examples/starter-template@2x.png | Bin 0 -> 20134 bytes .../assets/img/examples/sticky-footer-navbar.png | Bin 0 -> 6966 bytes .../img/examples/sticky-footer-navbar@2x.png | Bin 0 -> 15744 bytes .../docs/5.3/assets/img/examples/sticky-footer.png | Bin 0 -> 4279 bytes .../5.3/assets/img/examples/sticky-footer@2x.png | Bin 0 -> 9665 bytes .../assets/img/favicons/android-chrome-192x192.png | Bin 0 -> 8364 bytes .../assets/img/favicons/android-chrome-512x512.png | Bin 0 -> 23832 bytes .../5.3/assets/img/favicons/apple-touch-icon.png | Bin 0 -> 7650 bytes .../docs/5.3/assets/img/favicons/favicon-16x16.png | Bin 0 -> 525 bytes .../docs/5.3/assets/img/favicons/favicon-32x32.png | Bin 0 -> 1156 bytes .../docs/5.3/assets/img/favicons/favicon.ico | Bin 0 -> 15086 bytes .../docs/5.3/assets/img/favicons/manifest.json | 20 + .../5.3/assets/img/favicons/safari-pinned-tab.svg | 1 + .../5.3/assets/img/guides/bootstrap-parcel.png | Bin 0 -> 161826 bytes .../5.3/assets/img/guides/bootstrap-parcel@2x.png | Bin 0 -> 564766 bytes .../docs/5.3/assets/img/guides/bootstrap-vite.png | Bin 0 -> 169189 bytes .../5.3/assets/img/guides/bootstrap-vite@2x.png | Bin 0 -> 558538 bytes .../5.3/assets/img/guides/bootstrap-webpack.png | Bin 0 -> 169872 bytes .../5.3/assets/img/guides/bootstrap-webpack@2x.png | Bin 0 -> 572482 bytes .../img/guides/parcel-dev-server-bootstrap.png | Bin 0 -> 15565 bytes .../5.3/assets/img/guides/parcel-dev-server.png | Bin 0 -> 13933 bytes .../img/guides/vite-dev-server-bootstrap.png | Bin 0 -> 14001 bytes .../docs/5.3/assets/img/guides/vite-dev-server.png | Bin 0 -> 13584 bytes .../img/guides/webpack-dev-server-bootstrap.png | Bin 0 -> 14702 bytes .../5.3/assets/img/guides/webpack-dev-server.png | Bin 0 -> 14197 bytes site/static/docs/5.3/assets/img/parcel.png | Bin 0 -> 6003 bytes site/static/docs/5.3/assets/img/vite.svg | 1 + site/static/docs/5.3/assets/img/webpack.svg | 1 + site/static/docs/5.3/assets/js/color-modes.js | 80 + site/static/docs/5.3/assets/js/validate-forms.js | 19 + 847 files changed, 43409 insertions(+), 37584 deletions(-) create mode 100644 .github/codeql/codeql-config.yml create mode 100644 .npmrc delete mode 100644 .stylelintrc create mode 100644 .stylelintrc.json delete mode 100644 build/.eslintrc.json delete mode 100644 config.yml create mode 100644 hugo.yml delete mode 100644 js/tests/unit/.eslintrc.json delete mode 100644 js/tests/visual/.eslintrc.json create mode 100644 js/tests/visual/input.html create mode 100644 scss/_variables-dark.scss create mode 100644 scss/helpers/_focus-ring.scss create mode 100644 scss/helpers/_icon-link.scss create mode 100644 scss/mixins/_color-mode.scss create mode 100644 scss/tests/jasmine.js create mode 100644 scss/tests/mixins/_color-modes.test.scss create mode 100644 scss/tests/mixins/_media-query-color-mode-full.test.scss create mode 100644 scss/tests/mixins/_utilities.test.scss create mode 100644 scss/tests/sass-true/register.js create mode 100644 scss/tests/sass-true/runner.js create mode 100644 scss/tests/utilities/_api.test.scss delete mode 100644 site/.eslintrc.json create mode 100644 site/assets/scss/_scrolling.scss delete mode 100644 site/content/docs/5.2/_index.html delete mode 100644 site/content/docs/5.2/about/brand.md delete mode 100644 site/content/docs/5.2/about/license.md delete mode 100644 site/content/docs/5.2/about/overview.md delete mode 100644 site/content/docs/5.2/about/team.md delete mode 100644 site/content/docs/5.2/about/translations.md delete mode 100644 site/content/docs/5.2/components/accordion.md delete mode 100644 site/content/docs/5.2/components/alerts.md delete mode 100644 site/content/docs/5.2/components/badge.md delete mode 100644 site/content/docs/5.2/components/breadcrumb.md delete mode 100644 site/content/docs/5.2/components/button-group.md delete mode 100644 site/content/docs/5.2/components/buttons.md delete mode 100644 site/content/docs/5.2/components/card.md delete mode 100644 site/content/docs/5.2/components/carousel.md delete mode 100644 site/content/docs/5.2/components/close-button.md delete mode 100644 site/content/docs/5.2/components/collapse.md delete mode 100644 site/content/docs/5.2/components/dropdowns.md delete mode 100644 site/content/docs/5.2/components/list-group.md delete mode 100644 site/content/docs/5.2/components/modal.md delete mode 100644 site/content/docs/5.2/components/navbar.md delete mode 100644 site/content/docs/5.2/components/navs-tabs.md delete mode 100644 site/content/docs/5.2/components/offcanvas.md delete mode 100644 site/content/docs/5.2/components/pagination.md delete mode 100644 site/content/docs/5.2/components/placeholders.md delete mode 100644 site/content/docs/5.2/components/popovers.md delete mode 100644 site/content/docs/5.2/components/progress.md delete mode 100644 site/content/docs/5.2/components/scrollspy.md delete mode 100644 site/content/docs/5.2/components/spinners.md delete mode 100644 site/content/docs/5.2/components/toasts.md delete mode 100644 site/content/docs/5.2/components/tooltips.md delete mode 100644 site/content/docs/5.2/content/figures.md delete mode 100644 site/content/docs/5.2/content/images.md delete mode 100644 site/content/docs/5.2/content/reboot.md delete mode 100644 site/content/docs/5.2/content/tables.md delete mode 100644 site/content/docs/5.2/content/typography.md delete mode 100644 site/content/docs/5.2/customize/color.md delete mode 100644 site/content/docs/5.2/customize/components.md delete mode 100644 site/content/docs/5.2/customize/css-variables.md delete mode 100644 site/content/docs/5.2/customize/optimize.md delete mode 100644 site/content/docs/5.2/customize/options.md delete mode 100644 site/content/docs/5.2/customize/overview.md delete mode 100644 site/content/docs/5.2/customize/sass.md delete mode 100644 site/content/docs/5.2/examples/.stylelintrc delete mode 100644 site/content/docs/5.2/examples/_index.md delete mode 100644 site/content/docs/5.2/examples/album-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/album/index.html delete mode 100644 site/content/docs/5.2/examples/blog-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/blog/blog.css delete mode 100644 site/content/docs/5.2/examples/blog/blog.rtl.css delete mode 100644 site/content/docs/5.2/examples/blog/index.html delete mode 100644 site/content/docs/5.2/examples/carousel-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/carousel/carousel.css delete mode 100644 site/content/docs/5.2/examples/carousel/carousel.rtl.css delete mode 100644 site/content/docs/5.2/examples/carousel/index.html delete mode 100644 site/content/docs/5.2/examples/cheatsheet-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/cheatsheet/cheatsheet.css delete mode 100644 site/content/docs/5.2/examples/cheatsheet/cheatsheet.js delete mode 100644 site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css delete mode 100644 site/content/docs/5.2/examples/cheatsheet/index.html delete mode 100644 site/content/docs/5.2/examples/checkout-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/checkout/form-validation.css delete mode 100644 site/content/docs/5.2/examples/checkout/form-validation.js delete mode 100644 site/content/docs/5.2/examples/checkout/index.html delete mode 100644 site/content/docs/5.2/examples/cover/cover.css delete mode 100644 site/content/docs/5.2/examples/cover/index.html delete mode 100644 site/content/docs/5.2/examples/dashboard-rtl/dashboard.js delete mode 100644 site/content/docs/5.2/examples/dashboard-rtl/index.html delete mode 100644 site/content/docs/5.2/examples/dashboard/dashboard.css delete mode 100644 site/content/docs/5.2/examples/dashboard/dashboard.js delete mode 100644 site/content/docs/5.2/examples/dashboard/dashboard.rtl.css delete mode 100644 site/content/docs/5.2/examples/dashboard/index.html delete mode 100644 site/content/docs/5.2/examples/dropdowns/dropdowns.css delete mode 100644 site/content/docs/5.2/examples/dropdowns/index.html delete mode 100644 site/content/docs/5.2/examples/features/features.css delete mode 100644 site/content/docs/5.2/examples/features/index.html delete mode 100644 site/content/docs/5.2/examples/features/unsplash-photo-1.jpg delete mode 100644 site/content/docs/5.2/examples/features/unsplash-photo-2.jpg delete mode 100644 site/content/docs/5.2/examples/features/unsplash-photo-3.jpg delete mode 100644 site/content/docs/5.2/examples/footers/index.html delete mode 100644 site/content/docs/5.2/examples/grid/grid.css delete mode 100644 site/content/docs/5.2/examples/grid/index.html delete mode 100644 site/content/docs/5.2/examples/headers/headers.css delete mode 100644 site/content/docs/5.2/examples/headers/index.html delete mode 100644 site/content/docs/5.2/examples/heroes/bootstrap-docs.png delete mode 100644 site/content/docs/5.2/examples/heroes/bootstrap-themes.png delete mode 100644 site/content/docs/5.2/examples/heroes/heroes.css delete mode 100644 site/content/docs/5.2/examples/heroes/index.html delete mode 100644 site/content/docs/5.2/examples/jumbotron/index.html delete mode 100644 site/content/docs/5.2/examples/list-groups/index.html delete mode 100644 site/content/docs/5.2/examples/list-groups/list-groups.css delete mode 100644 site/content/docs/5.2/examples/masonry/index.html delete mode 100644 site/content/docs/5.2/examples/modals/index.html delete mode 100644 site/content/docs/5.2/examples/modals/modals.css delete mode 100644 site/content/docs/5.2/examples/navbar-bottom/index.html delete mode 100644 site/content/docs/5.2/examples/navbar-fixed/index.html delete mode 100644 site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css delete mode 100644 site/content/docs/5.2/examples/navbar-static/index.html delete mode 100644 site/content/docs/5.2/examples/navbar-static/navbar-top.css delete mode 100644 site/content/docs/5.2/examples/navbars-offcanvas/index.html delete mode 100644 site/content/docs/5.2/examples/navbars-offcanvas/navbar.css delete mode 100644 site/content/docs/5.2/examples/navbars/index.html delete mode 100644 site/content/docs/5.2/examples/navbars/navbar.css delete mode 100644 site/content/docs/5.2/examples/offcanvas-navbar/index.html delete mode 100644 site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css delete mode 100644 site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js delete mode 100644 site/content/docs/5.2/examples/pricing/index.html delete mode 100644 site/content/docs/5.2/examples/pricing/pricing.css delete mode 100644 site/content/docs/5.2/examples/product/index.html delete mode 100644 site/content/docs/5.2/examples/product/product.css delete mode 100644 site/content/docs/5.2/examples/sidebars/index.html delete mode 100644 site/content/docs/5.2/examples/sidebars/sidebars.css delete mode 100644 site/content/docs/5.2/examples/sidebars/sidebars.js delete mode 100644 site/content/docs/5.2/examples/sign-in/index.html delete mode 100644 site/content/docs/5.2/examples/sign-in/signin.css delete mode 100644 site/content/docs/5.2/examples/starter-template/index.html delete mode 100644 site/content/docs/5.2/examples/starter-template/starter-template.css delete mode 100644 site/content/docs/5.2/examples/sticky-footer-navbar/index.html delete mode 100644 site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css delete mode 100644 site/content/docs/5.2/examples/sticky-footer/index.html delete mode 100644 site/content/docs/5.2/examples/sticky-footer/sticky-footer.css delete mode 100644 site/content/docs/5.2/extend/approach.md delete mode 100644 site/content/docs/5.2/extend/icons.md delete mode 100644 site/content/docs/5.2/forms/checks-radios.md delete mode 100644 site/content/docs/5.2/forms/floating-labels.md delete mode 100644 site/content/docs/5.2/forms/form-control.md delete mode 100644 site/content/docs/5.2/forms/input-group.md delete mode 100644 site/content/docs/5.2/forms/layout.md delete mode 100644 site/content/docs/5.2/forms/overview.md delete mode 100644 site/content/docs/5.2/forms/range.md delete mode 100644 site/content/docs/5.2/forms/select.md delete mode 100644 site/content/docs/5.2/forms/validation.md delete mode 100644 site/content/docs/5.2/getting-started/accessibility.md delete mode 100644 site/content/docs/5.2/getting-started/best-practices.md delete mode 100644 site/content/docs/5.2/getting-started/browsers-devices.md delete mode 100644 site/content/docs/5.2/getting-started/contents.md delete mode 100644 site/content/docs/5.2/getting-started/contribute.md delete mode 100644 site/content/docs/5.2/getting-started/download.md delete mode 100644 site/content/docs/5.2/getting-started/introduction.md delete mode 100644 site/content/docs/5.2/getting-started/javascript.md delete mode 100644 site/content/docs/5.2/getting-started/parcel.md delete mode 100644 site/content/docs/5.2/getting-started/rfs.md delete mode 100644 site/content/docs/5.2/getting-started/rtl.md delete mode 100644 site/content/docs/5.2/getting-started/vite.md delete mode 100644 site/content/docs/5.2/getting-started/webpack.md delete mode 100644 site/content/docs/5.2/helpers/clearfix.md delete mode 100644 site/content/docs/5.2/helpers/color-background.md delete mode 100644 site/content/docs/5.2/helpers/colored-links.md delete mode 100644 site/content/docs/5.2/helpers/position.md delete mode 100644 site/content/docs/5.2/helpers/ratio.md delete mode 100644 site/content/docs/5.2/helpers/stacks.md delete mode 100644 site/content/docs/5.2/helpers/stretched-link.md delete mode 100644 site/content/docs/5.2/helpers/text-truncation.md delete mode 100644 site/content/docs/5.2/helpers/vertical-rule.md delete mode 100644 site/content/docs/5.2/helpers/visually-hidden.md delete mode 100644 site/content/docs/5.2/layout/breakpoints.md delete mode 100644 site/content/docs/5.2/layout/columns.md delete mode 100644 site/content/docs/5.2/layout/containers.md delete mode 100644 site/content/docs/5.2/layout/css-grid.md delete mode 100644 site/content/docs/5.2/layout/grid.md delete mode 100644 site/content/docs/5.2/layout/gutters.md delete mode 100644 site/content/docs/5.2/layout/utilities.md delete mode 100644 site/content/docs/5.2/layout/z-index.md delete mode 100644 site/content/docs/5.2/migration.md delete mode 100644 site/content/docs/5.2/utilities/api.md delete mode 100644 site/content/docs/5.2/utilities/background.md delete mode 100644 site/content/docs/5.2/utilities/borders.md delete mode 100644 site/content/docs/5.2/utilities/colors.md delete mode 100644 site/content/docs/5.2/utilities/display.md delete mode 100644 site/content/docs/5.2/utilities/flex.md delete mode 100644 site/content/docs/5.2/utilities/float.md delete mode 100644 site/content/docs/5.2/utilities/interactions.md delete mode 100644 site/content/docs/5.2/utilities/opacity.md delete mode 100644 site/content/docs/5.2/utilities/overflow.md delete mode 100644 site/content/docs/5.2/utilities/position.md delete mode 100644 site/content/docs/5.2/utilities/shadows.md delete mode 100644 site/content/docs/5.2/utilities/sizing.md delete mode 100644 site/content/docs/5.2/utilities/spacing.md delete mode 100644 site/content/docs/5.2/utilities/text.md delete mode 100644 site/content/docs/5.2/utilities/vertical-align.md delete mode 100644 site/content/docs/5.2/utilities/visibility.md create mode 100644 site/content/docs/5.3/_index.html create mode 100644 site/content/docs/5.3/about/brand.md create mode 100644 site/content/docs/5.3/about/license.md create mode 100644 site/content/docs/5.3/about/overview.md create mode 100644 site/content/docs/5.3/about/team.md create mode 100644 site/content/docs/5.3/about/translations.md create mode 100644 site/content/docs/5.3/components/accordion.md create mode 100644 site/content/docs/5.3/components/alerts.md create mode 100644 site/content/docs/5.3/components/badge.md create mode 100644 site/content/docs/5.3/components/breadcrumb.md create mode 100644 site/content/docs/5.3/components/button-group.md create mode 100644 site/content/docs/5.3/components/buttons.md create mode 100644 site/content/docs/5.3/components/card.md create mode 100644 site/content/docs/5.3/components/carousel.md create mode 100644 site/content/docs/5.3/components/close-button.md create mode 100644 site/content/docs/5.3/components/collapse.md create mode 100644 site/content/docs/5.3/components/dropdowns.md create mode 100644 site/content/docs/5.3/components/list-group.md create mode 100644 site/content/docs/5.3/components/modal.md create mode 100644 site/content/docs/5.3/components/navbar.md create mode 100644 site/content/docs/5.3/components/navs-tabs.md create mode 100644 site/content/docs/5.3/components/offcanvas.md create mode 100644 site/content/docs/5.3/components/pagination.md create mode 100644 site/content/docs/5.3/components/placeholders.md create mode 100644 site/content/docs/5.3/components/popovers.md create mode 100644 site/content/docs/5.3/components/progress.md create mode 100644 site/content/docs/5.3/components/scrollspy.md create mode 100644 site/content/docs/5.3/components/spinners.md create mode 100644 site/content/docs/5.3/components/toasts.md create mode 100644 site/content/docs/5.3/components/tooltips.md create mode 100644 site/content/docs/5.3/content/figures.md create mode 100644 site/content/docs/5.3/content/images.md create mode 100644 site/content/docs/5.3/content/reboot.md create mode 100644 site/content/docs/5.3/content/tables.md create mode 100644 site/content/docs/5.3/content/typography.md create mode 100644 site/content/docs/5.3/customize/color-modes.md create mode 100644 site/content/docs/5.3/customize/color.md create mode 100644 site/content/docs/5.3/customize/components.md create mode 100644 site/content/docs/5.3/customize/css-variables.md create mode 100644 site/content/docs/5.3/customize/optimize.md create mode 100644 site/content/docs/5.3/customize/options.md create mode 100644 site/content/docs/5.3/customize/overview.md create mode 100644 site/content/docs/5.3/customize/sass.md create mode 100644 site/content/docs/5.3/docsref.md create mode 100644 site/content/docs/5.3/examples/_index.md create mode 100644 site/content/docs/5.3/examples/album-rtl/index.html create mode 100644 site/content/docs/5.3/examples/album/index.html create mode 100644 site/content/docs/5.3/examples/badges/badges.css create mode 100644 site/content/docs/5.3/examples/badges/index.html create mode 100644 site/content/docs/5.3/examples/blog-rtl/index.html create mode 100644 site/content/docs/5.3/examples/blog/blog.css create mode 100644 site/content/docs/5.3/examples/blog/blog.rtl.css create mode 100644 site/content/docs/5.3/examples/blog/index.html create mode 100644 site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css create mode 100644 site/content/docs/5.3/examples/breadcrumbs/index.html create mode 100644 site/content/docs/5.3/examples/buttons/index.html create mode 100644 site/content/docs/5.3/examples/carousel-rtl/index.html create mode 100644 site/content/docs/5.3/examples/carousel/carousel.css create mode 100644 site/content/docs/5.3/examples/carousel/carousel.rtl.css create mode 100644 site/content/docs/5.3/examples/carousel/index.html create mode 100644 site/content/docs/5.3/examples/cheatsheet-rtl/index.html create mode 100644 site/content/docs/5.3/examples/cheatsheet/cheatsheet.css create mode 100644 site/content/docs/5.3/examples/cheatsheet/cheatsheet.js create mode 100644 site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css create mode 100644 site/content/docs/5.3/examples/cheatsheet/index.html create mode 100644 site/content/docs/5.3/examples/checkout-rtl/index.html create mode 100644 site/content/docs/5.3/examples/checkout/checkout.css create mode 100644 site/content/docs/5.3/examples/checkout/checkout.js create mode 100644 site/content/docs/5.3/examples/checkout/index.html create mode 100644 site/content/docs/5.3/examples/cover/cover.css create mode 100644 site/content/docs/5.3/examples/cover/index.html create mode 100644 site/content/docs/5.3/examples/dashboard-rtl/dashboard.js create mode 100644 site/content/docs/5.3/examples/dashboard-rtl/index.html create mode 100644 site/content/docs/5.3/examples/dashboard/dashboard.css create mode 100644 site/content/docs/5.3/examples/dashboard/dashboard.js create mode 100644 site/content/docs/5.3/examples/dashboard/dashboard.rtl.css create mode 100644 site/content/docs/5.3/examples/dashboard/index.html create mode 100644 site/content/docs/5.3/examples/dropdowns/dropdowns.css create mode 100644 site/content/docs/5.3/examples/dropdowns/index.html create mode 100644 site/content/docs/5.3/examples/features/features.css create mode 100644 site/content/docs/5.3/examples/features/index.html create mode 100644 site/content/docs/5.3/examples/features/unsplash-photo-1.jpg create mode 100644 site/content/docs/5.3/examples/features/unsplash-photo-2.jpg create mode 100644 site/content/docs/5.3/examples/features/unsplash-photo-3.jpg create mode 100644 site/content/docs/5.3/examples/footers/index.html create mode 100644 site/content/docs/5.3/examples/grid/grid.css create mode 100644 site/content/docs/5.3/examples/grid/index.html create mode 100644 site/content/docs/5.3/examples/headers/headers.css create mode 100644 site/content/docs/5.3/examples/headers/index.html create mode 100644 site/content/docs/5.3/examples/heroes/bootstrap-docs.png create mode 100644 site/content/docs/5.3/examples/heroes/bootstrap-themes.png create mode 100644 site/content/docs/5.3/examples/heroes/heroes.css create mode 100644 site/content/docs/5.3/examples/heroes/index.html create mode 100644 site/content/docs/5.3/examples/jumbotron/index.html create mode 100644 site/content/docs/5.3/examples/jumbotrons/index.html create mode 100644 site/content/docs/5.3/examples/jumbotrons/jumbotrons.css create mode 100644 site/content/docs/5.3/examples/list-groups/index.html create mode 100644 site/content/docs/5.3/examples/list-groups/list-groups.css create mode 100644 site/content/docs/5.3/examples/masonry/index.html create mode 100644 site/content/docs/5.3/examples/modals/index.html create mode 100644 site/content/docs/5.3/examples/modals/modals.css create mode 100644 site/content/docs/5.3/examples/navbar-bottom/index.html create mode 100644 site/content/docs/5.3/examples/navbar-fixed/index.html create mode 100644 site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css create mode 100644 site/content/docs/5.3/examples/navbar-static/index.html create mode 100644 site/content/docs/5.3/examples/navbar-static/navbar-static.css create mode 100644 site/content/docs/5.3/examples/navbars-offcanvas/index.html create mode 100644 site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css create mode 100644 site/content/docs/5.3/examples/navbars/index.html create mode 100644 site/content/docs/5.3/examples/navbars/navbars.css create mode 100644 site/content/docs/5.3/examples/offcanvas-navbar/index.html create mode 100644 site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css create mode 100644 site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js create mode 100644 site/content/docs/5.3/examples/pricing/index.html create mode 100644 site/content/docs/5.3/examples/pricing/pricing.css create mode 100644 site/content/docs/5.3/examples/product/index.html create mode 100644 site/content/docs/5.3/examples/product/product.css create mode 100644 site/content/docs/5.3/examples/sidebars/index.html create mode 100644 site/content/docs/5.3/examples/sidebars/sidebars.css create mode 100644 site/content/docs/5.3/examples/sidebars/sidebars.js create mode 100644 site/content/docs/5.3/examples/sign-in/index.html create mode 100644 site/content/docs/5.3/examples/sign-in/sign-in.css create mode 100644 site/content/docs/5.3/examples/starter-template/index.html create mode 100644 site/content/docs/5.3/examples/sticky-footer-navbar/index.html create mode 100644 site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css create mode 100644 site/content/docs/5.3/examples/sticky-footer/index.html create mode 100644 site/content/docs/5.3/examples/sticky-footer/sticky-footer.css create mode 100644 site/content/docs/5.3/extend/approach.md create mode 100644 site/content/docs/5.3/extend/icons.md create mode 100644 site/content/docs/5.3/forms/checks-radios.md create mode 100644 site/content/docs/5.3/forms/floating-labels.md create mode 100644 site/content/docs/5.3/forms/form-control.md create mode 100644 site/content/docs/5.3/forms/input-group.md create mode 100644 site/content/docs/5.3/forms/layout.md create mode 100644 site/content/docs/5.3/forms/overview.md create mode 100644 site/content/docs/5.3/forms/range.md create mode 100644 site/content/docs/5.3/forms/select.md create mode 100644 site/content/docs/5.3/forms/validation.md create mode 100644 site/content/docs/5.3/getting-started/accessibility.md create mode 100644 site/content/docs/5.3/getting-started/best-practices.md create mode 100644 site/content/docs/5.3/getting-started/browsers-devices.md create mode 100644 site/content/docs/5.3/getting-started/contents.md create mode 100644 site/content/docs/5.3/getting-started/contribute.md create mode 100644 site/content/docs/5.3/getting-started/download.md create mode 100644 site/content/docs/5.3/getting-started/introduction.md create mode 100644 site/content/docs/5.3/getting-started/javascript.md create mode 100644 site/content/docs/5.3/getting-started/parcel.md create mode 100644 site/content/docs/5.3/getting-started/rfs.md create mode 100644 site/content/docs/5.3/getting-started/rtl.md create mode 100644 site/content/docs/5.3/getting-started/vite.md create mode 100644 site/content/docs/5.3/getting-started/webpack.md create mode 100644 site/content/docs/5.3/helpers/clearfix.md create mode 100644 site/content/docs/5.3/helpers/color-background.md create mode 100644 site/content/docs/5.3/helpers/colored-links.md create mode 100644 site/content/docs/5.3/helpers/focus-ring.md create mode 100644 site/content/docs/5.3/helpers/icon-link.md create mode 100644 site/content/docs/5.3/helpers/position.md create mode 100644 site/content/docs/5.3/helpers/ratio.md create mode 100644 site/content/docs/5.3/helpers/stacks.md create mode 100644 site/content/docs/5.3/helpers/stretched-link.md create mode 100644 site/content/docs/5.3/helpers/text-truncation.md create mode 100644 site/content/docs/5.3/helpers/vertical-rule.md create mode 100644 site/content/docs/5.3/helpers/visually-hidden.md create mode 100644 site/content/docs/5.3/layout/breakpoints.md create mode 100644 site/content/docs/5.3/layout/columns.md create mode 100644 site/content/docs/5.3/layout/containers.md create mode 100644 site/content/docs/5.3/layout/css-grid.md create mode 100644 site/content/docs/5.3/layout/grid.md create mode 100644 site/content/docs/5.3/layout/gutters.md create mode 100644 site/content/docs/5.3/layout/utilities.md create mode 100644 site/content/docs/5.3/layout/z-index.md create mode 100644 site/content/docs/5.3/migration.md create mode 100644 site/content/docs/5.3/utilities/api.md create mode 100644 site/content/docs/5.3/utilities/background.md create mode 100644 site/content/docs/5.3/utilities/borders.md create mode 100644 site/content/docs/5.3/utilities/colors.md create mode 100644 site/content/docs/5.3/utilities/display.md create mode 100644 site/content/docs/5.3/utilities/flex.md create mode 100644 site/content/docs/5.3/utilities/float.md create mode 100644 site/content/docs/5.3/utilities/interactions.md create mode 100644 site/content/docs/5.3/utilities/link.md create mode 100644 site/content/docs/5.3/utilities/object-fit.md create mode 100644 site/content/docs/5.3/utilities/opacity.md create mode 100644 site/content/docs/5.3/utilities/overflow.md create mode 100644 site/content/docs/5.3/utilities/position.md create mode 100644 site/content/docs/5.3/utilities/shadows.md create mode 100644 site/content/docs/5.3/utilities/sizing.md create mode 100644 site/content/docs/5.3/utilities/spacing.md create mode 100644 site/content/docs/5.3/utilities/text.md create mode 100644 site/content/docs/5.3/utilities/vertical-align.md create mode 100644 site/content/docs/5.3/utilities/visibility.md create mode 100644 site/content/docs/5.3/utilities/z-index.md delete mode 100644 site/layouts/partials/callout-danger-async-methods.md delete mode 100644 site/layouts/partials/callout-info-mediaqueries-breakpoints.md delete mode 100644 site/layouts/partials/callout-info-npm-starter.md delete mode 100644 site/layouts/partials/callout-info-prefersreducedmotion.md delete mode 100644 site/layouts/partials/callout-info-sanitizer.md delete mode 100644 site/layouts/partials/callout-warning-color-assistive-technologies.md delete mode 100644 site/layouts/partials/callout-warning-data-bs-title-vs-title.md delete mode 100644 site/layouts/partials/callout-warning-input-support.md create mode 100644 site/layouts/partials/callouts/danger-async-methods.md create mode 100644 site/layouts/partials/callouts/info-mediaqueries-breakpoints.md create mode 100644 site/layouts/partials/callouts/info-npm-starter.md create mode 100644 site/layouts/partials/callouts/info-prefersreducedmotion.md create mode 100644 site/layouts/partials/callouts/info-sanitizer.md create mode 100644 site/layouts/partials/callouts/warning-color-assistive-technologies.md create mode 100644 site/layouts/partials/callouts/warning-data-bs-title-vs-title.md create mode 100644 site/layouts/partials/callouts/warning-input-support.md create mode 100644 site/layouts/partials/home/components-utilities.html create mode 100644 site/layouts/partials/home/css-variables.html create mode 100644 site/layouts/partials/home/customize.html create mode 100644 site/layouts/partials/home/get-started.html create mode 100644 site/layouts/partials/home/icons.html delete mode 100644 site/layouts/partials/home/masthead-followup.html create mode 100644 site/layouts/partials/home/plugins.html create mode 100644 site/layouts/partials/home/themes.html delete mode 100644 site/layouts/partials/icons/bootstrap-logo-solid.svg delete mode 100644 site/layouts/partials/icons/bootstrap.svg delete mode 100644 site/layouts/partials/icons/cloud-fill.svg delete mode 100644 site/layouts/partials/icons/code.svg delete mode 100644 site/layouts/partials/icons/collapse.svg delete mode 100644 site/layouts/partials/icons/expand.svg delete mode 100644 site/layouts/partials/icons/homepage-hero.svg delete mode 100644 site/layouts/partials/icons/list.svg delete mode 100644 site/layouts/partials/icons/menu.svg create mode 100644 site/layouts/shortcodes/callout-deprecated-dark-variants.html create mode 100644 site/layouts/shortcodes/deprecated-in.html create mode 100644 site/layouts/shortcodes/js-docs.html delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-logo-black.svg delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-logo-shadow.png delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-logo-white.svg delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-logo.svg delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-social-logo.png delete mode 100644 site/static/docs/5.2/assets/brand/bootstrap-social.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-icons.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-icons@2x.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-themes-collage.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-themes-collage@2x.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-themes.png delete mode 100644 site/static/docs/5.2/assets/img/bootstrap-themes@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/album-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/album-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/album.png delete mode 100644 site/static/docs/5.2/assets/img/examples/album@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/blog-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/blog-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/blog.png delete mode 100644 site/static/docs/5.2/assets/img/examples/blog@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/carousel-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/carousel-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/carousel.png delete mode 100644 site/static/docs/5.2/assets/img/examples/carousel@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cheatsheet-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cheatsheet-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cheatsheet.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cheatsheet@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/checkout-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/checkout-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/checkout.png delete mode 100644 site/static/docs/5.2/assets/img/examples/checkout@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cover.png delete mode 100644 site/static/docs/5.2/assets/img/examples/cover@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dashboard-rtl.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dashboard-rtl@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dashboard.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dashboard@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dropdowns.png delete mode 100644 site/static/docs/5.2/assets/img/examples/dropdowns@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/features.png delete mode 100644 site/static/docs/5.2/assets/img/examples/features@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/footers.png delete mode 100644 site/static/docs/5.2/assets/img/examples/footers@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/grid.png delete mode 100644 site/static/docs/5.2/assets/img/examples/grid@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/headers.png delete mode 100644 site/static/docs/5.2/assets/img/examples/headers@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/heroes.png delete mode 100644 site/static/docs/5.2/assets/img/examples/heroes@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/jumbotron.png delete mode 100644 site/static/docs/5.2/assets/img/examples/jumbotron@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/list-groups.png delete mode 100644 site/static/docs/5.2/assets/img/examples/list-groups@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/masonry.png delete mode 100644 site/static/docs/5.2/assets/img/examples/masonry@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/modals.png delete mode 100644 site/static/docs/5.2/assets/img/examples/modals@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-bottom.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-bottom@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-fixed.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-fixed@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-static.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbar-static@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbars-offcanvas.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbars-offcanvas@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbars.png delete mode 100644 site/static/docs/5.2/assets/img/examples/navbars@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/offcanvas-navbar.png delete mode 100644 site/static/docs/5.2/assets/img/examples/offcanvas-navbar@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/pricing.png delete mode 100644 site/static/docs/5.2/assets/img/examples/pricing@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/product.png delete mode 100644 site/static/docs/5.2/assets/img/examples/product@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sidebars.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sidebars@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sign-in.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sign-in@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/starter-template.png delete mode 100644 site/static/docs/5.2/assets/img/examples/starter-template@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sticky-footer-navbar.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sticky-footer-navbar@2x.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sticky-footer.png delete mode 100644 site/static/docs/5.2/assets/img/examples/sticky-footer@2x.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/android-chrome-192x192.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/android-chrome-512x512.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/apple-touch-icon.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/favicon-16x16.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/favicon-32x32.png delete mode 100644 site/static/docs/5.2/assets/img/favicons/favicon.ico delete mode 100644 site/static/docs/5.2/assets/img/favicons/manifest.json delete mode 100644 site/static/docs/5.2/assets/img/favicons/safari-pinned-tab.svg delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-parcel.png delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-parcel@2x.png delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-vite.png delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-vite@2x.png delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-webpack.png delete mode 100644 site/static/docs/5.2/assets/img/guides/bootstrap-webpack@2x.png delete mode 100644 site/static/docs/5.2/assets/img/guides/parcel-dev-server-bootstrap.png delete mode 100644 site/static/docs/5.2/assets/img/guides/parcel-dev-server.png delete mode 100644 site/static/docs/5.2/assets/img/guides/vite-dev-server-bootstrap.png delete mode 100644 site/static/docs/5.2/assets/img/guides/vite-dev-server.png delete mode 100644 site/static/docs/5.2/assets/img/guides/webpack-dev-server-bootstrap.png delete mode 100644 site/static/docs/5.2/assets/img/guides/webpack-dev-server.png delete mode 100644 site/static/docs/5.2/assets/img/parcel.png delete mode 100644 site/static/docs/5.2/assets/img/vite.svg delete mode 100644 site/static/docs/5.2/assets/img/webpack.svg delete mode 100644 site/static/docs/5.2/assets/js/validate-forms.js create mode 100644 site/static/docs/5.3/assets/brand/bootstrap-logo-black.svg create mode 100644 site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png create mode 100644 site/static/docs/5.3/assets/brand/bootstrap-logo-white.svg create mode 100644 site/static/docs/5.3/assets/brand/bootstrap-logo.svg create mode 100644 site/static/docs/5.3/assets/brand/bootstrap-social.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-icons.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-icons@2x.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-themes-collage.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-themes-collage@2x.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-themes.png create mode 100644 site/static/docs/5.3/assets/img/bootstrap-themes@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/album-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/album-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/album.png create mode 100644 site/static/docs/5.3/assets/img/examples/album@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/badges.png create mode 100644 site/static/docs/5.3/assets/img/examples/badges@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/blog-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/blog-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/blog.png create mode 100644 site/static/docs/5.3/assets/img/examples/blog@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/breadcrumbs.png create mode 100644 site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/buttons.png create mode 100644 site/static/docs/5.3/assets/img/examples/buttons@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/carousel-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/carousel.png create mode 100644 site/static/docs/5.3/assets/img/examples/carousel@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/cheatsheet-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/cheatsheet-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/cheatsheet.png create mode 100644 site/static/docs/5.3/assets/img/examples/cheatsheet@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/checkout-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/checkout-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/checkout.png create mode 100644 site/static/docs/5.3/assets/img/examples/checkout@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/cover.png create mode 100644 site/static/docs/5.3/assets/img/examples/cover@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/dashboard-rtl.png create mode 100644 site/static/docs/5.3/assets/img/examples/dashboard-rtl@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/dashboard.png create mode 100644 site/static/docs/5.3/assets/img/examples/dashboard@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/dropdowns.png create mode 100644 site/static/docs/5.3/assets/img/examples/dropdowns@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/features.png create mode 100644 site/static/docs/5.3/assets/img/examples/features@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/footers.png create mode 100644 site/static/docs/5.3/assets/img/examples/footers@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/grid.png create mode 100644 site/static/docs/5.3/assets/img/examples/grid@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/headers.png create mode 100644 site/static/docs/5.3/assets/img/examples/headers@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/heroes.png create mode 100644 site/static/docs/5.3/assets/img/examples/heroes@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/jumbotron.png create mode 100644 site/static/docs/5.3/assets/img/examples/jumbotron@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/jumbotrons.png create mode 100644 site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/list-groups.png create mode 100644 site/static/docs/5.3/assets/img/examples/list-groups@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/masonry.png create mode 100644 site/static/docs/5.3/assets/img/examples/masonry@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/modals.png create mode 100644 site/static/docs/5.3/assets/img/examples/modals@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-bottom.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-bottom@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-fixed.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-static.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-static@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbars.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbars@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/offcanvas-navbar.png create mode 100644 site/static/docs/5.3/assets/img/examples/offcanvas-navbar@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/pricing.png create mode 100644 site/static/docs/5.3/assets/img/examples/pricing@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/product.png create mode 100644 site/static/docs/5.3/assets/img/examples/product@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/sidebars.png create mode 100644 site/static/docs/5.3/assets/img/examples/sidebars@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/sign-in.png create mode 100644 site/static/docs/5.3/assets/img/examples/sign-in@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/starter-template.png create mode 100644 site/static/docs/5.3/assets/img/examples/starter-template@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png create mode 100644 site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png create mode 100644 site/static/docs/5.3/assets/img/examples/sticky-footer.png create mode 100644 site/static/docs/5.3/assets/img/examples/sticky-footer@2x.png create mode 100644 site/static/docs/5.3/assets/img/favicons/android-chrome-192x192.png create mode 100644 site/static/docs/5.3/assets/img/favicons/android-chrome-512x512.png create mode 100644 site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png create mode 100644 site/static/docs/5.3/assets/img/favicons/favicon-16x16.png create mode 100644 site/static/docs/5.3/assets/img/favicons/favicon-32x32.png create mode 100644 site/static/docs/5.3/assets/img/favicons/favicon.ico create mode 100644 site/static/docs/5.3/assets/img/favicons/manifest.json create mode 100644 site/static/docs/5.3/assets/img/favicons/safari-pinned-tab.svg create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-parcel.png create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-parcel@2x.png create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-vite.png create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-vite@2x.png create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-webpack.png create mode 100644 site/static/docs/5.3/assets/img/guides/bootstrap-webpack@2x.png create mode 100644 site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png create mode 100644 site/static/docs/5.3/assets/img/guides/parcel-dev-server.png create mode 100644 site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png create mode 100644 site/static/docs/5.3/assets/img/guides/vite-dev-server.png create mode 100644 site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png create mode 100644 site/static/docs/5.3/assets/img/guides/webpack-dev-server.png create mode 100644 site/static/docs/5.3/assets/img/parcel.png create mode 100644 site/static/docs/5.3/assets/img/vite.svg create mode 100644 site/static/docs/5.3/assets/img/webpack.svg create mode 100644 site/static/docs/5.3/assets/js/color-modes.js create mode 100644 site/static/docs/5.3/assets/js/validate-forms.js diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 143753b..d7e1c80 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,43 +2,43 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.5 kB" + "maxSize": "6.5 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.55 kB" + "maxSize": "6.0 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.75 kB" + "maxSize": "3.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2.5 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "9.25 kB" + "maxSize": "11.75 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "8.5 kB" + "maxSize": "10.75 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "28.75 kB" + "maxSize": "32.5 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "26.75 kB" + "maxSize": "30.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", - "maxSize": "43.25 kB" + "maxSize": "43.0 kB" }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "22.75 kB" + "maxSize": "23.0 kB" }, { "path": "./dist/js/bootstrap.esm.js", @@ -46,7 +46,7 @@ }, { "path": "./dist/js/bootstrap.esm.min.js", - "maxSize": "18.5 kB" + "maxSize": "18.25 kB" }, { "path": "./dist/js/bootstrap.js", @@ -54,7 +54,7 @@ }, { "path": "./dist/js/bootstrap.min.js", - "maxSize": "16.25 kB" + "maxSize": "16.0 kB" } ], "ci": { diff --git a/.cspell.json b/.cspell.json index d528823..e477ef8 100644 --- a/.cspell.json +++ b/.cspell.json @@ -8,6 +8,7 @@ "autohiding", "autoplay", "autoplays", + "autoplaying", "blazingly", "Blockquotes", "Bootstrappers", @@ -107,6 +108,7 @@ "unstyled", "Uppercased", "urlize", + "urlquery", "vbtn", "viewports", "Vite", diff --git a/.eslintignore b/.eslintignore index 04bae15..4c5b84f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,6 +3,5 @@ **/vendor/ /_site/ /js/coverage/ -/js/tests/integration/ /site/static/sw.js -/site/layouts/ +/site/layouts/partials/ diff --git a/.eslintrc.json b/.eslintrc.json index d8e83a8..055acc7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,6 +14,35 @@ "error", "never" ], + "import/extensions": [ + "error", + "ignorePackages", + { + "js": "always" + } + ], + "import/first": "error", + "import/newline-after-import": "error", + "import/no-absolute-path": "error", + "import/no-amd": "error", + "import/no-cycle": [ + "error", + { + "ignoreExternal": true + } + ], + "import/no-duplicates": "error", + "import/no-extraneous-dependencies": "error", + "import/no-mutable-exports": "error", + "import/no-named-as-default": "error", + "import/no-named-as-default-member": "error", + "import/no-named-default": "error", + "import/no-self-import": "error", + "import/no-unassigned-import": [ + "error" + ], + "import/no-useless-path-segments": "error", + "import/order": "error", "indent": [ "error", 2, @@ -46,20 +75,146 @@ "error", "after" ], + "prefer-template": "error", "semi": [ "error", "never" ], + "strict": "error", "unicorn/explicit-length-check": "off", + "unicorn/filename-case": "off", "unicorn/no-array-callback-reference": "off", "unicorn/no-array-method-this-argument": "off", "unicorn/no-null": "off", + "unicorn/no-typeof-undefined": "off", "unicorn/no-unused-properties": "error", + "unicorn/numeric-separators-style": "off", "unicorn/prefer-array-flat": "off", + "unicorn/prefer-at": "off", "unicorn/prefer-dom-node-dataset": "off", "unicorn/prefer-module": "off", "unicorn/prefer-query-selector": "off", "unicorn/prefer-spread": "off", + "unicorn/prefer-string-replace-all": "off", "unicorn/prevent-abbreviations": "off" - } + }, + "overrides": [ + { + "files": [ + "build/**" + ], + "env": { + "browser": false, + "node": true + }, + "parserOptions": { + "sourceType": "script" + }, + "rules": { + "no-console": "off", + "unicorn/prefer-top-level-await": "off" + } + }, + { + "files": [ + "js/**" + ], + "parserOptions": { + "sourceType": "module" + } + }, + { + "files": [ + "js/tests/*.js", + "js/tests/integration/rollup*.js" + ], + "env": { + "node": true + }, + "parserOptions": { + "sourceType": "script" + } + }, + { + "files": [ + "js/tests/unit/**" + ], + "env": { + "jasmine": true + }, + "rules": { + "no-console": "off", + "unicorn/consistent-function-scoping": "off", + "unicorn/no-useless-undefined": "off", + "unicorn/prefer-add-event-listener": "off" + } + }, + { + "files": [ + "js/tests/visual/**" + ], + "plugins": [ + "html" + ], + "settings": { + "html/html-extensions": [ + ".html" + ] + }, + "rules": { + "no-console": "off", + "no-new": "off", + "unicorn/no-array-for-each": "off" + } + }, + { + "files": [ + "scss/tests/**" + ], + "env": { + "node": true + }, + "parserOptions": { + "sourceType": "script" + } + }, + { + "files": [ + "site/**" + ], + "env": { + "browser": true, + "node": false + }, + "parserOptions": { + "sourceType": "script", + "ecmaVersion": 2019 + }, + "rules": { + "no-new": "off", + "unicorn/no-array-for-each": "off" + } + }, + { + "files": [ + "**/*.md" + ], + "plugins": [ + "markdown" + ], + "processor": "markdown/markdown" + }, + { + "files": [ + "**/*.md/*.js" + ], + "extends": "plugin:markdown/recommended", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "unicorn/prefer-node-protocol": "off" + } + } + ] } diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index c7211e6..4463445 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -18,16 +18,16 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat and [submitting pull requests](#pull-requests), but please respect the following restrictions: -* Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help. +- Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help. -* Please **do not** derail or troll issues. Keep the discussion on topic and +- Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. -* Please **do not** post comments consisting solely of "+1" or ":thumbsup:". +- Please **do not** post comments consisting solely of "+1" or ":thumbsup:". Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead. We reserve the right to delete comments which violate this rule. -* Please **do not** open issues regarding the official themes offered on . +- Please **do not** open issues regarding the official themes offered on . Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`. @@ -101,16 +101,16 @@ Sometimes bugs reported to us are actually caused by bugs in the browser(s) them | Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes | | ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- | -| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. | -| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit | In Apple's bug reporter, choose "Safari" as the product. | -| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://bugs.chromium.org/p/chromium/issues/list | Click the "New issue" button. | -| Microsoft | Edge | Blink | https://developer.microsoft.com/en-us/microsoft-edge/ | Go to "Help > Send Feedback" from the browser | +| Mozilla | Firefox | Gecko | | "Core" is normally the right product option to choose. | +| Apple | Safari | WebKit | | In Apple's bug reporter, choose "Safari" as the product. | +| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | | Click the "New issue" button. | +| Microsoft | Edge | Blink | | Go to "Help > Send Feedback" from the browser | ## Feature requests Feature requests are welcome. But take a moment to find out whether your idea -fits with the scope and aims of the project. It's up to *you* to make a strong +fits with the scope and aims of the project. It's up to _you_ to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 4675f70..98e45c5 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -31,7 +31,7 @@ -* https://deploy-preview-{your pr number}--twbs-bootstrap.netlify.app/ +- ### Related issues diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml new file mode 100644 index 0000000..9578772 --- /dev/null +++ b/.github/codeql/codeql-config.yml @@ -0,0 +1,3 @@ +name: "CodeQL config" +paths-ignore: + - dist diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 29135b4..f54ba89 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,24 +1,23 @@ version: 2 updates: - - package-ecosystem: npm + - package-ecosystem: "github-actions" directory: "/" schedule: interval: weekly day: tuesday time: "12:00" timezone: Europe/Athens - open-pull-requests-limit: 10 + - package-ecosystem: npm + directory: "/" reviewers: - XhmikosR labels: - dependencies - v5 - versioning-strategy: increase - rebase-strategy: disabled - - package-ecosystem: "github-actions" - directory: "/" schedule: interval: weekly day: tuesday time: "12:00" timezone: Europe/Athens + versioning-strategy: increase + rebase-strategy: disabled diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml index 425c566..e545d62 100644 --- a/.github/workflows/browserstack.yml +++ b/.github/workflows/browserstack.yml @@ -2,21 +2,29 @@ name: BrowserStack on: push: + branches: + - "**" + - "!dependabot/**" workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: browserstack: runs-on: ubuntu-latest - if: github.repository == 'twbs/bootstrap' && (!contains(github.event.commits[0].message, '[ci skip]') && !contains(github.event.commits[0].message, '[skip ci]')) + if: github.repository == 'twbs/bootstrap' timeout-minutes: 30 steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml index d1a1747..c02a37e 100644 --- a/.github/workflows/bundlewatch.yml +++ b/.github/workflows/bundlewatch.yml @@ -2,14 +2,17 @@ name: Bundlewatch on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: bundlewatch: @@ -18,6 +21,8 @@ jobs: steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 diff --git a/.github/workflows/calibreapp-image-actions.yml b/.github/workflows/calibreapp-image-actions.yml index e23f562..21df1f6 100644 --- a/.github/workflows/calibreapp-image-actions.yml +++ b/.github/workflows/calibreapp-image-actions.yml @@ -17,6 +17,8 @@ jobs: steps: - name: Checkout Repo uses: actions/checkout@v3 + with: + persist-credentials: false - name: Compress Images uses: calibreapp/image-actions@1.1.0 diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 70be056..b1780ee 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -7,13 +7,12 @@ on: - v4-dev - "!dependabot/**" pull_request: - # The branches below must be a subset of the branches above branches: - main - v4-dev - "!dependabot/**" schedule: - - cron: "0 2 * * 5" + - cron: "0 2 * * 4" workflow_dispatch: jobs: @@ -21,18 +20,25 @@ jobs: name: Analyze runs-on: ubuntu-latest permissions: - actions: read - contents: read security-events: write steps: - name: Checkout repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Initialize CodeQL uses: github/codeql-action/init@v2 with: + config-file: ./.github/codeql/codeql-config.yml languages: "javascript" + queries: +security-and-quality + + - name: Autobuild + uses: github/codeql-action/autobuild@v2 - name: Perform CodeQL Analysis uses: github/codeql-action/analyze@v2 + with: + category: "/language:javascript" diff --git a/.github/workflows/cspell.yml b/.github/workflows/cspell.yml index 3751ad3..11788e3 100644 --- a/.github/workflows/cspell.yml +++ b/.github/workflows/cspell.yml @@ -2,22 +2,30 @@ name: cspell on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + +permissions: + contents: read jobs: cspell: + permissions: + # allow streetsidesoftware/cspell-action to fetch files for commits and PRs + contents: read + pull-requests: read runs-on: ubuntu-latest steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Run cspell uses: streetsidesoftware/cspell-action@v2 diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml index 857a567..66112a9 100644 --- a/.github/workflows/css.yml +++ b/.github/workflows/css.yml @@ -2,14 +2,17 @@ name: CSS on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: css: @@ -18,6 +21,8 @@ jobs: steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 @@ -30,3 +35,6 @@ jobs: - name: Build CSS run: npm run css + + - name: Run CSS tests + run: npm run css-test diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index f33413e..2a684f6 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -2,14 +2,17 @@ name: Docs on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: docs: @@ -18,6 +21,8 @@ jobs: steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml index b251cd7..b5000d8 100644 --- a/.github/workflows/issue-close-require.yml +++ b/.github/workflows/issue-close-require.yml @@ -4,8 +4,15 @@ on: schedule: - cron: "0 0 * * *" +permissions: + contents: read + jobs: issue-close-require: + permissions: + # allow actions-cool/issues-helper to update issues and PRs + issues: write + pull-requests: write runs-on: ubuntu-latest if: github.repository == 'twbs/bootstrap' steps: diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml index fac5849..584879d 100644 --- a/.github/workflows/issue-labeled.yml +++ b/.github/workflows/issue-labeled.yml @@ -4,8 +4,15 @@ on: issues: types: [labeled] +permissions: + contents: read + jobs: issue-labeled: + permissions: + # allow actions-cool/issues-helper to update issues and PRs + issues: write + pull-requests: write if: github.repository == 'twbs/bootstrap' runs-on: ubuntu-latest steps: diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml index 82616c5..805b1b7 100644 --- a/.github/workflows/js.yml +++ b/.github/workflows/js.yml @@ -2,23 +2,32 @@ name: JS Tests on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: run: + permissions: + # allow coverallsapp/github-action to create new checks issues and fetch code + checks: write + contents: read name: JS Tests runs-on: ubuntu-latest steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 @@ -36,7 +45,7 @@ jobs: run: npm run js-test - name: Run Coveralls - uses: coverallsapp/github-action@1.1.3 + uses: coverallsapp/github-action@v2 with: github-token: "${{ secrets.GITHUB_TOKEN }}" path-to-lcov: "./js/coverage/lcov.info" diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 816694e..fd62b41 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -2,14 +2,17 @@ name: Lint on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: lint: @@ -18,6 +21,8 @@ jobs: steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml index 465cee4..c558e44 100644 --- a/.github/workflows/node-sass.yml +++ b/.github/workflows/node-sass.yml @@ -2,14 +2,17 @@ name: CSS (node-sass) on: push: - branches-ignore: - - "dependabot/**" + branches: + - main pull_request: workflow_dispatch: env: FORCE_COLOR: 2 - NODE: 16 + NODE: 18 + +permissions: + contents: read jobs: css: @@ -18,6 +21,8 @@ jobs: steps: - name: Clone repository uses: actions/checkout@v3 + with: + persist-credentials: false - name: Set up Node.js uses: actions/setup-node@v3 @@ -29,3 +34,16 @@ jobs: npx --package node-sass@latest node-sass --version npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/ ls -Al dist-sass/css + + - name: Check built CSS files for Sass variables + shell: bash + run: | + SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true) + if [[ -z "$SASS_VARS_FOUND" ]]; then + echo "All good, no Sass variables found!" + exit 0 + else + echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:" + echo "$SASS_VARS_FOUND" + exit 1 + fi diff --git a/.github/workflows/release-notes.yml b/.github/workflows/release-notes.yml index bbd0a24..f620dd3 100644 --- a/.github/workflows/release-notes.yml +++ b/.github/workflows/release-notes.yml @@ -6,8 +6,15 @@ on: - main workflow_dispatch: +permissions: + contents: read + jobs: update_release_draft: + permissions: + # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs + contents: write + pull-requests: write runs-on: ubuntu-latest if: github.repository == 'twbs/bootstrap' steps: diff --git a/.gitignore b/.gitignore index 2215d63..0c9b6f5 100644 --- a/.gitignore +++ b/.gitignore @@ -38,5 +38,6 @@ Thumbs.db *.komodoproject # Folders to ignore +/dist-sass/ /js/coverage/ /node_modules/ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..4812751 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +lockfile-version=2 diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 94c8ec1..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,31 +0,0 @@ -{ - "extends": [ - "stylelint-config-twbs-bootstrap" - ], - "rules": { - "declaration-property-value-disallowed-list": { - "border": "none", - "outline": "none" - }, - "function-disallowed-list": [ - "calc", - "lighten", - "darken" - ], - "property-disallowed-list": [ - "border-radius", - "border-top-left-radius", - "border-top-right-radius", - "border-bottom-right-radius", - "border-bottom-left-radius", - "transition" - ], - "scss/dollar-variable-default": [ - true, - { - "ignore": "local" - } - ], - "scss/selector-no-union-class-name": true - } -} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..589884a --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,60 @@ +{ + "extends": [ + "stylelint-config-twbs-bootstrap" + ], + "reportInvalidScopeDisables": true, + "reportNeedlessDisables": true, + "overrides": [ + { + "files": "**/*.scss", + "rules": { + "declaration-property-value-disallowed-list": { + "border": "none", + "outline": "none" + }, + "function-disallowed-list": [ + "calc", + "lighten", + "darken" + ], + "property-disallowed-list": [ + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "transition" + ], + "scss/dollar-variable-default": [ + true, + { + "ignore": "local" + } + ], + "scss/selector-no-union-class-name": true + } + }, + { + "files": "scss/**/*.{test,spec}.scss", + "rules": { + "scss/dollar-variable-default": null, + "declaration-no-important": null + } + }, + { + "files": "site/**/*.scss", + "rules": { + "scss/dollar-variable-default": null + } + }, + { + "files": "site/**/examples/**/*.css", + "rules": { + "comment-empty-line-before": null, + "property-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "value-no-vendor-prefix": null + } + } + ] +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 28fd5e8..b983cba 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the overall +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or advances of +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email address, +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities diff --git a/LICENSE b/LICENSE index dda75ca..6633b55 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,6 @@ The MIT License (MIT) -Copyright (c) 2011-2022 Twitter, Inc. -Copyright (c) 2011-2022 The Bootstrap Authors +Copyright (c) 2011-2023 The Bootstrap Authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index bd40192..529b0d5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- Bootstrap logo + Bootstrap logo

@@ -9,7 +9,7 @@

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- Explore Bootstrap docs » + Explore Bootstrap docs »

Report bug @@ -46,32 +46,32 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [` Several quick start options are available: -- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.2.3.zip) +- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.0.zip) - Clone the repo: `git clone https://github.com/twbs/bootstrap.git` -- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.2.3` -- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.2.3` -- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.2.3` +- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.0` +- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.0` +- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.0` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` -Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-started/introduction/) for information on the framework contents, templates, examples, and more. +Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more. ## Status -[![Build Status](https://img.shields.io/github/workflow/status/twbs/bootstrap/JS%20Tests/main?label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain) -[![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap) -[![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap) -[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap) -[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap)](https://packagist.org/packages/twbs/bootstrap) -[![NuGet](https://img.shields.io/nuget/vpre/bootstrap)](https://www.nuget.org/packages/bootstrap/absoluteLatest) -[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main)](https://coveralls.io/github/twbs/bootstrap?branch=main) +[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/bootstrap/js.yml?branch=main&label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions/workflows/js.yml?query=workflow%3AJS+branch%3Amain) +[![npm version](https://img.shields.io/npm/v/bootstrap?logo=npm&logoColor=fff)](https://www.npmjs.com/package/bootstrap) +[![Gem version](https://img.shields.io/gem/v/bootstrap?logo=rubygems&logoColor=fff)](https://rubygems.org/gems/bootstrap) +[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue?logo=meteor&logoColor=fff)](https://atmospherejs.com/twbs/bootstrap) +[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap?logo=packagist&logoColor=fff)](https://packagist.org/packages/twbs/bootstrap) +[![NuGet](https://img.shields.io/nuget/vpre/bootstrap?logo=nuget&logoColor=fff)](https://www.nuget.org/packages/bootstrap/absoluteLatest) +[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main?logo=coveralls&logoColor=fff)](https://coveralls.io/github/twbs/bootstrap?branch=main) [![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) [![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) [![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) [![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229) -[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers) -[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors) +[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap?logo=opencollective&logoColor=fff)](#backers) +[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap?logo=opencollective&logoColor=fff)](#sponsors) ## What's included @@ -144,7 +144,7 @@ Have a bug or a feature request? Please first read the [issue guidelines](https: Bootstrap's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at . The docs may also be run locally. -Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/). Working on our search? Be sure to set `debug: true` in `site/assets/js/search.js`. +Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/). ### Running documentation locally @@ -243,4 +243,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com ## Copyright and license -Code and documentation copyright 2011–2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). +Code and documentation copyright 2011–2023 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). diff --git a/build/.eslintrc.json b/build/.eslintrc.json deleted file mode 100644 index dec6323..0000000 --- a/build/.eslintrc.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "env": { - "browser": false, - "node": true - }, - "parserOptions": { - "sourceType": "script" - }, - "extends": "../.eslintrc.json", - "rules": { - "no-console": "off", - "strict": "error", - "unicorn/prefer-top-level-await": "off" - } -} diff --git a/build/banner.js b/build/banner.js index df82ff3..a022f1c 100644 --- a/build/banner.js +++ b/build/banner.js @@ -1,6 +1,7 @@ 'use strict' const pkg = require('../package.json') + const year = new Date().getFullYear() function getBanner(pluginFilename) { diff --git a/build/build-plugins.js b/build/build-plugins.js index a160209..b2833a3 100644 --- a/build/build-plugins.js +++ b/build/build-plugins.js @@ -2,8 +2,7 @@ /*! * Script to build our plugins to use them separately. - * Copyright 2020-2022 The Bootstrap Authors - * Copyright 2020-2022 Twitter, Inc. + * Copyright 2020-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -16,7 +15,7 @@ const { babel } = require('@rollup/plugin-babel') const banner = require('./banner.js') const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/') -const jsFiles = globby.sync(sourcePath + '/**/*.js') +const jsFiles = globby.sync(`${sourcePath}/**/*.js`) // Array which holds the resolved plugins const resolvedPlugins = [] @@ -27,7 +26,7 @@ const filenameToEntity = filename => filename.replace('.js', '') for (const file of jsFiles) { resolvedPlugins.push({ - src: file.replace('.js', ''), + src: file, dist: file.replace('src', 'dist'), fileName: path.basename(file), className: filenameToEntity(path.basename(file)) diff --git a/build/change-version.js b/build/change-version.js index 57c5fde..9685df5 100644 --- a/build/change-version.js +++ b/build/change-version.js @@ -2,8 +2,7 @@ /*! * Script to update version number references in the project. - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. + * Copyright 2017-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -36,9 +35,17 @@ function regExpQuoteReplacement(string) { async function replaceRecursively(file, oldVersion, newVersion) { const originalString = await fs.readFile(file, 'utf8') - const newString = originalString.replace( - new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion) - ) + const newString = originalString + .replace( + new RegExp(regExpQuote(oldVersion), 'g'), + regExpQuoteReplacement(newVersion) + ) + // Also replace the version used by the rubygem, + // which is using periods (`.`) instead of hyphens (`-`) + .replace( + new RegExp(regExpQuote(oldVersion.replace(/-/g, '.')), 'g'), + regExpQuoteReplacement(newVersion.replace(/-/g, '.')) + ) // No need to move any further if the strings are identical if (originalString === newString) { @@ -56,22 +63,35 @@ async function replaceRecursively(file, oldVersion, newVersion) { await fs.writeFile(file, newString, 'utf8') } +function showUsage(args) { + console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]') + console.error('Got arguments:', args) + process.exit(1) +} + async function main(args) { let [oldVersion, newVersion] = args if (!oldVersion || !newVersion) { - console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]') - console.error('Got arguments:', args) - process.exit(1) + showUsage(args) } - // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s - [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg) + // Strip any leading `v` from arguments because + // otherwise we will end up with duplicate `v`s + [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => { + return arg.startsWith('v') ? arg.slice(1) : arg + }) + + if (oldVersion === newVersion) { + showUsage(args) + } try { const files = await globby(GLOB, GLOBBY_OPTIONS) - await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion))) + await Promise.all( + files.map(file => replaceRecursively(file, oldVersion, newVersion)) + ) } catch (error) { console.error(error) process.exit(1) diff --git a/build/generate-sri.js b/build/generate-sri.js index ef1b39f..2e22924 100644 --- a/build/generate-sri.js +++ b/build/generate-sri.js @@ -5,8 +5,7 @@ * Remember to use the same vendor files as the CDN ones, * otherwise the hashes won't match! * - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. + * Copyright 2017-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -19,11 +18,11 @@ const sh = require('shelljs') sh.config.fatal = true -const configFile = path.join(__dirname, '../config.yml') +const configFile = path.join(__dirname, '../hugo.yml') // Array of objects which holds the files to generate SRI hashes for. // `file` is the path from the root folder -// `configPropertyName` is the config.yml variable's name of the file +// `configPropertyName` is the hugo.yml variable's name of the file const files = [ { file: 'dist/css/bootstrap.min.css', @@ -47,8 +46,8 @@ const files = [ } ] -for (const file of files) { - fs.readFile(file.file, 'utf8', (error, data) => { +for (const { file, configPropertyName } of files) { + fs.readFile(file, 'utf8', (error, data) => { if (error) { throw error } @@ -57,8 +56,8 @@ for (const file of files) { const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64') const integrity = `${algo}-${hash}` - console.log(`${file.configPropertyName}: ${integrity}`) + console.log(`${configPropertyName}: ${integrity}`) - sh.sed('-i', new RegExp(`^(\\s+${file.configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile) + sh.sed('-i', new RegExp(`^(\\s+${configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile) }) } diff --git a/build/rollup.config.js b/build/rollup.config.js index 27f12ac..f01918e 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -40,7 +40,7 @@ if (BUNDLE) { const rollupConfig = { input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`), output: { - banner, + banner: banner(), file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`), format: ESM ? 'esm' : 'umd', globals, diff --git a/build/vnu-jar.js b/build/vnu-jar.js index f29eeb7..22956cb 100644 --- a/build/vnu-jar.js +++ b/build/vnu-jar.js @@ -2,8 +2,7 @@ /*! * Script to run vnu-jar if Java is available. - * Copyright 2017-2022 The Bootstrap Authors - * Copyright 2017-2022 Twitter, Inc. + * Copyright 2017-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -14,10 +13,13 @@ const vnu = require('vnu-jar') execFile('java', ['-version'], (error, stdout, stderr) => { if (error) { - console.error('Skipping vnu-jar test; Java is missing.') + console.error('Skipping vnu-jar test; Java is probably missing.') + console.error(error) return } + console.log('Running vnu-jar validation...') + const is32bitJava = !/64-Bit/.test(stderr) // vnu-jar accepts multiple ignores joined with a `|`. @@ -49,6 +51,8 @@ execFile('java', ['-version'], (error, stdout, stderr) => { args.splice(0, 0, '-Xss512k') } + console.log(`command used: java ${args.join(' ')}`) + return spawn('java', args, { shell: true, stdio: 'inherit' diff --git a/build/zip-examples.js b/build/zip-examples.js index 077901e..613376a 100644 --- a/build/zip-examples.js +++ b/build/zip-examples.js @@ -3,7 +3,7 @@ /*! * Script to create the built examples zip archive; * requires the `zip` command to be present! - * Copyright 2020-2022 The Bootstrap Authors + * Copyright 2020-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -84,7 +84,7 @@ for (const file of sh.find(`${distFolder}/**/*.html`)) { } // create the zip file -sh.exec(`zip -r9 "${distFolder}.zip" "${distFolder}"`) +sh.exec(`zip -qr9 "${distFolder}.zip" "${distFolder}"`) // remove the folder we created sh.rm('-rf', distFolder) diff --git a/config.yml b/config.yml deleted file mode 100644 index 682f873..0000000 --- a/config.yml +++ /dev/null @@ -1,88 +0,0 @@ -languageCode: "en" -title: "Bootstrap" -baseURL: "https://getbootstrap.com" - -security: - enableInlineShortcodes: true - funcs: - getenv: - - ^HUGO_ - - NETLIFY - -markup: - goldmark: - renderer: - unsafe: true - highlight: - noClasses: false - tableOfContents: - startLevel: 2 - endLevel: 6 - -buildDrafts: true -buildFuture: true - -enableRobotsTXT: true -metaDataFormat: "yaml" -disableKinds: ["404", "taxonomy", "term", "RSS"] - -publishDir: "_site" - -module: - mounts: - - source: dist - target: static/docs/5.2/dist - - source: site/assets - target: assets - - source: site/content - target: content - - source: site/data - target: data - - source: site/layouts - target: layouts - - source: site/static - target: static - - source: site/static/docs/5.2/assets/img/favicons/apple-touch-icon.png - target: static/apple-touch-icon.png - - source: site/static/docs/5.2/assets/img/favicons/favicon.ico - target: static/favicon.ico - -params: - subtitle: "The most popular HTML, CSS, and JS library in the world." - description: "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." - authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors" - - current_version: "5.2.3" - current_ruby_version: "5.2.3" - docs_version: "5.2" - rfs_version: "v9.0.6" - github_org: "https://github.com/twbs" - repo: "https://github.com/twbs/bootstrap" - twitter: "getbootstrap" - opencollective: "https://opencollective.com/bootstrap" - blog: "https://blog.getbootstrap.com/" - themes: "https://themes.getbootstrap.com/" - icons: "https://icons.getbootstrap.com/" - swag: "https://cottonbureau.com/people/bootstrap" - - download: - source: "https://github.com/twbs/bootstrap/archive/v5.2.3.zip" - dist: "https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-dist.zip" - dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-examples.zip" - - cdn: - # See https://www.srihash.org for info on how to generate the hashes - css: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" - css_hash: "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" - css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.rtl.min.css" - css_rtl_hash: "sha384-DOXMLfHhQkvFFp+rWTZwVlPVqdIhpDVYT9csOnHSgWQWPX0v5MCGtjCJbY6ERspU" - js: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" - js_hash: "sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" - js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" - js_bundle_hash: "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" - popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" - popper_hash: "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" - - anchors: - min: 2 - max: 5 diff --git a/hugo.yml b/hugo.yml new file mode 100644 index 0000000..47da082 --- /dev/null +++ b/hugo.yml @@ -0,0 +1,89 @@ +languageCode: "en" +title: "Bootstrap" +baseURL: "https://getbootstrap.com" + +security: + enableInlineShortcodes: true + funcs: + getenv: + - ^HUGO_ + - NETLIFY + +markup: + goldmark: + renderer: + unsafe: true + highlight: + noClasses: false + tableOfContents: + startLevel: 2 + endLevel: 6 + +buildDrafts: true +buildFuture: true + +enableRobotsTXT: true +metaDataFormat: "yaml" +disableKinds: ["404", "taxonomy", "term", "RSS"] + +publishDir: "_site" + +module: + mounts: + - source: dist + target: static/docs/5.3/dist + - source: site/assets + target: assets + - source: site/content + target: content + - source: site/data + target: data + - source: site/layouts + target: layouts + - source: site/static + target: static + - source: site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png + target: static/apple-touch-icon.png + - source: site/static/docs/5.3/assets/img/favicons/favicon.ico + target: static/favicon.ico + +params: + subtitle: "The most popular HTML, CSS, and JS library in the world." + description: "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." + authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors" + + current_version: "5.3.0" + current_ruby_version: "5.3.0" + docs_version: "5.3" + rfs_version: "v10.0.0" + github_org: "https://github.com/twbs" + repo: "https://github.com/twbs/bootstrap" + twitter: "getbootstrap" + opencollective: "https://opencollective.com/bootstrap" + blog: "https://blog.getbootstrap.com/" + themes: "https://themes.getbootstrap.com/" + icons: "https://icons.getbootstrap.com/" + swag: "https://cottonbureau.com/people/bootstrap" + + download: + source: "https://github.com/twbs/bootstrap/archive/v5.3.0.zip" + dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip" + dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-examples.zip" + + cdn: + # See https://www.srihash.org for info on how to generate the hashes + css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" + css_hash: "sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" + css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" + css_rtl_hash: "sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" + js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" + js_hash: "sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" + js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" + js_bundle_hash: "sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" + popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" + popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" + popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js" + + anchors: + min: 2 + max: 5 diff --git a/js/index.esm.js b/js/index.esm.js index b837649..155d9fb 100644 --- a/js/index.esm.js +++ b/js/index.esm.js @@ -1,19 +1,19 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): index.esm.js + * Bootstrap index.esm.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -export { default as Alert } from './src/alert' -export { default as Button } from './src/button' -export { default as Carousel } from './src/carousel' -export { default as Collapse } from './src/collapse' -export { default as Dropdown } from './src/dropdown' -export { default as Modal } from './src/modal' -export { default as Offcanvas } from './src/offcanvas' -export { default as Popover } from './src/popover' -export { default as ScrollSpy } from './src/scrollspy' -export { default as Tab } from './src/tab' -export { default as Toast } from './src/toast' -export { default as Tooltip } from './src/tooltip' +export { default as Alert } from './src/alert.js' +export { default as Button } from './src/button.js' +export { default as Carousel } from './src/carousel.js' +export { default as Collapse } from './src/collapse.js' +export { default as Dropdown } from './src/dropdown.js' +export { default as Modal } from './src/modal.js' +export { default as Offcanvas } from './src/offcanvas.js' +export { default as Popover } from './src/popover.js' +export { default as ScrollSpy } from './src/scrollspy.js' +export { default as Tab } from './src/tab.js' +export { default as Toast } from './src/toast.js' +export { default as Tooltip } from './src/tooltip.js' diff --git a/js/index.umd.js b/js/index.umd.js index 5abe8db..a33df74 100644 --- a/js/index.umd.js +++ b/js/index.umd.js @@ -1,22 +1,22 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): index.umd.js + * Bootstrap index.umd.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import Alert from './src/alert' -import Button from './src/button' -import Carousel from './src/carousel' -import Collapse from './src/collapse' -import Dropdown from './src/dropdown' -import Modal from './src/modal' -import Offcanvas from './src/offcanvas' -import Popover from './src/popover' -import ScrollSpy from './src/scrollspy' -import Tab from './src/tab' -import Toast from './src/toast' -import Tooltip from './src/tooltip' +import Alert from './src/alert.js' +import Button from './src/button.js' +import Carousel from './src/carousel.js' +import Collapse from './src/collapse.js' +import Dropdown from './src/dropdown.js' +import Modal from './src/modal.js' +import Offcanvas from './src/offcanvas.js' +import Popover from './src/popover.js' +import ScrollSpy from './src/scrollspy.js' +import Tab from './src/tab.js' +import Toast from './src/toast.js' +import Tooltip from './src/tooltip.js' export default { Alert, diff --git a/js/src/alert.js b/js/src/alert.js index 59de828..88232bc 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -1,14 +1,14 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): alert.js + * Bootstrap alert.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin } from './util/index' -import EventHandler from './dom/event-handler' -import BaseComponent from './base-component' -import { enableDismissTrigger } from './util/component-functions' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import { enableDismissTrigger } from './util/component-functions.js' +import { defineJQueryPlugin } from './util/index.js' /** * Constants diff --git a/js/src/base-component.js b/js/src/base-component.js index 0c1a259..d13c7ab 100644 --- a/js/src/base-component.js +++ b/js/src/base-component.js @@ -1,20 +1,20 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): base-component.js + * Bootstrap base-component.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import Data from './dom/data' -import { executeAfterTransition, getElement } from './util/index' -import EventHandler from './dom/event-handler' -import Config from './util/config' +import Data from './dom/data.js' +import EventHandler from './dom/event-handler.js' +import Config from './util/config.js' +import { executeAfterTransition, getElement } from './util/index.js' /** * Constants */ -const VERSION = '5.2.3' +const VERSION = '5.3.0' /** * Class definition diff --git a/js/src/button.js b/js/src/button.js index 03e7604..a797f50 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -1,13 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): button.js + * Bootstrap button.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin } from './util/index' -import EventHandler from './dom/event-handler' -import BaseComponent from './base-component' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import { defineJQueryPlugin } from './util/index.js' /** * Constants diff --git a/js/src/carousel.js b/js/src/carousel.js index 24bbe39..68d11a3 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,24 +1,23 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): carousel.js + * Bootstrap carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import Manipulator from './dom/manipulator.js' +import SelectorEngine from './dom/selector-engine.js' import { defineJQueryPlugin, - getElementFromSelector, getNextActiveElement, isRTL, isVisible, reflow, triggerTransitionEnd -} from './util/index' -import EventHandler from './dom/event-handler' -import Manipulator from './dom/manipulator' -import SelectorEngine from './dom/selector-engine' -import Swipe from './util/swipe' -import BaseComponent from './base-component' +} from './util/index.js' +import Swipe from './util/swipe.js' /** * Constants @@ -330,7 +329,7 @@ class Carousel extends BaseComponent { if (!activeElement || !nextElement) { // Some weirdness is happening, so we bail - // todo: change tests that use empty divs to avoid this check + // TODO: change tests that use empty divs to avoid this check return } @@ -431,7 +430,7 @@ class Carousel extends BaseComponent { */ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) { - const target = getElementFromSelector(this) + const target = SelectorEngine.getElementFromSelector(this) if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) { return diff --git a/js/src/collapse.js b/js/src/collapse.js index 204d180..9f0c60c 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -1,20 +1,18 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): collapse.js + * Bootstrap collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import SelectorEngine from './dom/selector-engine.js' import { defineJQueryPlugin, getElement, - getElementFromSelector, - getSelectorFromElement, reflow -} from './util/index' -import EventHandler from './dom/event-handler' -import SelectorEngine from './dom/selector-engine' -import BaseComponent from './base-component' +} from './util/index.js' /** * Constants @@ -68,7 +66,7 @@ class Collapse extends BaseComponent { const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) for (const elem of toggleList) { - const selector = getSelectorFromElement(elem) + const selector = SelectorEngine.getSelectorFromElement(elem) const filterElement = SelectorEngine.find(selector) .filter(foundElement => foundElement === this._element) @@ -185,7 +183,7 @@ class Collapse extends BaseComponent { this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW) for (const trigger of this._triggerArray) { - const element = getElementFromSelector(trigger) + const element = SelectorEngine.getElementFromSelector(trigger) if (element && !this._isShown(element)) { this._addAriaAndCollapsedClass([trigger], false) @@ -229,7 +227,7 @@ class Collapse extends BaseComponent { const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE) for (const element of children) { - const selected = getElementFromSelector(element) + const selected = SelectorEngine.getElementFromSelector(element) if (selected) { this._addAriaAndCollapsedClass([element], this._isShown(selected)) @@ -285,10 +283,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( event.preventDefault() } - const selector = getSelectorFromElement(this) - const selectorElements = SelectorEngine.find(selector) - - for (const element of selectorElements) { + for (const element of SelectorEngine.getMultipleElementsFromSelector(this)) { Collapse.getOrCreateInstance(element, { toggle: false }).toggle() } }) diff --git a/js/src/dom/data.js b/js/src/dom/data.js index 2c6a46e..407f67e 100644 --- a/js/src/dom/data.js +++ b/js/src/dom/data.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dom/data.js + * Bootstrap dom/data.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index 9876d77..561d875 100644 --- a/js/src/dom/event-handler.js +++ b/js/src/dom/event-handler.js @@ -1,11 +1,11 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dom/event-handler.js + * Bootstrap dom/event-handler.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { getjQuery } from '../util/index' +import { getjQuery } from '../util/index.js' /** * Constants @@ -128,7 +128,7 @@ function findHandler(events, callable, delegationSelector = null) { function normalizeParameters(originalTypeEvent, handler, delegationFunction) { const isDelegated = typeof handler === 'string' - // todo: tooltip passes `false` instead of selector, so we need to check + // TODO: tooltip passes `false` instead of selector, so we need to check const callable = isDelegated ? delegationFunction : (handler || delegationFunction) let typeEvent = getTypeEvent(originalTypeEvent) @@ -198,9 +198,8 @@ function removeHandler(element, events, typeEvent, handler, delegationSelector) function removeNamespacedHandlers(element, events, typeEvent, namespace) { const storeElementEvent = events[typeEvent] || {} - for (const handlerKey of Object.keys(storeElementEvent)) { + for (const [handlerKey, event] of Object.entries(storeElementEvent)) { if (handlerKey.includes(namespace)) { - const event = storeElementEvent[handlerKey] removeHandler(element, events, typeEvent, event.callable, event.delegationSelector) } } @@ -248,11 +247,10 @@ const EventHandler = { } } - for (const keyHandlers of Object.keys(storeElementEvent)) { + for (const [keyHandlers, event] of Object.entries(storeElementEvent)) { const handlerKey = keyHandlers.replace(stripUidRegex, '') if (!inNamespace || originalTypeEvent.includes(handlerKey)) { - const event = storeElementEvent[keyHandlers] removeHandler(element, events, typeEvent, event.callable, event.delegationSelector) } } @@ -281,8 +279,7 @@ const EventHandler = { defaultPrevented = jQueryEvent.isDefaultPrevented() } - let evt = new Event(event, { bubbles, cancelable: true }) - evt = hydrateObj(evt, args) + const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args) if (defaultPrevented) { evt.preventDefault() @@ -300,8 +297,8 @@ const EventHandler = { } } -function hydrateObj(obj, meta) { - for (const [key, value] of Object.entries(meta || {})) { +function hydrateObj(obj, meta = {}) { + for (const [key, value] of Object.entries(meta)) { try { obj[key] = value } catch { diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index 38ecfe4..dd86a9f 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dom/manipulator.js + * Bootstrap dom/manipulator.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js index 1ba104f..3cecf6f 100644 --- a/js/src/dom/selector-engine.js +++ b/js/src/dom/selector-engine.js @@ -1,15 +1,36 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dom/selector-engine.js + * Bootstrap dom/selector-engine.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { isDisabled, isVisible } from '../util/index' +import { isDisabled, isVisible, parseSelector } from '../util/index.js' -/** - * Constants - */ +const getSelector = element => { + let selector = element.getAttribute('data-bs-target') + + if (!selector || selector === '#') { + let hrefAttribute = element.getAttribute('href') + + // The only valid content that could double as a selector are IDs or classes, + // so everything starting with `#` or `.`. If a "real" URL is used as the selector, + // `document.querySelector` will rightfully complain it is invalid. + // See https://github.com/twbs/bootstrap/issues/32273 + if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) { + return null + } + + // Just in case some CMS puts out a full URL with the anchor appended + if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { + hrefAttribute = `#${hrefAttribute.split('#')[1]}` + } + + selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null + } + + return parseSelector(selector) +} const SelectorEngine = { find(selector, element = document.documentElement) { @@ -77,6 +98,28 @@ const SelectorEngine = { ].map(selector => `${selector}:not([tabindex^="-"])`).join(',') return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el)) + }, + + getSelectorFromElement(element) { + const selector = getSelector(element) + + if (selector) { + return SelectorEngine.findOne(selector) ? selector : null + } + + return null + }, + + getElementFromSelector(element) { + const selector = getSelector(element) + + return selector ? SelectorEngine.findOne(selector) : null + }, + + getMultipleElementsFromSelector(element) { + const selector = getSelector(element) + + return selector ? SelectorEngine.find(selector) : [] } } diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 9596baa..af5fd16 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,13 +1,18 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dropdown.js + * Bootstrap dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ import * as Popper from '@popperjs/core' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import Manipulator from './dom/manipulator.js' +import SelectorEngine from './dom/selector-engine.js' import { defineJQueryPlugin, + execute, getElement, getNextActiveElement, isDisabled, @@ -15,11 +20,7 @@ import { isRTL, isVisible, noop -} from './util/index' -import EventHandler from './dom/event-handler' -import Manipulator from './dom/manipulator' -import SelectorEngine from './dom/selector-engine' -import BaseComponent from './base-component' +} from './util/index.js' /** * Constants @@ -95,7 +96,7 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || SelectorEngine.findOne(SELECTOR_MENU, this._parent) @@ -310,7 +311,7 @@ class Dropdown extends BaseComponent { // Disable Popper if we have a static display or Dropdown is in Navbar if (this._inNavbar || this._config.display === 'static') { - Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove + Manipulator.setDataAttribute(this._menu, 'popper', 'static') // TODO: v6 remove defaultBsPopperConfig.modifiers = [{ name: 'applyStyles', enabled: false @@ -319,7 +320,7 @@ class Dropdown extends BaseComponent { return { ...defaultBsPopperConfig, - ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig) + ...execute(this._config.popperConfig, [defaultBsPopperConfig]) } } @@ -408,7 +409,7 @@ class Dropdown extends BaseComponent { event.preventDefault() - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || diff --git a/js/src/modal.js b/js/src/modal.js index 26c7e8c..b44cbb9 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -1,18 +1,18 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): modal.js + * Bootstrap modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index' -import EventHandler from './dom/event-handler' -import SelectorEngine from './dom/selector-engine' -import ScrollBarHelper from './util/scrollbar' -import BaseComponent from './base-component' -import Backdrop from './util/backdrop' -import FocusTrap from './util/focustrap' -import { enableDismissTrigger } from './util/component-functions' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import SelectorEngine from './dom/selector-engine.js' +import Backdrop from './util/backdrop.js' +import { enableDismissTrigger } from './util/component-functions.js' +import FocusTrap from './util/focustrap.js' +import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index.js' +import ScrollBarHelper from './util/scrollbar.js' /** * Constants @@ -139,12 +139,12 @@ class Modal extends BaseComponent { } dispose() { - for (const htmlElement of [window, this._dialog]) { - EventHandler.off(htmlElement, EVENT_KEY) - } + EventHandler.off(window, EVENT_KEY) + EventHandler.off(this._dialog, EVENT_KEY) this._backdrop.dispose() this._focustrap.deactivate() + super.dispose() } @@ -208,7 +208,6 @@ class Modal extends BaseComponent { } if (this._config.keyboard) { - event.preventDefault() this.hide() return } @@ -336,7 +335,7 @@ class Modal extends BaseComponent { */ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { - const target = getElementFromSelector(this) + const target = SelectorEngine.getElementFromSelector(this) if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault() diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index 7dd06fd..8d1feb1 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -1,23 +1,22 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): offcanvas.js + * Bootstrap offcanvas.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import SelectorEngine from './dom/selector-engine.js' +import Backdrop from './util/backdrop.js' +import { enableDismissTrigger } from './util/component-functions.js' +import FocusTrap from './util/focustrap.js' import { defineJQueryPlugin, - getElementFromSelector, isDisabled, isVisible -} from './util/index' -import ScrollBarHelper from './util/scrollbar' -import EventHandler from './dom/event-handler' -import BaseComponent from './base-component' -import SelectorEngine from './dom/selector-engine' -import Backdrop from './util/backdrop' -import FocusTrap from './util/focustrap' -import { enableDismissTrigger } from './util/component-functions' +} from './util/index.js' +import ScrollBarHelper from './util/scrollbar.js' /** * Constants @@ -199,12 +198,12 @@ class Offcanvas extends BaseComponent { return } - if (!this._config.keyboard) { - EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) + if (this._config.keyboard) { + this.hide() return } - this.hide() + EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) }) } @@ -231,7 +230,7 @@ class Offcanvas extends BaseComponent { */ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { - const target = getElementFromSelector(this) + const target = SelectorEngine.getElementFromSelector(this) if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault() diff --git a/js/src/popover.js b/js/src/popover.js index 1b09dd4..612c521 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -1,12 +1,12 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): popover.js + * Bootstrap popover.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin } from './util/index' -import Tooltip from './tooltip' +import Tooltip from './tooltip.js' +import { defineJQueryPlugin } from './util/index.js' /** * Constants diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 01aba99..69de715 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -1,14 +1,14 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): scrollspy.js + * Bootstrap scrollspy.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index' -import EventHandler from './dom/event-handler' -import SelectorEngine from './dom/selector-engine' -import BaseComponent from './base-component' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import SelectorEngine from './dom/selector-engine.js' +import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js' /** * Constants @@ -208,11 +208,11 @@ class ScrollSpy extends BaseComponent { continue } - const observableSection = SelectorEngine.findOne(anchor.hash, this._element) + const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element) // ensure that the observableSection exists & is visible if (isVisible(observableSection)) { - this._targetLinks.set(anchor.hash, anchor) + this._targetLinks.set(decodeURI(anchor.hash), anchor) this._observableSections.set(anchor.hash, observableSection) } } diff --git a/js/src/tab.js b/js/src/tab.js index 8dc4644..d9993d5 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -1,14 +1,14 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): tab.js + * Bootstrap tab.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index' -import EventHandler from './dom/event-handler' -import SelectorEngine from './dom/selector-engine' -import BaseComponent from './base-component' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import SelectorEngine from './dom/selector-engine.js' +import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index.js' /** * Constants @@ -43,7 +43,7 @@ const NOT_SELECTOR_DROPDOWN_TOGGLE = ':not(.dropdown-toggle)' const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]' const SELECTOR_OUTER = '.nav-item, .list-group-item' const SELECTOR_INNER = `.nav-link${NOT_SELECTOR_DROPDOWN_TOGGLE}, .list-group-item${NOT_SELECTOR_DROPDOWN_TOGGLE}, [role="tab"]${NOT_SELECTOR_DROPDOWN_TOGGLE}` -const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' // todo:v6: could be only `tab` +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' // TODO: could only be `tab` in v6 const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}` const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="list"]` @@ -59,7 +59,7 @@ class Tab extends BaseComponent { if (!this._parent) { return - // todo: should Throw exception on v6 + // TODO: should throw exception in v6 // throw new TypeError(`${element.outerHTML} has not a valid parent ${SELECTOR_INNER_ELEM}`) } @@ -106,7 +106,7 @@ class Tab extends BaseComponent { element.classList.add(CLASS_NAME_ACTIVE) - this._activate(getElementFromSelector(element)) // Search and activate/show the proper section + this._activate(SelectorEngine.getElementFromSelector(element)) // Search and activate/show the proper section const complete = () => { if (element.getAttribute('role') !== 'tab') { @@ -133,7 +133,7 @@ class Tab extends BaseComponent { element.classList.remove(CLASS_NAME_ACTIVE) element.blur() - this._deactivate(getElementFromSelector(element)) // Search and deactivate the shown section too + this._deactivate(SelectorEngine.getElementFromSelector(element)) // Search and deactivate the shown section too const complete = () => { if (element.getAttribute('role') !== 'tab') { @@ -203,7 +203,7 @@ class Tab extends BaseComponent { } _setInitialAttributesOnTargetPanel(child) { - const target = getElementFromSelector(child) + const target = SelectorEngine.getElementFromSelector(child) if (!target) { return @@ -212,7 +212,7 @@ class Tab extends BaseComponent { this._setAttributeIfNotExists(target, 'role', 'tabpanel') if (child.id) { - this._setAttributeIfNotExists(target, 'aria-labelledby', `#${child.id}`) + this._setAttributeIfNotExists(target, 'aria-labelledby', `${child.id}`) } } diff --git a/js/src/toast.js b/js/src/toast.js index a7fe775..d5d9c0e 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -1,14 +1,14 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): toast.js + * Bootstrap toast.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { defineJQueryPlugin, reflow } from './util/index' -import EventHandler from './dom/event-handler' -import BaseComponent from './base-component' -import { enableDismissTrigger } from './util/component-functions' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import { enableDismissTrigger } from './util/component-functions.js' +import { defineJQueryPlugin, reflow } from './util/index.js' /** * Constants diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 748a0e1..1252811 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -1,17 +1,17 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): tooltip.js + * Bootstrap tooltip.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ import * as Popper from '@popperjs/core' -import { defineJQueryPlugin, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index' -import { DefaultAllowlist } from './util/sanitizer' -import EventHandler from './dom/event-handler' -import Manipulator from './dom/manipulator' -import BaseComponent from './base-component' -import TemplateFactory from './util/template-factory' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import Manipulator from './dom/manipulator.js' +import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js' +import { DefaultAllowlist } from './util/sanitizer.js' +import TemplateFactory from './util/template-factory.js' /** * Constants @@ -62,7 +62,7 @@ const Default = { delay: 0, fallbackPlacements: ['top', 'right', 'bottom', 'left'], html: false, - offset: [0, 0], + offset: [0, 6], placement: 'top', popperConfig: null, sanitize: true, @@ -197,7 +197,7 @@ class Tooltip extends BaseComponent { return } - // todo v6 remove this OR make it optional + // TODO: v6 remove this or make it optional this._disposePopper() const tip = this._getTipElement() @@ -302,13 +302,13 @@ class Tooltip extends BaseComponent { _createTipElement(content) { const tip = this._getTemplateFactory(content).toHtml() - // todo: remove this check on v6 + // TODO: remove this check in v6 if (!tip) { return null } tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW) - // todo: on v6 the following can be achieved with CSS only + // TODO: v6 the following can be achieved with CSS only tip.classList.add(`bs-${this.constructor.NAME}-auto`) const tipId = getUID(this.constructor.NAME).toString() @@ -370,9 +370,7 @@ class Tooltip extends BaseComponent { } _createPopper(tip) { - const placement = typeof this._config.placement === 'function' ? - this._config.placement.call(this, tip, this._element) : - this._config.placement + const placement = execute(this._config.placement, [this, tip, this._element]) const attachment = AttachmentMap[placement.toUpperCase()] return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment)) } @@ -392,7 +390,7 @@ class Tooltip extends BaseComponent { } _resolvePossibleFunction(arg) { - return typeof arg === 'function' ? arg.call(this._element) : arg + return execute(arg, [this._element]) } _getPopperConfig(attachment) { @@ -438,7 +436,7 @@ class Tooltip extends BaseComponent { return { ...defaultBsPopperConfig, - ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig) + ...execute(this._config.popperConfig, [defaultBsPopperConfig]) } } @@ -579,9 +577,9 @@ class Tooltip extends BaseComponent { _getDelegateConfig() { const config = {} - for (const key in this._config) { - if (this.constructor.Default[key] !== this._config[key]) { - config[key] = this._config[key] + for (const [key, value] of Object.entries(this._config)) { + if (this.constructor.Default[key] !== value) { + config[key] = value } } diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index 78279e0..0d478e9 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -1,13 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/backdrop.js + * Bootstrap util/backdrop.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import EventHandler from '../dom/event-handler' -import { execute, executeAfterTransition, getElement, reflow } from './index' -import Config from './config' +import EventHandler from '../dom/event-handler.js' +import Config from './config.js' +import { execute, executeAfterTransition, getElement, reflow } from './index.js' /** * Constants diff --git a/js/src/util/component-functions.js b/js/src/util/component-functions.js index c2f99cc..4be828f 100644 --- a/js/src/util/component-functions.js +++ b/js/src/util/component-functions.js @@ -1,12 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/component-functions.js + * Bootstrap util/component-functions.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import EventHandler from '../dom/event-handler' -import { getElementFromSelector, isDisabled } from './index' +import EventHandler from '../dom/event-handler.js' +import SelectorEngine from '../dom/selector-engine.js' +import { isDisabled } from './index.js' const enableDismissTrigger = (component, method = 'hide') => { const clickEvent = `click.dismiss${component.EVENT_KEY}` @@ -21,7 +22,7 @@ const enableDismissTrigger = (component, method = 'hide') => { return } - const target = getElementFromSelector(this) || this.closest(`.${name}`) + const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`) const instance = component.getOrCreateInstance(target) // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method diff --git a/js/src/util/config.js b/js/src/util/config.js index 1205905..a2b4bfb 100644 --- a/js/src/util/config.js +++ b/js/src/util/config.js @@ -1,12 +1,12 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/config.js + * Bootstrap util/config.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { isElement, toType } from './index' -import Manipulator from '../dom/manipulator' +import Manipulator from '../dom/manipulator.js' +import { isElement, toType } from './index.js' /** * Class definition @@ -49,8 +49,7 @@ class Config { } _typeCheckConfig(config, configTypes = this.constructor.DefaultType) { - for (const property of Object.keys(configTypes)) { - const expectedTypes = configTypes[property] + for (const [property, expectedTypes] of Object.entries(configTypes)) { const value = config[property] const valueType = isElement(value) ? 'element' : toType(value) diff --git a/js/src/util/focustrap.js b/js/src/util/focustrap.js index ef69166..158f3d1 100644 --- a/js/src/util/focustrap.js +++ b/js/src/util/focustrap.js @@ -1,13 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/focustrap.js + * Bootstrap util/focustrap.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import EventHandler from '../dom/event-handler' -import SelectorEngine from '../dom/selector-engine' -import Config from './config' +import EventHandler from '../dom/event-handler.js' +import SelectorEngine from '../dom/selector-engine.js' +import Config from './config.js' /** * Constants diff --git a/js/src/util/index.js b/js/src/util/index.js index 297e571..68b8d89 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/index.js + * Bootstrap util/index.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -9,6 +9,20 @@ const MAX_UID = 1_000_000 const MILLISECONDS_MULTIPLIER = 1000 const TRANSITION_END = 'transitionend' +/** + * Properly escape IDs selectors to handle weird IDs + * @param {string} selector + * @returns {string} + */ +const parseSelector = selector => { + if (selector && window.CSS && window.CSS.escape) { + // document.querySelector needs escaping to handle IDs (html5+) containing for instance / + selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`) + } + + return selector +} + // Shout-out Angus Croll (https://goo.gl/pxwQGp) const toType = object => { if (object === null || object === undefined) { @@ -30,47 +44,6 @@ const getUID = prefix => { return prefix } -const getSelector = element => { - let selector = element.getAttribute('data-bs-target') - - if (!selector || selector === '#') { - let hrefAttribute = element.getAttribute('href') - - // The only valid content that could double as a selector are IDs or classes, - // so everything starting with `#` or `.`. If a "real" URL is used as the selector, - // `document.querySelector` will rightfully complain it is invalid. - // See https://github.com/twbs/bootstrap/issues/32273 - if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) { - return null - } - - // Just in case some CMS puts out a full URL with the anchor appended - if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { - hrefAttribute = `#${hrefAttribute.split('#')[1]}` - } - - selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null - } - - return selector -} - -const getSelectorFromElement = element => { - const selector = getSelector(element) - - if (selector) { - return document.querySelector(selector) ? selector : null - } - - return null -} - -const getElementFromSelector = element => { - const selector = getSelector(element) - - return selector ? document.querySelector(selector) : null -} - const getTransitionDurationFromElement = element => { if (!element) { return 0 @@ -117,7 +90,7 @@ const getElement = object => { } if (typeof object === 'string' && object.length > 0) { - return document.querySelector(object) + return document.querySelector(parseSelector(object)) } return null @@ -249,10 +222,8 @@ const defineJQueryPlugin = plugin => { }) } -const execute = callback => { - if (typeof callback === 'function') { - callback() - } +const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => { + return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue } const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => { @@ -318,10 +289,8 @@ export { executeAfterTransition, findShadowRoot, getElement, - getElementFromSelector, getjQuery, getNextActiveElement, - getSelectorFromElement, getTransitionDurationFromElement, getUID, isDisabled, @@ -330,6 +299,7 @@ export { isVisible, noop, onDOMContentLoaded, + parseSelector, reflow, triggerTransitionEnd, toType diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js index 5328691..d2b0808 100644 --- a/js/src/util/sanitizer.js +++ b/js/src/util/sanitizer.js @@ -1,53 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/sanitizer.js + * Bootstrap util/sanitizer.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -const uriAttributes = new Set([ - 'background', - 'cite', - 'href', - 'itemtype', - 'longdesc', - 'poster', - 'src', - 'xlink:href' -]) - +// js-docs-start allow-list const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i -/** - * A pattern that recognizes a commonly useful subset of URLs that are safe. - * - * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ -const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i - -/** - * A pattern that matches safe data URLs. Only matches image, video and audio types. - * - * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ -const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i - -const allowedAttribute = (attribute, allowedAttributeList) => { - const attributeName = attribute.nodeName.toLowerCase() - - if (allowedAttributeList.includes(attributeName)) { - if (uriAttributes.has(attributeName)) { - return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue)) - } - - return true - } - - // Check if a regular expression validates the attribute. - return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp) - .some(regex => regex.test(attributeName)) -} - export const DefaultAllowlist = { // Global attributes allowed on any supplied element below. '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], @@ -81,6 +41,43 @@ export const DefaultAllowlist = { u: [], ul: [] } +// js-docs-end allow-list + +const uriAttributes = new Set([ + 'background', + 'cite', + 'href', + 'itemtype', + 'longdesc', + 'poster', + 'src', + 'xlink:href' +]) + +/** + * A pattern that recognizes URLs that are safe wrt. XSS in URL navigation + * contexts. + * + * Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38 + */ +// eslint-disable-next-line unicorn/better-regex +const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i + +const allowedAttribute = (attribute, allowedAttributeList) => { + const attributeName = attribute.nodeName.toLowerCase() + + if (allowedAttributeList.includes(attributeName)) { + if (uriAttributes.has(attributeName)) { + return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue)) + } + + return true + } + + // Check if a regular expression validates the attribute. + return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp) + .some(regex => regex.test(attributeName)) +} export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) { if (!unsafeHtml.length) { @@ -100,7 +97,6 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) { if (!Object.keys(allowList).includes(elementName)) { element.remove() - continue } diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js index 5cac7b6..413f178 100644 --- a/js/src/util/scrollbar.js +++ b/js/src/util/scrollbar.js @@ -1,13 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/scrollBar.js + * Bootstrap util/scrollBar.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import SelectorEngine from '../dom/selector-engine' -import Manipulator from '../dom/manipulator' -import { isElement } from './index' +import Manipulator from '../dom/manipulator.js' +import SelectorEngine from '../dom/selector-engine.js' +import { isElement } from './index.js' /** * Constants diff --git a/js/src/util/swipe.js b/js/src/util/swipe.js index 7126360..d2f7087 100644 --- a/js/src/util/swipe.js +++ b/js/src/util/swipe.js @@ -1,13 +1,13 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/swipe.js + * Bootstrap util/swipe.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import Config from './config' -import EventHandler from '../dom/event-handler' -import { execute } from './index' +import EventHandler from '../dom/event-handler.js' +import Config from './config.js' +import { execute } from './index.js' /** * Constants diff --git a/js/src/util/template-factory.js b/js/src/util/template-factory.js index cf402fa..f73589b 100644 --- a/js/src/util/template-factory.js +++ b/js/src/util/template-factory.js @@ -1,14 +1,14 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): util/template-factory.js + * Bootstrap util/template-factory.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -import { DefaultAllowlist, sanitizeHtml } from './sanitizer' -import { getElement, isElement } from '../util/index' -import SelectorEngine from '../dom/selector-engine' -import Config from './config' +import SelectorEngine from '../dom/selector-engine.js' +import Config from './config.js' +import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js' +import { execute, getElement, isElement } from './index.js' /** * Constants @@ -143,7 +143,7 @@ class TemplateFactory extends Config { } _resolvePossibleFunction(arg) { - return typeof arg === 'function' ? arg(this) : arg + return execute(arg, [this]) } _putElementInTemplate(element, templateElement) { diff --git a/js/tests/browsers.js b/js/tests/browsers.js index 8adedc6..c515e64 100644 --- a/js/tests/browsers.js +++ b/js/tests/browsers.js @@ -1,6 +1,7 @@ -/* eslint-env node */ /* eslint-disable camelcase */ +'use strict' + const browsers = { safariMac: { base: 'BrowserStack', diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js index 8546141..3c1eec9 100644 --- a/js/tests/integration/bundle-modularity.js +++ b/js/tests/integration/bundle-modularity.js @@ -1,3 +1,5 @@ +/* eslint-disable import/extensions, import/no-unassigned-import */ + import Tooltip from '../../dist/tooltip' import '../../dist/carousel' diff --git a/js/tests/integration/rollup.bundle-modularity.js b/js/tests/integration/rollup.bundle-modularity.js index a8670ca..63d6515 100644 --- a/js/tests/integration/rollup.bundle-modularity.js +++ b/js/tests/integration/rollup.bundle-modularity.js @@ -1,7 +1,7 @@ -/* eslint-env node */ +'use strict' const commonjs = require('@rollup/plugin-commonjs') -const configRollup = require('./rollup.bundle') +const configRollup = require('./rollup.bundle.js') const config = { ...configRollup, diff --git a/js/tests/integration/rollup.bundle.js b/js/tests/integration/rollup.bundle.js index caddcab..8b3c578 100644 --- a/js/tests/integration/rollup.bundle.js +++ b/js/tests/integration/rollup.bundle.js @@ -1,4 +1,4 @@ -/* eslint-env node */ +'use strict' const { babel } = require('@rollup/plugin-babel') const { nodeResolve } = require('@rollup/plugin-node-resolve') diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js index 6636ff1..36bf7f2 100644 --- a/js/tests/karma.conf.js +++ b/js/tests/karma.conf.js @@ -1,5 +1,3 @@ -/* eslint-env node */ - 'use strict' const path = require('node:path') @@ -8,7 +6,7 @@ const { babel } = require('@rollup/plugin-babel') const istanbul = require('rollup-plugin-istanbul') const { nodeResolve } = require('@rollup/plugin-node-resolve') const replace = require('@rollup/plugin-replace') -const { browsers } = require('./browsers') +const { browsers } = require('./browsers.js') const ENV = process.env const BROWSERSTACK = Boolean(ENV.BROWSERSTACK) @@ -105,7 +103,7 @@ if (BROWSERSTACK) { config.browserStack = { username: ENV.BROWSER_STACK_USERNAME, accessKey: ENV.BROWSER_STACK_ACCESS_KEY, - build: `bootstrap-${ENV.GITHUB_SHA ? ENV.GITHUB_SHA.slice(0, 7) + '-' : ''}${new Date().toISOString()}`, + build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`, project: 'Bootstrap', retryLimit: 2 } diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json deleted file mode 100644 index 6362a1a..0000000 --- a/js/tests/unit/.eslintrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": [ - "../../../.eslintrc.json" - ], - "env": { - "jasmine": true - }, - "rules": { - "unicorn/consistent-function-scoping": "off", - "unicorn/no-useless-undefined": "off", - "unicorn/prefer-add-event-listener": "off" - } -} diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js index d3740c9..97cc3cc 100644 --- a/js/tests/unit/alert.spec.js +++ b/js/tests/unit/alert.spec.js @@ -1,6 +1,6 @@ -import Alert from '../../src/alert' -import { getTransitionDurationFromElement } from '../../src/util/index' -import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture' +import Alert from '../../src/alert.js' +import { getTransitionDurationFromElement } from '../../src/util/index.js' +import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js' describe('Alert', () => { let fixtureEl diff --git a/js/tests/unit/base-component.spec.js b/js/tests/unit/base-component.spec.js index b2352d6..5b7d52e 100644 --- a/js/tests/unit/base-component.spec.js +++ b/js/tests/unit/base-component.spec.js @@ -1,7 +1,7 @@ -import BaseComponent from '../../src/base-component' -import { clearFixture, getFixture } from '../helpers/fixture' -import EventHandler from '../../src/dom/event-handler' -import { noop } from '../../src/util' +import BaseComponent from '../../src/base-component.js' +import EventHandler from '../../src/dom/event-handler.js' +import { noop } from '../../src/util/index.js' +import { clearFixture, getFixture } from '../helpers/fixture.js' class DummyClass extends BaseComponent { constructor(element) { diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index 09ed17e..6624fee 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -1,5 +1,5 @@ -import Button from '../../src/button' -import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture' +import Button from '../../src/button.js' +import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js' describe('Button', () => { let fixtureEl diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index d951bd5..c468b5c 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1,8 +1,8 @@ -import Carousel from '../../src/carousel' -import EventHandler from '../../src/dom/event-handler' -import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' -import { isRTL, noop } from '../../src/util/index' -import Swipe from '../../src/util/swipe' +import Carousel from '../../src/carousel.js' +import EventHandler from '../../src/dom/event-handler.js' +import { isRTL, noop } from '../../src/util/index.js' +import Swipe from '../../src/util/swipe.js' +import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js' describe('Carousel', () => { const { Simulator, PointerEvent } = window diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 9c86719..58c5367 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -1,6 +1,6 @@ -import Collapse from '../../src/collapse' -import EventHandler from '../../src/dom/event-handler' -import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture' +import Collapse from '../../src/collapse.js' +import EventHandler from '../../src/dom/event-handler.js' +import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js' describe('Collapse', () => { let fixtureEl @@ -277,25 +277,25 @@ describe('Collapse', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ '

', - '
', - ' ', + '
', + ' ', '
', - '
', + '
', '
', '
', '
', - '
', - ' ', + '
', + ' ', '
', - '
', + '
', '
content
', '
', '
', '
', - '
', - ' ', + '
', + ' ', '
', - '
', + '
', '
content
', '
', '
', @@ -338,12 +338,12 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '
', '
', - '

', + '

', ' ', '

', - '
', + '
', '
', '
-{{< /example >}} - -### With indicators - -You can also add the indicators to the carousel, alongside the controls, too. - -{{< example >}} - -{{< /example >}} - -### With captions - -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 >}} - -{{< /example >}} - -### Crossfade - -Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add `.bg-body` or some custom CSS to the `.carousel-item`s for proper crossfading. - -{{< example >}} - -{{< /example >}} - -### Individual `.carousel-item` interval - -Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item. - -{{< example >}} - -{{< /example >}} - -### Disable touch swiping - -Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute so it doesn't autoplay. - -{{< example >}} - -{{< /example >}} - -## Dark variant - -Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`. - -{{< example >}} - -{{< /example >}} - -## Custom transition - -The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`). - -## Sass - -### Variables - -Variables for all carousels: - -{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}} - -Variables for the [dark carousel](#dark-variant): - -{{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}} - -## Usage - -### Via data attributes - -Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`. - -The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.** - -### Via JavaScript - -Call carousel manually with: - -```js -const carousel = new bootstrap.Carousel('#myCarousel') -``` - -### Options - -{{< markdown >}} -{{< partial "js-data-attributes.md" >}} -{{< /markdown >}} - -{{< bs-table >}} -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. | -| `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` | 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 - -{{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} - -You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items: - -```js -const myCarouselElement = document.querySelector('#myCarousel') -const carousel = new bootstrap.Carousel(myCarouselElement, { - interval: 2000, - wrap: false -}) -``` - -{{< bs-table >}} -| Method | Description | -| --- | --- | -| `cycle` | Cycles through the carousel items from left to right. | -| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`. | -| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | -| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown**. | -| `pause` | Stops the carousel from cycling through items. | -| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | -| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | -{{< /bs-table >}} - -### Events - -Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties: - -- `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`). -- `relatedTarget`: The DOM element that is being slid into place as the active item. -- `from`: The index of the current item -- `to`: The index of the next item - -All carousel events are fired at the carousel itself (i.e. at the `
`). - -{{< bs-table >}} -| Event type | Description | -| --- | --- | -| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. | -| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. | -{{< /bs-table >}} - -```js -const myCarousel = document.getElementById('myCarousel') - -myCarousel.addEventListener('slide.bs.carousel', event => { - // do something... -}) -``` diff --git a/site/content/docs/5.2/components/close-button.md b/site/content/docs/5.2/components/close-button.md deleted file mode 100644 index f4a3ed0..0000000 --- a/site/content/docs/5.2/components/close-button.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: docs -title: Close button -description: A generic close button for dismissing content like modals and alerts. -group: components -toc: true ---- - -## Example - -Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`. - -{{< example >}} - -{{< /example >}} - -## Disabled state - -Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering. - -{{< example >}} - -{{< /example >}} - -## White variant - -Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`. - -{{< example class="bg-dark" >}} - - -{{< /example >}} - -## Sass - -### Variables - -{{< scss-docs name="close-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/components/collapse.md b/site/content/docs/5.2/components/collapse.md deleted file mode 100644 index 21be901..0000000 --- a/site/content/docs/5.2/components/collapse.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -layout: docs -title: Collapse -description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins. -group: components -toc: true ---- - -## How it works - -The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. - -{{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} - -## Example - -Click the buttons below to show and hide another element via class changes: - -- `.collapse` hides content -- `.collapsing` is applied during transitions -- `.collapse.show` shows content - -Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. - -{{< example >}} -

- - -

-
-
- Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. -
-
-{{< /example >}} - -## Horizontal - -The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). - -{{< callout info >}} -Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** -{{< /callout >}} - -{{< example >}} -

- -

-
-
-
- This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. -
-
-
-{{< /example >}} - -## Multiple targets - -A ` - -

-
-
-
-
- Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. -
-
-
-
-
-
- Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. -
-
-
-
-{{< /example >}} - -## Accessibility - -Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `` or `
`), the attribute `role="button"` should be added to the element. - -If your control element is targeting a single collapsible element – i.e. the `data-bs-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself. - -Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript. - -## Sass - -### Variables - -{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} - -### Classes - -Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion). - -{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}} - -## Usage - -The collapse plugin utilizes a few classes to handle the heavy lifting: - -- `.collapse` hides the content -- `.collapse.show` shows the content -- `.collapsing` is added when the transition starts, and removed when it finishes - -These classes can be found in `_transitions.scss`. - -### Via data attributes - -Just add `data-bs-toggle="collapse"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`. - -To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the [accordion page]({{< docsref "/components/accordion" >}}) for more information. - -### Via JavaScript - -Enable manually with: - -```js -const collapseElementList = document.querySelectorAll('.collapse') -const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl)) -``` - -### Options - -{{< markdown >}} -{{< partial "js-data-attributes.md" >}} -{{< /markdown >}} - -{{< bs-table "table" >}} -| Name | Type | Default | Description | -| --- | --- | --- | --- | -`parent` | selector, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. | -`toggle` | boolean | `true` | Toggles the collapsible element on invocation. | -{{< /bs-table >}} - -### Methods - -{{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} - -Activates your content as a collapsible element. Accepts an optional options `object`. - -You can create a collapse instance with the constructor, for example: - -```js -const bsCollapse = new bootstrap.Collapse('#myCollapse', { - toggle: false -}) -``` - -{{< bs-table >}} -| Method | Description | -| --- | --- | -| `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)`. | -| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). | -| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). | -| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). | -{{< /bs-table >}} - -### Events - -Bootstrap's collapse class exposes a few events for hooking into collapse functionality. - -{{< bs-table >}} -| Event type | Description | -| --- | --- | -| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. | -| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). | -| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. | -| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | -{{< /bs-table >}} - -```js -const myCollapsible = document.getElementById('myCollapsible') -myCollapsible.addEventListener('hidden.bs.collapse', event => { - // do something... -}) -``` diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md deleted file mode 100644 index b589227..0000000 --- a/site/content/docs/5.2/components/dropdowns.md +++ /dev/null @@ -1,1124 +0,0 @@ ---- -layout: docs -title: Dropdowns -description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. -group: components -toc: true ---- - -## Overview - -Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/). - -Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required. - -## Accessibility - -The [WAI ARIA](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/#menu), but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus. - -Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves. - -However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the ESC key. - -## Examples - -Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `` or ` - -
-{{< /example >}} - -And with `` elements: - -{{< example >}} -
- - - -
-{{< /example >}} - -The best part is you can do this with any button variant, too: - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -```html - -
- - -
-``` - -### Split button - -Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret. - -We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- -```html - -
- - - -
-``` - -## Sizing - -Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. - -
-
- - -
-
- - - -
-
- -```html - -
- -
    - ... -
-
-
- - -
    - ... -
-
-``` - -
-
- - -
-
- - - -
-
- -```html -
- -
    - ... -
-
-
- - -
    - ... -
-
-``` - -## Dark dropdowns - -Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items. - -{{< example >}} -
- - -
-{{< /example >}} - -And putting it to use in a navbar: - -{{< example >}} - -{{< /example >}} - -## Directions - -{{< callout info >}} -#### RTL -Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side. -{{< /callout >}} - -### Centered - -Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. - -{{< example >}} -
- - -
-{{< /example >}} - -### Dropup - -Trigger dropdown menus above elements by adding `.dropup` to the parent element. - -
-
- - -
-
- - - -
-
- -```html - -
- -
    - -
-
- - -
- - -
    - -
-
-``` - -### Dropup centered - -Make the dropup menu centered above the toggle with `.dropup-center` on the parent element. - -{{< example >}} -
- - -
-{{< /example >}} - -### Dropend - -Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element. - -
-
- - -
-
- - - -
-
- -```html - -
- -
    - -
-
- - -
- - -
    - -
-
-``` - -### Dropstart - -Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element. - -
-
- - -
-
- - - -
-
- -```html - -
- -
    - -
-
- - -
- -
    - -
- -
-``` - -## Menu items - -You can use `` or ` -
    -
    • -
    • -
    • -
-
-{{< /example >}} - -You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities. - -{{< example >}} - -{{< /example >}} - -### Active - -Add `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set. - -{{< example >}} - -{{< /example >}} - -### Disabled - -Add `.disabled` to items in the dropdown to **style them as disabled**. - -{{< example >}} - -{{< /example >}} - -## Menu alignment - -By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes. - -Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side. - -{{< callout info >}} -**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar. -{{< /callout >}} - -{{< example >}} -
- -
    -
    • -
    • -
    • -
-
-{{< /example >}} - -### Responsive alignment - -If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes. - -To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`. - -{{< example >}} -
- -
    -
    • -
    • -
    • -
-
-{{< /example >}} - -To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`. - -{{< example >}} -
- -
    -
    • -
    • -
    • -
-
-{{< /example >}} - -Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars. - -### Alignment options - -Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place. - -{{< example >}} -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-{{< /example >}} - -## Menu content - -### Headers - -Add a header to label sections of actions in any dropdown menu. - -{{< example >}} - -{{< /example >}} - -### Dividers - -Separate groups of related menu items with a divider. - -{{< example >}} - -{{< /example >}} - -### Text - -Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width. - -{{< example >}} -
-

- Some example text that's free-flowing within the dropdown menu. -

-

- And this is more example text. -

-
-{{< /example >}} - -### Forms - -Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require. - -{{< example >}} -
-
-
- - -
-
- - -
-
-
- - -
-
- -
-
- New around here? Sign up - Forgot password? -
-{{< /example >}} - -{{< example >}} -
- -
-
- - -
-
- - -
-
-
- - -
-
- -
-
-{{< /example >}} - -## Dropdown options - -Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. - -{{< example >}} -
-
- - -
-
- - - -
-
-{{< /example >}} - -### Auto close behavior - -By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. - -{{< example >}} -
- - -
- -
- - -
- -
- - -
- -
- - -
-{{< /example >}} - -## CSS - -### Variables - -{{< added-in "5.2.0" >}} - -As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}} - -Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}} - -### Sass variables - -Variables for all dropdowns: - -{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}} - -Variables for the [dark dropdown](#dark-dropdowns): - -{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}} - -Variables for the CSS-based carets that indicate a dropdown's interactivity: - -{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} - -### Mixins - -Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. - -{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}} - -## Usage - -Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. - -{{< callout info >}} -On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{{< /callout >}} - -### Via data attributes - -Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. - -```html -
- -
    - ... -
-
-``` - -### Via JavaScript - -Call the dropdowns via JavaScript: - -```js -const dropdownElementList = document.querySelectorAll('.dropdown-toggle') -const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) -``` - -{{< callout info >}} -##### `data-bs-toggle="dropdown"` still required - -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} - -### Options - -{{< markdown >}} -{{< partial "js-data-attributes.md" >}} -{{< /markdown >}} - -{{< bs-table "table" >}} -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
  • `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
  • `false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing esc key)
  • `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
  • `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
Note: the dropdown can always be closed with the ESC key. | -| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | -| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. | -| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). | -| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. | -| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). | -{{< /bs-table >}} - -#### Using function with `popperConfig` - -```js -const dropdown = new bootstrap.Dropdown(element, { - popperConfig(defaultBsPopperConfig) { - // const newPopperConfig = {...} - // use defaultBsPopperConfig if needed... - // return newPopperConfig - } -}) -``` - -### Methods - -{{< bs-table >}} -| Method | Description | -| --- | --- | -| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. | -| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | -| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | -| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | -| `update` | Updates the position of an element's dropdown. | -{{< /bs-table >}} - -### Events - -All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. - -{{< bs-table >}} -| Event type | Description | -| --- | --- | -| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. | -| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. | -| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. | -| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. | -{{< /bs-table >}} - -```js -const myDropdown = document.getElementById('myDropdown') -myDropdown.addEventListener('show.bs.dropdown', event => { - // do something... -}) -``` diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md deleted file mode 100644 index 7804c74..0000000 --- a/site/content/docs/5.2/components/list-group.md +++ /dev/null @@ -1,494 +0,0 @@ ---- -layout: docs -title: List group -description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. -group: components -toc: true ---- - -## Basic example - -The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. - -{{< example >}} -
    -
  • An item
    • -
  • A second item
    • -
  • A third item
    • -
  • A fourth item
    • -
  • And a fifth one
    • -
-{{< /example >}} - -## Active items - -Add `.active` to a `.list-group-item` to indicate the current active selection. - -{{< example >}} -
    -
  • An active item
    • -
  • A second item
    • -
  • A third item
    • -
  • A fourth item
    • -
  • And a fifth one
    • -
-{{< /example >}} - -## Disabled items - -Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links). - -{{< example >}} -
    -
  • A disabled item
    • -
  • A second item
    • -
  • A third item
    • -
  • A fourth item
    • -
  • And a fifth one
    • -
-{{< /example >}} - -## Links and buttons - -Use ``s or ` - - - - -
-{{< /example >}} - -## Flush - -Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). - -{{< example >}} -
    -
  • An item
    • -
  • A second item
    • -
  • A third item
    • -
  • A fourth item
    • -
  • And a fifth one
    • -
-{{< /example >}} - -## Numbered - -Add the `.list-group-numbered` modifier class (and optionally use an `
    ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
      `s default browser styling) for better placement inside list group items and to allow for better customization. - -Numbers are generated by `counter-reset` on the `
        `, and then styled and placed with a `::before` pseudo-element on the `
      1. ` with `counter-increment` and `content`. - -{{< example >}} -
          -
        1. A list item
          2. -
        2. A list item
          3. -
        3. A list item
          4. -
        -{{< /example >}} - -These work great with custom content as well. - -{{< example >}} -
          -
        1. -
          -
          Subheading
          - Content for list item -
          - 14 -
          2. -
        2. -
          -
          Subheading
          - Content for list item -
          - 14 -
          3. -
        3. -
          -
          Subheading
          - Content for list item -
          - 14 -
          4. -
        -{{< /example >}} - -## Horizontal - -Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** - -**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. - -{{< example >}} -{{< list-group.inline >}} -{{- range $.Site.Data.breakpoints }} -
          -
        • An item
          • -
        • A second item
          • -
        • A third item
          • -
        -{{- end -}} -{{< /list-group.inline >}} -{{< /example >}} - -## Contextual classes - -Use contextual classes to style list items with a stateful background and color. - -{{< example >}} -
          -
        • A simple default list group item
          • -{{< list.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -
        • A simple {{ .name }} list group item
          • -{{- end -}} -{{< /list.inline >}} -
        -{{< /example >}} - -Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. - -{{< example >}} -
        - A simple default list group item -{{< list.inline >}} -{{- range (index $.Site.Data "theme-colors") }} - A simple {{ .name }} list group item -{{- end -}} -{{< /list.inline >}} -
        -{{< /example >}} - -{{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} - -## With badges - -Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}). - -{{< example >}} -
          -
        • - A list item - 14 -
          • -
        • - A second list item - 2 -
          • -
        • - A third list item - 1 -
          • -
        -{{< /example >}} - -## Custom content - -Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}). - -{{< example >}} -
        - -
        -
        List group item heading
        - 3 days ago -
        -

        Some placeholder content in a paragraph.

        - And some small print. -         - -
        -
        List group item heading
        - 3 days ago -
        -

        Some placeholder content in a paragraph.

        - And some muted small print. -         - -
        -
        List group item heading
        - 3 days ago -
        -

        Some placeholder content in a paragraph.

        - And some muted small print. -         -
        -{{< /example >}} - -## Checkboxes and radios - -Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `
-{{< /example >}} - -To set a custom height on your ` - -
-{{< /example >}} - -## Selects - -Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike ``s, they'll always show the `
-{{< /example >}} - -## Sizing - -Set heights using classes like `.form-control-lg` and `.form-control-sm`. - -{{< example >}} - - - -{{< /example >}} - -## Disabled - -Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. - -{{< example >}} - - -{{< /example >}} - -## Readonly - -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot. - -{{< example >}} - -{{< /example >}} - -## Readonly plain text - -If you want to have `` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`. - -{{< example >}} -
- -
- -
-
-
- -
- -
-
-{{< /example >}} - -{{< example >}} -
-
- - -
-
- - -
-
- -
-
-{{< /example >}} - -## File input - -{{< example >}} -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-{{< /example >}} - -## Color - -Set the `type="color"` and add `.form-control-color` to the ``. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers. - -{{< example >}} - - -{{< /example >}} - -## Datalists - -Datalists allow you to create a group of `
- - - -
- -
- - - -
- -
- - - - - -
-{{< /example >}} - -## Segmented buttons - -{{< example >}} -
- - - - -
- -
- - - - -
-{{< /example >}} - -## Custom forms - -Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. - -### Custom select - -{{< example >}} -
- - -
- -
- - -
- -
- - -
- -
- - -
-{{< /example >}} - -### Custom file input - -{{< example >}} -
- - -
- -
- - -
- -
- - -
- -
- - -
-{{< /example >}} - -## Sass - -### Variables - -{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/layout.md b/site/content/docs/5.2/forms/layout.md deleted file mode 100644 index 3b27e3f..0000000 --- a/site/content/docs/5.2/forms/layout.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -layout: docs -title: Layout -description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options. -group: forms -toc: true ---- - -## Forms - -Every group of form fields should reside in a `
` element. Bootstrap provides no default styling for the `` element, but there are some powerful browser features that are provided by default. - -- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes. -- ` -
- -{{< /example >}} - -## Horizontal form - -Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `
-
- - -
-
-
- - -
-
- - - -{{< /example >}} - -## Accessibility - -Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a `
- -
- - -
Example invalid feedback text
-
- -
- - -
-
- - -
More example invalid feedback text
-
- -
- -
Example invalid select feedback
-
- -
- -
Example invalid form file feedback
-
- -
- -
- -{{< /example >}} - -## Tooltips - -If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup. - -{{< example >}} -
-
- - -
- Looks good! -
-
-
- - -
- Looks good! -
-
-
- -
- @ - -
- Please choose a unique and valid username. -
-
-
-
- - -
- Please provide a valid city. -
-
-
- - -
- Please select a valid state. -
-
-
- - -
- Please provide a valid zip. -
-
-
- -
-
-{{< /example >}} - -## Sass - -### Variables - -{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} - -### Mixins - -Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. - -{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} - -### Map - -This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. - -{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}} - -Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. - -### Loop - -Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. - -{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}} - -### Customizing - -Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback. diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.2/getting-started/accessibility.md deleted file mode 100644 index e9f1cb3..0000000 --- a/site/content/docs/5.2/getting-started/accessibility.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -layout: docs -title: Accessibility -description: A brief overview of Bootstrap's features and limitations for the creation of accessible content. -group: getting-started -toc: true ---- - -Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box. - -## Overview and limitations - -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. - -### Structural markup - -Bootstrap's styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed. - -### Interactive components - -Bootstrap's interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). - -Because Bootstrap's components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. - -### Color contrast - -Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. - -### Visually hidden content - -Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. - -```html -

- - This action is not reversible -

-``` - -For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** - -```html -Skip to main content -``` - -### Reduced motion - -Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. - -On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), Bootstrap enables smooth scrolling using the `scroll-behavior` property. - -## Additional resources - -- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/) -- [The A11Y Project](https://www.a11yproject.com/) -- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) -- [Tenon.io Accessibility Checker](https://tenon.io/) -- [Color Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/) -- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) -- [Microsoft Accessibility Insights](https://accessibilityinsights.io/) -- [Deque Axe testing tools](https://www.deque.com/axe/) -- [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) diff --git a/site/content/docs/5.2/getting-started/best-practices.md b/site/content/docs/5.2/getting-started/best-practices.md deleted file mode 100644 index 449d02a..0000000 --- a/site/content/docs/5.2/getting-started/best-practices.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: docs -title: Best practices -description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap. -group: getting-started ---- - -We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves. - -{{< callout info >}} -**Heads up!** This copy is a work in progress. -{{< /callout >}} - -### General outline - -- Working with CSS -- Working with Sass files -- Building new CSS components -- Working with flexbox -- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) diff --git a/site/content/docs/5.2/getting-started/browsers-devices.md b/site/content/docs/5.2/getting-started/browsers-devices.md deleted file mode 100644 index dc550ec..0000000 --- a/site/content/docs/5.2/getting-started/browsers-devices.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -layout: docs -title: Browsers and devices -description: Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each. -group: getting-started -toc: true ---- - -## Supported browsers - -Bootstrap supports the **latest, stable releases** of all major browsers and platforms. - -Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below. - -You can find our supported range of browsers and their versions [in our `.browserslistrc file`]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc): - -```text -{{< rf.inline >}} -{{- readFile ".browserslistrc" | chomp | htmlEscape -}} -{{< /rf.inline >}} -``` - -We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects. - -### Mobile devices - -Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. - -{{< bs-table "table" >}} -| | Chrome | Firefox | Safari | Android Browser & WebView | -| --- | --- | --- | --- | --- | -| **Android** | Supported | Supported | — | v6.0+ | -| **iOS** | Supported | Supported | Supported | — | -{{< /bs-table >}} - -### Desktop browsers - -Similarly, the latest versions of most desktop browsers are supported. - -{{< bs-table "table" >}} -| | Chrome | Firefox | Microsoft Edge | Opera | Safari | -| --- | --- | --- | --- | --- | --- | -| **Mac** | Supported | Supported | Supported | Supported | Supported | -| **Windows** | Supported | Supported | Supported | Supported | — | -{{< /bs-table >}} - -For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox. - -Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, and Firefox for Linux, though they are not officially supported. - -## Internet Explorer - -Internet Explorer is not supported. **If you require Internet Explorer support, please use Bootstrap v4.** - -## Modals and dropdowns on mobile - -### Overflow and scrolling - -Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852). - -### iOS text fields and scrolling - -As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual `` or a ` +
+ +
+
+ + +
+
+
+
+{{< /example >}} + +{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}} + +### Toggle between modals + +Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. + +{{< example >}} + + + +{{< /example >}} + +### Change animation + +The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. + +If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`. + +### Remove animation + +For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. + +```html + +``` + +### Dynamic heights + +If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears. + +### Accessibility + +Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript. + +### Embedding YouTube videos + +Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information. + +## Optional sizes + +Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. + +{{< bs-table "table" >}} +| Size | Class | Modal max-width +| --- | --- | --- | +| Small | `.modal-sm` | `300px` | +| Default | None | `500px` | +| Large | `.modal-lg` | `800px` | +| Extra large | `.modal-xl` | `1140px` | +{{< /bs-table >}} + +Our default modal without modifier class constitutes the "medium" size modal. + +
+ + + +
+ +```html +
...
+
...
+
...
+``` + + + + + + + +## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + +{{< bs-table >}} +| Class | Availability | +| --- | --- | +| `.modal-fullscreen` | Always | +| `.modal-fullscreen-sm-down` | `576px` | +| `.modal-fullscreen-md-down` | `768px` | +| `.modal-fullscreen-lg-down` | `992px` | +| `.modal-fullscreen-xl-down` | `1200px` | +| `.modal-fullscreen-xxl-down` | `1400px` | +{{< /bs-table >}} + +
+ + + + + + +
+ +```html + +
+ ... +
+``` + + + + + + + + + + + + + +## CSS + +### Variables + +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}} + +{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}} + +### Sass variables + +{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} + +### Sass loops + +[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. + +{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}} + +## Usage + +The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. + +### Via data attributes + +#### Toggle + +Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle. + +```html + +``` + +#### Dismiss + +{{% js-dismiss "modal" %}} + +{{< callout warning >}} +While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk. +{{< /callout >}} + +### Via JavaScript + +Create a modal with a single line of JavaScript: + +```js +const myModal = new bootstrap.Modal(document.getElementById('myModal'), options) +// or +const myModalAlternative = new bootstrap.Modal('#myModal', options) +``` + +### Options + +{{< markdown >}} +{{< partial "js-data-attributes.md" >}} +{{< /markdown >}} + +{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. | +| `focus` | boolean | `true` | Puts the focus on the modal when initialized. | +| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | +{{< /bs-table >}} + +### Methods + +{{< callout danger >}} +{{< partial "callouts/danger-async-methods.md" >}} +{{< /callout >}} + +#### Passing options + +Activates your content as a modal. Accepts an optional options `object`. + +```js +const myModal = new bootstrap.Modal('#myModal', { + keyboard: false +}) +``` + +{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | +| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. | +| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `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). | +| `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). | +| `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)`. | +| `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). | +{{< /bs-table >}} + +### Events + +Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). + +{{< bs-table >}} +| Event | Description | +| --- | --- | +| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. | +| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | +| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. | +| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +{{< /bs-table >}} + +```js +const myModalEl = document.getElementById('myModal') +myModalEl.addEventListener('hidden.bs.modal', event => { + // do something... +}) +``` diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md new file mode 100644 index 0000000..9b9f86a --- /dev/null +++ b/site/content/docs/5.3/components/navbar.md @@ -0,0 +1,817 @@ +--- +layout: docs +title: Navbar +description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. +group: components +toc: true +--- + +## How it works + +Here's what you need to know before getting started with the navbar: + +- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes. +- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways. +- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars. +- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. +- Ensure accessibility by using a `
+ +```html +
+ + + + ... + + + + + ... + + + ... + + + + + + + + +
......This cell is aligned to the top....
+
+``` + +## Nesting + +Border styles, active styles, and table variants are not inherited by nested tables. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
+
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + + + + ... + +
+ + ... +
+
+``` + +## How nesting works + +To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables. + +Note that if you add ``s as direct children of a table, those `` will be wrapped in a `` by default, thus making our selectors work as intended. + +## Anatomy + +### Table head + +Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + +
+``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+ +```html + + + ... + + + ... + +
+``` + +### Table foot + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
FooterFooterFooterFooter
+
+ +```html + + + ... + + + ... + + + ... + +
+``` + +### Captions + +A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. + +
+ + + {{< partial "table-content" >}} +
List of users
+
+ +```html + + + + ... + + + ... + +
List of users
+``` + +You can also put the `` on the top of the table with `.caption-top`. + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+{{< /example >}} + +## Responsive tables + +Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. + +{{< callout warning >}} +##### Vertical clipping/truncation + +Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. +{{< /callout >}} + +### Always responsive + +Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
+
+
+ +```html +
+ + ... +
+
+``` + +### Breakpoint specific + +Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. + +**These tables may appear broken until their responsive styles apply at specific viewport widths.** + +{{< tables.inline >}} +{{ range $.Site.Data.breakpoints }} +{{ if not (eq . "xs") }} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
+
+
+{{ end -}} +{{- end -}} +{{< /tables.inline >}} + +{{< highlight html >}} +{{< tables.inline >}} +{{- range $.Site.Data.breakpoints -}} +{{- if not (eq . "xs") }} +
+ + ... +
+
+{{ end -}} +{{- end -}} +{{< /tables.inline >}} +{{< /highlight >}} + +## CSS + +### Sass variables + +{{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Sass loops + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable. diff --git a/site/content/docs/5.3/content/typography.md b/site/content/docs/5.3/content/typography.md new file mode 100644 index 0000000..ca0f4e9 --- /dev/null +++ b/site/content/docs/5.3/content/typography.md @@ -0,0 +1,286 @@ +--- +layout: docs +title: Typography +description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. +group: content +toc: true +--- + +## Global settings + +Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}). + +- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device. +- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. +- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. +- Set the global link color via `$link-color`. +- Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). + +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. + +## Headings + +All HTML headings, `

` through `

`, are available. + +{{< bs-table >}} +| Heading | Example | +| --- | --- | +| `

` | h1. Bootstrap heading | +| `

` | h2. Bootstrap heading | +| `

` | h3. Bootstrap heading | +| `

` | h4. Bootstrap heading | +| `
` | h5. Bootstrap heading | +| `
` | h6. Bootstrap heading | +{{< /bs-table >}} + +```html +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+``` + +`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. + +{{< example >}} +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+

h5. Bootstrap heading

+

h6. Bootstrap heading

+{{< /example >}} + +### Customizing headings + +Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. + +{{< example >}} +

+ Fancy display heading + With faded secondary text +

+{{< /example >}} + +## Display headings + +Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. + +
+
Display 1
+
Display 2
+
Display 3
+
Display 4
+
Display 5
+
Display 6
+
+ +```html +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+``` + +Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. + +Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`. + +{{< scss-docs name="display-headings" file="scss/_variables.scss" >}} + +## Lead + +Make a paragraph stand out by adding `.lead`. + +{{< example >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+{{< /example >}} + +## Inline text elements + +Styling for common inline HTML5 elements. + +{{< example >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+{{< /example >}} + +Beware that those tags should be used for semantic purpose: + +- `` represents text which is marked or highlighted for reference or notation purposes. +- `` represents side-comments and small print, like copyright and legal text. +- `` represents element that are no longer relevant or no longer accurate. +- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. + +If you want to style your text, you should use the following classes instead: + +- `.mark` will apply the same styles as ``. +- `.small` will apply the same styles as ``. +- `.text-decoration-underline` will apply the same styles as ``. +- `.text-decoration-line-through` will apply the same styles as ``. + +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc. + +## Text utilities + +Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}). + +## Abbreviations + +Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. + +Add `.initialism` to an abbreviation for a slightly smaller font-size. + +{{< example >}} +

attr

+

HTML

+{{< /example >}} + +## Blockquotes + +For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. + +{{< example >}} +
+

A well-known quote, contained in a blockquote element.

+
+{{< /example >}} + +### Naming a source + +The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `

`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. + +{{< example >}} +

+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+{{< /example >}} + +### Alignment + +Use text utilities as needed to change the alignment of your blockquote. + +{{< example >}} +
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+{{< /example >}} + +{{< example >}} +
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+{{< /example >}} + +## Lists + +### Unstyled + +Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well. + +{{< example >}} +
    +
  • This is a list.
    • +
  • It appears completely unstyled.
    • +
  • Structurally, it's still a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+{{< /example >}} + +### Inline + +Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. + +{{< example >}} +
    +
  • This is a list item.
    • +
  • And another one.
    • +
  • But they're displayed inline.
    • +
+{{< /example >}} + +### Description list alignment + +Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis. + +{{< example >}} +
+
Description lists
+
A description list is perfect for defining terms.
+ +
Term
+
+

Definition for the term.

+

And some more placeholder definition text.

+
+ +
Another term
+
This definition is short, so no extra paragraphs or anything.
+ +
Truncated term is truncated
+
This can be useful when space is tight. Adds an ellipsis at the end.
+ +
Nesting
+
+
+
Nested definition list
+
I heard you like definition lists. Let me put a definition list inside your definition list.
+
+
+
+{{< /example >}} + +## Responsive font sizes + +In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. + +## CSS + +### Sass variables + +Headings have some dedicated variables for sizing and spacing. + +{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}} + +Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables. + +{{< scss-docs name="type-variables" file="scss/_variables.scss" >}} + +### Sass mixins + +There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md new file mode 100644 index 0000000..945d5ec --- /dev/null +++ b/site/content/docs/5.3/customize/color-modes.md @@ -0,0 +1,258 @@ +--- +layout: docs +title: Color modes +description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template. +group: customize +toc: true +added: "5.3" +--- + +{{< callout >}} +**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html). +{{< /callout >}} + +## Dark mode + +**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-bs-theme` attribute. + +Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below. + +## Example + +For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value. + +{{< example class="d-flex justify-content-between" >}} +
+ + +
+ +
+ + +
+{{< /example >}} + +## How it works + +- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `` element, or to any other element or Bootstrap component. If applied to the `` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element. + +- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin: + + ```scss + // Color mode variables in _root.scss + @include color-mode(dark) { + // CSS variable overrides here... + } + ``` + +- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more. + +## Usage + +### Enable dark mode + +Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}): + +```html + + + + + + Bootstrap demo + }}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> + + +

Hello, world!

+ + + +``` + +Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript) + +### Building with Sass + +Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`. + +We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark. + +In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output. + +```scss +$color-mode-type: data; + +@include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } +} +``` + +Outputs to: + +```css +[data-bs-theme=dark] .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); +} +``` + +And when setting to `media-query`: + +```scss +$color-mode-type: media-query; + +@include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } +} +``` + +Outputs to: + +```css +@media (prefers-color-scheme: dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } +} +``` + +## Custom color modes + +While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you. + +For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides. + +{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}} + +
+
Example blue theme
+

Some paragraph text to show how the blue theme might look with written copy.

+ +
+ +
+ + +
+
+ +```html +
+ ... +
+``` + +## JavaScript + +To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, ``. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode. + +Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control. + +{{< example lang="js" show_preview="false" >}} +{{< js.inline >}} +{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}} +{{< /js.inline >}} +{{< /example >}} + +## Adding theme colors + +Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme. + +This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication. + +```scss +// Required +@import "functions"; +@import "variables"; +@import "variables-dark"; + +// Add a custom color to $theme-colors +$custom-colors: ( + "custom-color": #712cf9 +); +$theme-colors: map-merge($theme-colors, $custom-colors); + +@import "maps"; +@import "mixins"; +@import "utilities"; + +// Add a custom color to new theme maps + +// Light mode +$custom-colors-text: ("custom-color": #712cf9); +$custom-colors-bg-subtle: ("custom-color": #e1d2fe); +$custom-colors-border-subtle: ("custom-color": #bfa1fc); + +$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text); +$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle); +$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle); + +// Dark mode +$custom-colors-text-dark: ("custom-color": #e1d2f2); +$custom-colors-bg-subtle-dark: ("custom-color": #8951fa); +$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2); + +$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark); +$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark); +$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark); + +// Remainder of Bootstrap imports +@import "root"; +@import "reboot"; +// etc +``` + +## CSS + +### Variables + +Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes. + +{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}} + +### Sass variables + +CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components. + +{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}} + +### Sass mixins + +Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details. + +{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}} diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md new file mode 100644 index 0000000..6a3c323 --- /dev/null +++ b/site/content/docs/5.3/customize/color.md @@ -0,0 +1,510 @@ +--- +layout: docs +title: Color +description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project. +group: customize +toc: true +--- + +## Colors + +{{< added-in "5.3.0" >}} + +Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. + +Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`. + +{{< callout warning>}} +**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6. +{{< /callout >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionSwatchVariables
+ {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-body-color`
`--bs-body-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-body-bg`
`--bs-body-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-secondary-color`
`--bs-secondary-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-secondary-bg`
`--bs-secondary-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-tertiary-color`
`--bs-tertiary-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-tertiary-bg`
`--bs-tertiary-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-emphasis-color`
`--bs-emphasis-color-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-border-color`
`--bs-border-color-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-primary`
`--bs-primary-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-success`
`--bs-success-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-danger`
`--bs-danger-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-warning`
`--bs-warning-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-info`
`--bs-info-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-light`
`--bs-light-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-dark`
`--bs-dark-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} +
+ +### Using the new colors + +These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default. + +{{< example >}} +
+ Example element with utilities +
+{{< /example >}} + +### Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file. + +
+ {{< theme-colors.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+
{{ .name | title }}
+
+ {{ end -}} + {{< /theme-colors.inline >}} +
+ +All these colors are available as a Sass map, `$theme-colors`. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. + +### All colors + +All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors). + +Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black. + +
+ {{< theme-colors.inline >}} + {{- range $color := $.Site.Data.colors }} + {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }} +
+
+ ${{ $color.name }} + {{ $color.hex }} +
+ {{ range (seq 100 100 900) }} +
${{ $color.name }}-{{ . }}
+ {{ end }} +
+ {{ end -}} + {{ end -}} + +
+
+ $gray-500 + #adb5bd +
+ {{- range $.Site.Data.grays }} +
$gray-{{ .name }}
+ {{ end -}} +
+ {{< /theme-colors.inline >}} + +
+
+ $black + #000 +
+
+ $white + #fff +
+
+
+ +### Notes on Sass + +Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function. + +Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB). + +Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code. + +## Color Sass maps + +Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values. + +- `$colors` lists all our available base (`500`) colors +- `$theme-colors` lists all semantically named theme colors (shown below) +- `$grays` lists all tints and shades of gray + +Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: + +{{< scss-docs name="colors-map" file="scss/_variables.scss" >}} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. + +### Example + +Here's how you can use these in your Sass: + +```scss +.alpha { color: $purple; } +.beta { + color: $yellow-300; + background-color: $indigo-900; +} +``` + +[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values. + +## Generating utilities + +{{< added-in "5.1.0" >}} + +Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0. + +1. To start, make sure you've imported our functions, variables, mixins, and utilities. +2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map. +3. Merge this new combined map to extend any utility with a `{color}-{level}` class name. + +Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps. + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; + +$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans); + +$utilities: map-merge( + $utilities, + ( + "color": map-merge( + map-get($utilities, "color"), + ( + values: map-merge( + map-get(map-get($utilities, "color"), "values"), + ( + $all-colors + ), + ), + ), + ), + ) +); + +@import "bootstrap/scss/utilities/api"; +``` + +This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well. diff --git a/site/content/docs/5.3/customize/components.md b/site/content/docs/5.3/customize/components.md new file mode 100644 index 0000000..262c8d8 --- /dev/null +++ b/site/content/docs/5.3/customize/components.md @@ -0,0 +1,77 @@ +--- +layout: docs +title: Components +description: Learn how and why we build nearly all our components responsively and with base and modifier classes. +group: customize +toc: true +--- + +## Base classes + +Bootstrap's components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like `.btn`, and then group individual styles for each variant into modifier classes, like `.btn-primary` or `.btn-success`. + +To build our modifier classes, we use Sass's `@each` loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops. + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to customize these loops and extend Bootstrap's base-modifier approach to your own code. + +## Modifiers + +Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. + +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components. + +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} + +{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} + +## Responsive + +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. + +{{< scss-docs name="responsive-breakpoints" file="scss/_dropdown.scss" >}} + +Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. + +{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} + +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + +## Creating your own + +We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We've extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes. + +
+
+ This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes. +
+
+ +```html +
...
+``` + +In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class. + +```scss +// Base class +.callout {} + +// Modifier classes +.callout-info {} +.callout-warning {} +.callout-danger {} +``` + +For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family: + +{{< callout info >}} +**This is an info callout.** Example text to show it in action. +{{< /callout >}} + +{{< callout warning >}} +**This is a warning callout.** Example text to show it in action. +{{< /callout >}} + +{{< callout danger >}} +**This is a danger callout.** Example text to show it in action. +{{< /callout >}} diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md new file mode 100644 index 0000000..ffb40c0 --- /dev/null +++ b/site/content/docs/5.3/customize/css-variables.md @@ -0,0 +1,93 @@ +--- +layout: docs +title: CSS variables +description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development. +group: customize +toc: true +--- + +Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping. + +**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS. + +## Root variables + +Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files. + +### Default + +These CSS variables are available everywhere, regardless of color mode. + +```css +{{< root.inline >}} +{{- $css := readFile "dist/css/bootstrap.css" -}} +{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} + +{{- if (eq (len $match) 0) -}} +{{- errorf "Got no matches for :root in %q!" $.Page.Path -}} +{{- end -}} + +{{- index $match 0 -}} + +{{< /root.inline >}} +``` + +### Dark mode + +These variables are scoped to our built-in dark mode. + +```css +{{< root.inline >}} +{{- $css := readFile "dist/css/bootstrap.css" -}} +{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}} +{{- if (eq (len $match) 0) -}} +{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}} +{{- end -}} +{{- index $match 0 -}} +{{< /root.inline >}} +``` + +## Component variables + +Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. + +Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future. + +Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. + +## Prefix + +Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. + +Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash). + +## Examples + +CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. + +```css +body { + font: 1rem/1.5 var(--bs-font-sans-serif); +} +a { + color: var(--bs-blue); +} +``` + +## Focus variables + +{{< added-in "5.3.0" >}} + +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles. + +In our Sass, we set default values that can be customized before compiling. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`). + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + +## Grid breakpoints + +While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. diff --git a/site/content/docs/5.3/customize/optimize.md b/site/content/docs/5.3/customize/optimize.md new file mode 100644 index 0000000..2622f88 --- /dev/null +++ b/site/content/docs/5.3/customize/optimize.md @@ -0,0 +1,92 @@ +--- +layout: docs +title: Optimize +description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs. +group: customize +toc: true +--- + +## Lean Sass imports + +When using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`. + +{{< scss-docs name="import-stack" file="scss/bootstrap.scss" >}} + + +If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file. + +## Lean JavaScript + +Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript. + +For instance, assuming you're using your own JavaScript bundler like Webpack, Parcel, or Vite, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript: + + +```js +// Import just what we need + +// import 'bootstrap/js/dist/alert'; +// import 'bootstrap/js/dist/button'; +// import 'bootstrap/js/dist/carousel'; +// import 'bootstrap/js/dist/collapse'; +// import 'bootstrap/js/dist/dropdown'; +import 'bootstrap/js/dist/modal'; +// import 'bootstrap/js/dist/offcanvas'; +// import 'bootstrap/js/dist/popover'; +// import 'bootstrap/js/dist/scrollspy'; +// import 'bootstrap/js/dist/tab'; +// import 'bootstrap/js/dist/toast'; +// import 'bootstrap/js/dist/tooltip'; +``` + +This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file. + +{{< callout info >}} +**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following: + + +```js +import Modal from 'bootstrap/js/dist/modal' +const modal = new Modal(document.getElementById('myModal')) +``` +{{< /callout >}} + +## Autoprefixer .browserslistrc + +Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version. + +## Unused CSS + +_Help wanted with this section, please consider opening a PR. Thanks!_ + +While we don't have a prebuilt example for using [PurgeCSS](https://github.com/FullHuman/purgecss) with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options: + +- +- + +Lastly, this [CSS Tricks article on unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) shows how to use PurgeCSS and other similar tools. + +## Minify and gzip + +Whenever possible, be sure to compress all the code you serve to your visitors. If you're using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you're building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS. + +## Non-blocking files + +While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough. + +If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. + +You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes. + +This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles. + +If you want to learn more about this, there are already a lot of great articles about it: + +- +- + +## Always use HTTPS + +Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and [there is no such thing as non-sensitive web traffic](https://https.cio.gov/everything/). The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs. + +Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you'll be sending users [mixed active content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content), leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you're getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections. diff --git a/site/content/docs/5.3/customize/options.md b/site/content/docs/5.3/customize/options.md new file mode 100644 index 0000000..b5c4fc3 --- /dev/null +++ b/site/content/docs/5.3/customize/options.md @@ -0,0 +1,32 @@ +--- +layout: docs +title: Options +description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior. +group: customize +--- + +Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. + +You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file. + +{{< bs-table "table table-options" >}} +| Variable | Values | Description | +| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). | +| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. | +| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | +| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | +| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) | +| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | +| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | +| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | +| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | +| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | +| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | +| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | +| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) | +{{< /bs-table >}} diff --git a/site/content/docs/5.3/customize/overview.md b/site/content/docs/5.3/customize/overview.md new file mode 100644 index 0000000..ed890ac --- /dev/null +++ b/site/content/docs/5.3/customize/overview.md @@ -0,0 +1,53 @@ +--- +layout: docs +title: Customize +description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more. +group: customize +toc: false +aliases: "/docs/5.3/customize/" +sections: + - title: Sass + description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions. + - title: Options + description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences. + - title: Color + description: Learn about and customize the color systems that support the entire toolkit. + - title: Color modes + description: Explore our default light mode and the new dark mode, or create custom color modes yourself. + - title: Components + description: Learn how we build nearly all our components responsively and with base and modifier classes. + - title: CSS variables + description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development. + - title: Optimize + description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience. +--- + +## Overview + +There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you're using, browser support, and more. + +Our two preferred methods are: + +1. Using Bootstrap [via package manager]({{< docsref "/getting-started/download#package-managers" >}}) so you can use and extend our source files. +2. Using Bootstrap's compiled distribution files or [jsDelivr]({{< docsref "/getting-started/download#cdn-via-jsdelivr" >}}) so you can add onto or override Bootstrap's styles. + +While we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]({{< docsref "/customize/sass" >}}). + +For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use. + +As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap. + +## CSPs and embedded SVGs + +Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict CSP configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options. + +- [Accordion]({{< docsref "/components/accordion" >}}) +- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}}) +- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals) +- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}}) +- [Form switches]({{< docsref "/forms/checks-radios#switches" >}}) +- [Form validation icons]({{< docsref "/forms/validation#server-side" >}}) +- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) +- [Select menus]({{< docsref "/forms/select" >}}) + +Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md new file mode 100644 index 0000000..6da6bbe --- /dev/null +++ b/site/content/docs/5.3/customize/sass.md @@ -0,0 +1,314 @@ +--- +layout: docs +title: Sass +description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. +group: customize +toc: true +--- + +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. + +## File structure + +Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: + +```text +your-project/ +├── scss +│ └── custom.scss +└── node_modules/ + └── bootstrap + ├── js + └── scss +``` + +If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own. + +```text +your-project/ +├── scss +│ └── custom.scss +└── bootstrap/ + ├── js + └── scss +``` + +## Importing + +In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. + +```scss +// Custom.scss +// Option A: Include all of Bootstrap + +// Include any default variable overrides here (though functions won't be available) + +@import "../node_modules/bootstrap/scss/bootstrap"; + +// Then add additional custom code here +``` + +```scss +// Custom.scss +// Option B: Include parts of Bootstrap + +// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) +@import "../node_modules/bootstrap/scss/functions"; + +// 2. Include any default variable overrides here + +// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/variables-dark"; + +// 4. Include any default map overrides here + +// 5. Include remainder of required parts +@import "../node_modules/bootstrap/scss/maps"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// 6. Optionally include any other parts as needed +@import "../node_modules/bootstrap/scss/utilities"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +@import "../node_modules/bootstrap/scss/images"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/helpers"; + +// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +@import "../node_modules/bootstrap/scss/utilities/api"; + +// 8. Add additional custom code here +``` + +With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. + +## Variable defaults + +Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. + +You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. + +Variable overrides must come after our functions are imported, but before the rest of the imports. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: + +```scss +// Required +@import "../node_modules/bootstrap/scss/functions"; + +// Default variable overrides +$body-bg: #000; +$body-color: #111; + +// Required +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/variables-dark"; +@import "../node_modules/bootstrap/scss/maps"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// Optional Bootstrap components here +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +// etc +``` + +Repeat as necessary for any variable in Bootstrap, including the global options below. + +{{< callout info >}} +{{< partial "callouts/info-npm-starter.md" >}} +{{< /callout >}} + +## Maps and loops + +Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. + +Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult. + +### Modify map + +All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: + +```scss +$primary: #0074d9; +$danger: #ff4136; +``` + +Later on, these variables are set in Bootstrap's `$theme-colors` map: + +```scss +$theme-colors: ( + "primary": $primary, + "danger": $danger +); +``` + +### Add to map + +Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`. + +```scss +// Create your own map +$custom-colors: ( + "custom-color": #900 +); + +// Merge the maps +$theme-colors: map-merge($theme-colors, $custom-colors); +``` + +### Remove from map + +To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert `$theme-colors` between our requirements just after its definition in `variables` and before its usage in `maps`: + +```scss +// Required +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/variables-dark"; + +$theme-colors: map-remove($theme-colors, "info", "light", "dark"); + +@import "../node_modules/bootstrap/scss/maps"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; + +// Optional +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +// etc +``` + +## Required keys + +Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used. + +For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values. + +## Functions + +### Colors + +Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`. + +```scss +.custom-element { + color: $gray-100; + background-color: $dark; +} +``` + +You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. + +{{< scss-docs name="color-functions" file="scss/_functions.scss" >}} + +In practice, you'd call the function and pass in the color and weight parameters. + +```scss +.custom-element { + color: tint-color($primary, 10%); +} + +.custom-element-2 { + color: shade-color($danger, 30%); +} +``` + +### Color contrast + +In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions. + +To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. + +For example, to generate color swatches from our `$theme-colors` map: + +```scss +@each $color, $value in $theme-colors { + .swatch-#{$color} { + color: color-contrast($value); + } +} +``` + +It can also be used for one-off contrast needs: + +```scss +.custom-element { + color: color-contrast(#000); // returns `color: #fff` +} +``` + +You can also specify a base color with our color map functions: + +```scss +.custom-element { + color: color-contrast($dark); // returns `color: #fff` +} +``` + +### Escape SVG + +We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted. + +### Add and Subtract functions + +We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct. + +Example where the calc is valid: + +```scss +$border-radius: .25rem; +$border-width: 1px; + +.element { + // Output calc(.25rem - 1px) is valid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output the same calc(.25rem - 1px) as above + border-radius: subtract($border-radius, $border-width); +} +``` + +Example where the calc is invalid: + +```scss +$border-radius: .25rem; +$border-width: 0; + +.element { + // Output calc(.25rem - 0) is invalid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output .25rem + border-radius: subtract($border-radius, $border-width); +} +``` + +## Mixins + +Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project. + +### Color schemes + +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. + +{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} + +```scss +.custom-element { + @include color-scheme(dark) { + // Insert dark mode styles here + } + + @include color-scheme(custom-named-scheme) { + // Insert custom color scheme styles here + } +} +``` diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md new file mode 100644 index 0000000..d0fc42f --- /dev/null +++ b/site/content/docs/5.3/docsref.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Docs reference +description: Examples of Bootstrap's documentation-specific components and styles. +aliases: "/docsref/" +toc: true +robots: noindex,follow +sitemap_exclude: true +--- + +## Buttons + + + + + +## Callouts + +{{< callout >}} + Default callout +{{< /callout >}} + +{{< callout warning >}} + Warning callout +{{< /callout >}} + +{{< callout danger >}} + Danger callout +{{< /callout >}} + +## Code example + +```scss +.test { + --color: blue; +} +``` + +
+ The HTML abbreviation element. +
+ +{{< example >}} +
This is a test.
+{{< /example >}} + +{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} + +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md new file mode 100644 index 0000000..c3c2423 --- /dev/null +++ b/site/content/docs/5.3/examples/_index.md @@ -0,0 +1,66 @@ +--- +layout: single +title: Examples +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +aliases: "/examples/" +--- + +{{< list-examples.inline >}} +{{ range $entry := $.Site.Data.examples -}} +
+

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

+ RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? +

+

Please open an issue.

+
+ {{ end -}} + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} + {{ if $entry.external }} +
+ +
+

+ + {{ $example.name }} + +

+

{{ $example.description }}

+

+ {{- $indexPath := "index.html" -}} + {{- if $example.indexPath -}} + {{- $indexPath = $example.indexPath -}} + {{- end }} + + + Edit in StackBlitz + +

+
+
+ {{ else }} +
+ + +

+ {{ $example.name }} +

+ +

{{ $example.description }}

+
+ {{ end }} + {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}} +
+{{ end -}} +{{< /list-examples.inline >}} diff --git a/site/content/docs/5.3/examples/album-rtl/index.html b/site/content/docs/5.3/examples/album-rtl/index.html new file mode 100644 index 0000000..bae4737 --- /dev/null +++ b/site/content/docs/5.3/examples/album-rtl/index.html @@ -0,0 +1,209 @@ +--- +layout: examples +title: مثال الألبوم +direction: rtl +--- + +
+
+
+
+
+

حول

+

أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.

+
+
+

تواصل معي

+ +
+
+
+
+
+
+ + + الألبوم + + +
+
+
+ +
+ +
+
+
+

مثال الألبوم

+

وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.

+

+ الدعوة الرئيسية للعمل + عمل ثانوي +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+
+
+ + +
+ 9 دقائق +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.3/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html new file mode 100644 index 0000000..54b2c5b --- /dev/null +++ b/site/content/docs/5.3/examples/album/index.html @@ -0,0 +1,208 @@ +--- +layout: examples +title: Album example +--- + +
+
+
+
+
+

About

+

Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.

+
+
+

Contact

+ +
+
+
+
+
+
+ + + Album + + +
+
+
+ +
+ +
+
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
+
+ +
+
+ +
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+ +
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ + +
+ 9 mins +
+
+
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.3/examples/badges/badges.css b/site/content/docs/5.3/examples/badges/badges.css new file mode 100644 index 0000000..b6ce0f5 --- /dev/null +++ b/site/content/docs/5.3/examples/badges/badges.css @@ -0,0 +1,3 @@ +.badge > a { + color: inherit; +} diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/content/docs/5.3/examples/badges/index.html new file mode 100644 index 0000000..a452d36 --- /dev/null +++ b/site/content/docs/5.3/examples/badges/index.html @@ -0,0 +1,149 @@ +--- +layout: examples +title: Badges +extra_css: + - "badges.css" +body_class: "" +--- + + + + + + + +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+ +
+ +
+ + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + +
+ +
+ +
+ + Primary + + + + Primary + + + + Primary + + +
+ +
+ +
+ + + Primary + + + + + + Secondary + + + + + + Success + + + + + + Danger + + + + + + Warning + + + + + + Info + + + + + + Light + + + + + + Dark + + + +
diff --git a/site/content/docs/5.3/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html new file mode 100644 index 0000000..274ea0e --- /dev/null +++ b/site/content/docs/5.3/examples/blog-rtl/index.html @@ -0,0 +1,257 @@ +--- +layout: examples +title: قالب المدونة +direction: rtl +extra_css: + - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" + - "../blog/blog.rtl.css" +--- + + + + + + + + + + + + + + +
+
+
+
+ الإشتراك في النشرة البريدية +
+
+ +
+
+ + بحث + + إنشاء حساب +
+
+
+ +
+ +
+
+ +
+
+
+

عنوان تدوينة مميزة أطول

+

عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.

+

أكمل القراءة...

+
+
+ +
+
+
+
+ العالم +

مشاركة مميزة

+
نوفمبر 12
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ + أكمل القراءة + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
+
+
+
+
+
+ التصميم +

عنوان الوظيفة

+
نوفمبر 11
+

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

+ + أكمل القراءة + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
+
+
+
+ +
+
+

+ من Firehose +

+ +
+

مثال على تدوينة

+

1 يناير 2021 بواسطة Mark

+ +

تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.

+
+

يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.

+
+

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية

+
+

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.

+

عنوان

+

تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!

+

عنوان فرعي

+

ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.

+ 
Example code block
+

وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.

+

عنوان فرعي

+

بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.

+

يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:

+
    +
  • البروتينات
    • +
  • الكربوهيدرات
    • +
  • الدهون
    • +
+

وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:

+
    +
  1. الكربون
    2. +
  2. الهيدروجين
    3. +
  3. الأكسجين
    4. +
  4. النيتروجين
    5. +
+

ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.

+
+ +
+

تدوينة أخرى

+

23 ديسمبر 2020 بواسطة Jacob

+ +

في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.

+
+

تم تصنيع اللحوم بأنواع عديدة

+
+

إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.

+

وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.

+
+ +
+

ميزة جديدة

+

14 ديسمبر 2020 بواسطة Jacob

+ +

كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).

+

وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.

+

وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:

+
    +
  • توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
    • +
  • تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة
    • +
  • تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م
    • +
+

فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!

+
+ + + +
+ +
+
+
+

حول

+

أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.

+
+ + + +
+

الأرشيف

+
    +
  1. مارس 2021
    2. +
  2. شباط 2021
    3. +
  3. يناير 2021
    4. +
  4. ديسمبر 2020
    5. +
  5. نوفمبر 2020
    6. +
  6. أكتوبر 2020
    7. +
  7. سبتمبر 2020
    8. +
  8. اغسطس 2020
    9. +
  9. يوليو 2020
    10. +
  10. يونيو 2020
    11. +
  11. مايو 2020
    12. +
  12. ابريل 2020
    13. +
+
+ +
+

في مكان آخر

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.3/examples/blog/blog.css b/site/content/docs/5.3/examples/blog/blog.css new file mode 100644 index 0000000..ddbca5a --- /dev/null +++ b/site/content/docs/5.3/examples/blog/blog.css @@ -0,0 +1,39 @@ +/* stylelint-disable stylistic/selector-list-comma-newline-after */ + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} diff --git a/site/content/docs/5.3/examples/blog/blog.rtl.css b/site/content/docs/5.3/examples/blog/blog.rtl.css new file mode 100644 index 0000000..043d4e6 --- /dev/null +++ b/site/content/docs/5.3/examples/blog/blog.rtl.css @@ -0,0 +1,39 @@ +/* stylelint-disable stylistic/selector-list-comma-newline-after */ + +.blog-header-logo { + font-family: Amiri, Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Amiri, Georgia, "Times New Roman", serif; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} diff --git a/site/content/docs/5.3/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html new file mode 100644 index 0000000..d0d6f08 --- /dev/null +++ b/site/content/docs/5.3/examples/blog/index.html @@ -0,0 +1,309 @@ +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" + - "blog.css" +--- + + + + + + + + + + + + + + +
+
+
+
+ Subscribe +
+
+ +
+
+ + Search + + Sign up +
+
+
+ +
+ +
+
+ +
+
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
+
+
+
+ +
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2021 by Mark

+ +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Blockquotes

+

This is an example blockquote in action:

+
+

Quoted text goes here.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example lists

+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

And this is an ordered list:

+
    +
  1. First list item
    2. +
  2. Second list item with a longer description
    3. +
  3. Third list item to close it out
    4. +
+

And this is a definition list:

+
+
HyperText Markup Language (HTML)
+
The language used to describe and define the content of a Web page
+
Cascading Style Sheets (CSS)
+
Used to describe the appearance of Web content
+
JavaScript (JS)
+
The programming language used to build advanced Web sites and applications
+
+

Inline HTML elements

+

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

+
    +
  • To bold text, use <strong>.
    • +
  • To italicize text, use <em>.
    • +
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
    • +
  • Citations, like — Mark Otto, should use <cite>.
    • +
  • Deleted text should use <del> and inserted text should use <ins>.
    • +
  • Superscript text uses <sup> and subscript text uses <sub>.
    • +
+

Most of these elements are styled by browsers with few modifications on our part.

+

Heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Sub-heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+ 
Example code block
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

Another blog post

+

December 23, 2020 by Jacob

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
+

Longer quote goes here, maybe with some emphasized text in the middle of it.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example table

+

And don't forget about tables in these posts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUpvotesDownvotes
Alice1011
Bob43
Charlie79
Totals2123
+ +

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

New feature

+

December 14, 2020 by Chris

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ + + +
+ +
+
+
+

About

+

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

+
+ + + +
+

Archives

+
    +
  1. March 2021
    2. +
  2. February 2021
    3. +
  3. January 2021
    4. +
  4. December 2020
    5. +
  5. November 2020
    6. +
  6. October 2020
    7. +
  7. September 2020
    8. +
  8. August 2020
    9. +
  9. July 2020
    10. +
  10. June 2020
    11. +
  11. May 2020
    12. +
  12. April 2020
    13. +
+
+ +
+

Elsewhere

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+
+
+ +
+ + diff --git a/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css new file mode 100644 index 0000000..a6be558 --- /dev/null +++ b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css @@ -0,0 +1,50 @@ +.breadcrumb-chevron { + --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); + gap: .5rem; +} +.breadcrumb-chevron .breadcrumb-item { + display: flex; + gap: inherit; + align-items: center; + padding-left: 0; + line-height: 1; +} +.breadcrumb-chevron .breadcrumb-item::before { + gap: inherit; + float: none; + width: 1rem; + height: 1rem; +} + +.breadcrumb-custom .breadcrumb-item { + position: relative; + flex-grow: 1; + padding: .75rem 3rem; +} +.breadcrumb-custom .breadcrumb-item::before { + display: none; +} +.breadcrumb-custom .breadcrumb-item::after { + position: absolute; + top: 50%; + right: -25px; + z-index: 1; + display: inline-block; + width: 50px; + height: 50px; + margin-top: -25px; + content: ""; + background-color: var(--bs-tertiary-bg); + border-top-right-radius: .5rem; + box-shadow: 1px -1px var(--bs-border-color); + transform: scale(.707) rotate(45deg); +} +.breadcrumb-custom .breadcrumb-item:first-child { + padding-left: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child { + padding-right: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child::after { + display: none; +} diff --git a/site/content/docs/5.3/examples/breadcrumbs/index.html b/site/content/docs/5.3/examples/breadcrumbs/index.html new file mode 100644 index 0000000..2d90962 --- /dev/null +++ b/site/content/docs/5.3/examples/breadcrumbs/index.html @@ -0,0 +1,88 @@ +--- +layout: examples +title: Breadcrumbs +extra_css: + - "breadcrumbs.css" +body_class: "" +--- + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html new file mode 100644 index 0000000..f1b5ea6 --- /dev/null +++ b/site/content/docs/5.3/examples/buttons/index.html @@ -0,0 +1,88 @@ +--- +layout: examples +title: Buttons +body_class: "" +--- + + + + + + + + + + + +
+ + + + + + + + + +
+ +
+ +
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.3/examples/carousel-rtl/index.html b/site/content/docs/5.3/examples/carousel-rtl/index.html new file mode 100644 index 0000000..db184d7 --- /dev/null +++ b/site/content/docs/5.3/examples/carousel-rtl/index.html @@ -0,0 +1,167 @@ +--- +layout: examples +title: قالب شرائح العرض +direction: rtl +extra_css: + - "../carousel/carousel.rtl.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

عنوان

+

تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

عنوان آخر

+

إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.

+

عرض التفاصيل

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

عنوان ثالث لتأكيد المعلومة

+

بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.

+

عرض التفاصيل

+
+
+ + + + +
+ +
+
+

العنوان الأول المميز. سيذهل عقلك.

+

وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

أوه نعم، هذا جيد. شاهد بنفسك.

+

عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

وأخيرًا، هذا. كش ملك.

+

إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/5.3/examples/carousel/carousel.css b/site/content/docs/5.3/examples/carousel/carousel.css new file mode 100644 index 0000000..be0af52 --- /dev/null +++ b/site/content/docs/5.3/examples/carousel/carousel.css @@ -0,0 +1,82 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: rgb(var(--bs-tertiary-color-rgb)); +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +/* rtl:begin:remove */ +.featurette-heading { + letter-spacing: -.05rem; +} + +/* rtl:end:remove */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/5.3/examples/carousel/carousel.rtl.css b/site/content/docs/5.3/examples/carousel/carousel.rtl.css new file mode 100644 index 0000000..9ff275d --- /dev/null +++ b/site/content/docs/5.3/examples/carousel/carousel.rtl.css @@ -0,0 +1,74 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: rgb(var(--bs-tertiary-color-rgb)); +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/site/content/docs/5.3/examples/carousel/index.html b/site/content/docs/5.3/examples/carousel/index.html new file mode 100644 index 0000000..e03f4d7 --- /dev/null +++ b/site/content/docs/5.3/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +
+ +
+ +
+ + + + + + + +
+ + +
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

+

View details »

+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} +

Heading

+

And lastly this, the third column of representative placeholder content.

+

View details »

+
+
+ + + + +
+ +
+
+

First featurette heading. It’ll blow your mind.

+

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

Oh yeah, it’s that good. See for yourself.

+

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ +
+
+

And lastly, this one. Checkmate.

+

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} +
+
+ +
+ + + +
+ + + + +
diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html new file mode 100644 index 0000000..8ffbb57 --- /dev/null +++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -0,0 +1,1622 @@ +--- +layout: examples +title: ورقة الغش +extra_css: + - "../cheatsheet/cheatsheet.rtl.css" +extra_js: + - src: "../cheatsheet/cheatsheet.js" +body_class: "bg-body-tertiary" +direction: rtl +--- + +
+
+

+ Bootstrap + ورقة الغش +

+ }}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR +
+
+ +
+
+

المحتوى

+ +
+
+

النصوص

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +

العرض 1

+

العرض 2

+

العرض 3

+

العرض 4

+

العرض 5

+

العرض 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

عنوان 1

+

عنوان 2

+

عنوان 3

+

عنوان 4

+

عنوان 5

+

عنوان 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

يمكنك استخدام تصنيف mark لتحديد نص.

+

من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.

+

من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.

+

سيتم عرض النص في هذا السطر كما وتحته خط.

+

من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.

+

هذا السطر يحوي نص عريض.

+

هذا السطر يحوي نص مائل.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

إقتباس مبهر، موضوع في عنصر blockquote

+
شخص مشهور في عنوان المصدر
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • هذه قائمة عناصر.
    • +
  • بالرغم من أنها مصممة كي لا تظهر كذلك.
    • +
  • إلا أنها مجهزة كـ قائمة خلف الكواليس
    • +
  • هذا التصميم ينطبق فقد على القائمة الرئيسية
    • +
  • القوائم الفرعية +
      +
    • لا تتأثر بهذا التصميم
      • +
    • فهي تظهر عليها علامات الترقيم
      • +
    • وتحتوي على مساحة فارغة بجوارها
      • +
    +
    • +
  • قد يكون هذا التصميم مفيدًا في بعض الأحيان.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • هذا عنصر في قائمة.
    • +
  • وهذا أيضًا.
    • +
  • لكنهم يظهرون متجاورين.
    • +
+ {{< /example >}} +
+
+
+
+

الصور

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} + {{< /example >}} +
+
+
+
+

الجداول

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
Classعنوانعنوان
Defaultخليةخلية
{{ .name | title }}خليةخلية
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#الاسم الاولالكنيةالاسم المستعار
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

النماذج البيانية

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
شرح للصورة أعلاه.
+
+ {{< /example >}} +
+
+
+ +
+

النماذج

+ +
+
+

نظرة عامة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.
+
+
+ + +
+
+ + +
+
+ + +
+
+ أزرار الاختيار الأحادي +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

الحقول المعطلة

+ }}#disabled-forms">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ أزرار اختيار أحادي معطلين +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+
+

الأحجام

+ }}#sizing">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

مجموعة الإدخال

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+ أنا اسمي + +
+
+ + وغيرها +
+ +
+ + https://example.com/users/ +
+
+ .00 + + $ +
+
+ مع textarea + +
+ {{< /example >}} +
+
+
+
+

الحقول ذوي العناوين العائمة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

التحقق

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ يبدو صحيحًا! +
+
+
+ + +
+ يبدو صحيحًا! +
+
+
+ +
+ + @ +
+ يرجى اختيار اسم مستخدم. +
+
+
+
+ + +
+ يرجى إدخال مدينة صحيحة. +
+
+
+ + +
+ يرجى اختيار ولاية صحيحة. +
+
+
+ + +
+ يرجى إدخال رمز بريدي صحيح. +
+
+
+
+ + +
+ تجب الموافقة قبل إرسال النموذج. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

العناصر

+ +
+
+

المطوية

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+

+ +

+
+
+ هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

الإنذارات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

الشارة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+

مثال على عنوان جديد

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

الأزرار

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

مجموعة الأزرار

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

البطاقة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}} +
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+
+
+
+
+
+ متميز +
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+ اذهب لمكان ما +
+
+ منذ يومان +
+
+
+
+
+
+
عنوان البطاقة
+

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

+
+
    +
  • عنصر
    • +
  • عنصر آخر
    • +
  • عنصر ثالث
    • +
+
+ رابط البطاقة + رابط آخر +
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="صورة" >}} +
+
+
+
عنوان البطاقة
+

هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

+

آخر تحديث منذ 3 دقائق

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

مجموعة العناصر

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
    +
  • عنصر معطل
    • +
  • عنصر ثاني
    • +
  • عنصر ثالث
    • +
  • عنصر رابع
    • +
  • وعنصر خامس أيضًا
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • عنصر
    • +
  • عنصر ثاني
    • +
  • عنصر ثالث
    • +
  • عنصر رابع
    • +
  • وعنصر خامس أيضًا
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ عنصر مجموعة قائمة default بسيط + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + عنصر مجموعة قائمة {{ .name }} بسيط + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + + +
+
+

الصناديق المنبثقة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

شريط التقدم

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+
+
+
+
+ {{< /example >}} +
+
+
+
+

المخطوطة

+ }}">دليل الإستخدام +
+ +
+
+ +
+

@fat

+

محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

+

@mdo

+

بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

+

واحد

+

وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

+

اثنان

+

مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

+

ثلاثة

+

وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

+

ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

+
+
+
+
+
+
+

الدوائر المتحركة

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

الإشعارات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

التلميحات

+ }}">دليل الإستخدام +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css new file mode 100644 index 0000000..e2f99b8 --- /dev/null +++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css @@ -0,0 +1,164 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-right: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: .3125rem; + color: rgba(0, 0, 0, .65); +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); +} + +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg)/* rtl:ignore */; +} + + +/* Examples */ +.scrollspy-example { + height: 200px; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 1rem 1rem 0; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr 4fr 1fr; + gap: 1rem; + } + + .bd-header { + position: fixed; + top: 0; + /* rtl:begin:ignore */ + right: 0; + left: 0; + /* rtl:end:ignore */ + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + grid-template-rows: auto; + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + gap: inherit; /* 1 */ + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .bd-cheatsheet section > h2::before { + position: absolute; + /* rtl:begin:ignore */ + top: 0; + right: 0; + bottom: -2rem; + left: 0; + /* rtl:end:ignore */ + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js new file mode 100644 index 0000000..e25a89e --- /dev/null +++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js @@ -0,0 +1,73 @@ +/* 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) + }) + + document.querySelectorAll('.toast') + .forEach(toastNode => { + const toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + // Disable empty links and submit buttons + document.querySelectorAll('[href="#"], [type="submit"]') + .forEach(link => { + link.addEventListener('click', event => { + event.preventDefault() + }) + }) + + function setActiveItem() { + const { hash } = window.location + + if (hash === '') { + return + } + + const link = document.querySelector(`.bd-aside a[href="${hash}"]`) + + if (!link) { + return + } + + const active = document.querySelector('.bd-aside .active') + const parent = link.parentNode.parentNode.previousElementSibling + + link.classList.add('active') + + if (parent.classList.contains('collapsed')) { + parent.click() + } + + if (!active) { + return + } + + const expanded = active.parentNode.parentNode.previousElementSibling + + active.classList.remove('active') + + if (expanded && parent !== expanded) { + expanded.click() + } + } + + setActiveItem() + window.addEventListener('hashchange', setActiveItem) +})() diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css new file mode 100644 index 0000000..e04d848 --- /dev/null +++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css @@ -0,0 +1,157 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-left: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-right: .3125rem; + color: rgba(0, 0, 0, .65); +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); +} + +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform: rotate(180deg) translateX(-2px); + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg); +} + + +/* Examples */ +.scrollspy-example { + height: 200px; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 0 1rem 1rem; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr 4fr 1fr; + gap: 1rem; + } + + .bd-header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + grid-template-rows: auto; + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + gap: inherit; /* 1 */ + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .bd-cheatsheet section > h2::before { + position: absolute; + top: 0; + right: 0; + bottom: -2rem; + left: 0; + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html new file mode 100644 index 0000000..7470c4e --- /dev/null +++ b/site/content/docs/5.3/examples/cheatsheet/index.html @@ -0,0 +1,1606 @@ +--- +layout: examples +title: Cheatsheet +extra_css: + - "cheatsheet.css" +extra_js: + - src: "cheatsheet.js" +body_class: "bg-body-tertiary" +--- + +
+
+

+ Bootstrap + Cheatsheet +

+ }}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet +
+
+ +
+
+

Contents

+ +
+
+

Typography

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+

Heading 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

A well-known quote, contained in a blockquote element.

+
Someone famous in Source Title
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list.
    • +
  • It appears completely unstyled.
    • +
  • Structurally, it's still a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list item.
    • +
  • And another one.
    • +
  • But they're displayed inline.
    • +
+ {{< /example >}} +
+
+
+
+

Images

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} + {{< /example >}} +
+
+
+
+

Tables

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
ClassHeadingHeading
DefaultCellCell
{{ .name | title }}CellCell
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

Figures

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
A caption for the above image.
+
+ {{< /example >}} +
+
+
+ +
+

Forms

+ +
+
+

Overview

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+
+ + +
+
+ Radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

Disabled forms

+ }}#disabled-forms">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ Disabled radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+
+

Sizing

+ }}#sizing">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

Input group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ @ + +
+
+ + @example.com +
+ +
+ https://example.com/users/ + +
+
+ $ + + .00 +
+
+ With textarea + +
+ {{< /example >}} +
+
+
+
+

Floating labels

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

Validation

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

Components

+ +
+
+

Accordion

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

Alerts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Badge

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

Buttons

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

Button group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Card

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

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

+ Go somewhere +
+
+
+
+
+
+ Featured +
+
+
Card title
+

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

+ Go somewhere +
+
+ 2 days ago +
+
+
+
+
+
+
Card title
+

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

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="Image" >}} +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

List group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
    +
  • A disabled item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ A simple default list group item + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + A simple {{ .name }} list group item + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + +
+
+

Pagination

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Popovers

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

Progress

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+
+
+
+
+ {{< /example >}} +
+
+
+
+

Scrollspy

+ }}">Documentation +
+ +
+
+ +
+

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

+

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.

+

Third 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.

+

Fourth 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.

+

Fifth 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.

+
+
+
+
+
+
+

Spinners

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

Toasts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

Tooltips

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/5.3/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html new file mode 100644 index 0000000..6516efe --- /dev/null +++ b/site/content/docs/5.3/examples/checkout-rtl/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: مثال إتمام الشراء +direction: rtl +extra_css: + - "../checkout/checkout.css" +extra_js: + - src: "../checkout/checkout.js" +body_class: "bg-body-tertiary" +--- + +
+
+
+ +

نموذج إتمام الشراء

+

فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.

+
+ +
+
+

+ عربة التسوق + 3 +

+
    +
  • +
    +
    اسم المنتج
    + وصف مختصر +
    + $12 +
    • +
  • +
    +
    المنتج الثاني
    + وصف مختصر +
    + $8 +
    • +
  • +
    +
    البند الثالث
    + وصف مختصر +
    + $5 +
    • +
  • +
    +
    رمز ترويجي
    + EXAMPLECODE +
    + -$5 +
    • +
  • + مجموع (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

عنوان الفوترة

+
+
+
+ + +
+ يرجى إدخال اسم أول صحيح. +
+
+ +
+ + +
+ يرجى إدخال اسم عائلة صحيح. +
+
+ +
+ +
+ @ + +
+ اسم المستخدم الخاص بك مطلوب. +
+
+
+ +
+ + +
+ يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن. +
+
+ +
+ + +
+ يرجى إدخال عنوان الشحن الخاص بك. +
+
+ +
+ + +
+ +
+ + +
+ يرجى اختيار بلد صحيح. +
+
+ +
+ + +
+ يرجى اختيار اسم منطقة صحيح. +
+
+ +
+ + +
+ الرمز البريدي مطلوب. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

طريقة الدفع

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + الاسم الكامل كما هو معروض على البطاقة +
+ الاسم على البطاقة مطلوب +
+
+ +
+ + +
+ رقم بطاقة الائتمان مطلوب +
+
+ +
+ + +
+ تاريخ انتهاء الصلاحية مطلوب +
+
+ +
+ + +
+ رمز الحماية مطلوب +
+
+
+ +
+ + +
+
+
+
+ +
diff --git a/site/content/docs/5.3/examples/checkout/checkout.css b/site/content/docs/5.3/examples/checkout/checkout.css new file mode 100644 index 0000000..e5ea31c --- /dev/null +++ b/site/content/docs/5.3/examples/checkout/checkout.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/5.3/examples/checkout/checkout.js b/site/content/docs/5.3/examples/checkout/checkout.js new file mode 100644 index 0000000..30ea0aa --- /dev/null +++ b/site/content/docs/5.3/examples/checkout/checkout.js @@ -0,0 +1,19 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(() => { + 'use strict' + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + const forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.from(forms).forEach(form => { + form.addEventListener('submit', event => { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) +})() diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html new file mode 100644 index 0000000..d39f0f2 --- /dev/null +++ b/site/content/docs/5.3/examples/checkout/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "checkout.css" +extra_js: + - src: "checkout.js" +body_class: "bg-body-tertiary" +--- + +
+
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+ +
+ + +
+ Valid last name is required. +
+
+ +
+ +
+ @ + +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+ + +
+ Please select a valid country. +
+
+ +
+ + +
+ Please provide a valid state. +
+
+ +
+ + +
+ Zip code required. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+ +
+ + +
+ Credit card number is required +
+
+ +
+ + +
+ Expiration date required +
+
+ +
+ + +
+ Security code required +
+
+
+ +
+ + +
+
+
+
+ + +
diff --git a/site/content/docs/5.3/examples/cover/cover.css b/site/content/docs/5.3/examples/cover/cover.css new file mode 100644 index 0000000..2e7aef8 --- /dev/null +++ b/site/content/docs/5.3/examples/cover/cover.css @@ -0,0 +1,50 @@ +/* + * Globals + */ + + +/* Custom default button */ +.btn-light, +.btn-light:hover, +.btn-light:focus { + color: #333; + text-shadow: none; /* Prevent inheritance from `body` */ +} + + +/* + * Base structure + */ + +body { + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); +} + +.cover-container { + max-width: 42em; +} + + +/* + * Header + */ + +.nav-masthead .nav-link { + color: rgba(255, 255, 255, .5); + border-bottom: .25rem solid transparent; +} + +.nav-masthead .nav-link:hover, +.nav-masthead .nav-link:focus { + border-bottom-color: rgba(255, 255, 255, .25); +} + +.nav-masthead .nav-link + .nav-link { + margin-left: 1rem; +} + +.nav-masthead .active { + color: #fff; + border-bottom-color: #fff; +} diff --git a/site/content/docs/5.3/examples/cover/index.html b/site/content/docs/5.3/examples/cover/index.html new file mode 100644 index 0000000..002a5c3 --- /dev/null +++ b/site/content/docs/5.3/examples/cover/index.html @@ -0,0 +1,33 @@ +--- +layout: examples +title: Cover Template +extra_css: + - "cover.css" +html_class: "h-100" +body_class: "d-flex h-100 text-center text-bg-dark" +--- + +
+
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js new file mode 100644 index 0000000..bdb3029 --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js @@ -0,0 +1,49 @@ +/* globals Chart:false */ + +(() => { + 'use strict' + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'الأحد', + 'الإثنين', + 'الثلاثاء', + 'الأربعاء', + 'الخميس', + 'الجمعة', + 'السبت' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } + } + } + }) +})() diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html new file mode 100644 index 0000000..252b775 --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html @@ -0,0 +1,333 @@ +--- +layout: examples +title: قالب لوحة القيادة +direction: rtl +extra_css: + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" + - "../dashboard/dashboard.rtl.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" + integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" + - src: "dashboard.js" +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ اسم الشركة + +
    +
  • + +
    • +
  • + +
    • +
+ + +
+ +
+
+
+
+
+
Company name
+ +
+
+ + +
+ التقارير المحفوظة + + + +
+ + +
+ + +
+
+
+ +
+
+

لوحة القيادة

+
+
+ + +
+ +
+
+ + + +

عنوان القسم

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#عنوانعنوانعنوانعنوان
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بياناتمفيدةمعلوماتالجدول
+
+
+
+
diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.css b/site/content/docs/5.3/examples/dashboard/dashboard.css new file mode 100644 index 0000000..154940c --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard/dashboard.css @@ -0,0 +1,48 @@ +.bi { + display: inline-block; + width: 1rem; + height: 1rem; +} + +/* + * Sidebar + */ + +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; + } +} + +.sidebar .nav-link { + font-size: .875rem; + font-weight: 500; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar-heading { + font-size: .75rem; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .form-control { + padding: .75rem 1rem; +} diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.js b/site/content/docs/5.3/examples/dashboard/dashboard.js new file mode 100644 index 0000000..a60b393 --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard/dashboard.js @@ -0,0 +1,49 @@ +/* globals Chart:false */ + +(() => { + 'use strict' + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } + } + } + }) +})() diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css new file mode 100644 index 0000000..5c8a7e2 --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css @@ -0,0 +1,48 @@ +.bi { + display: inline-block; + width: 1rem; + height: 1rem; +} + +/* + * Sidebar + */ + +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; + } +} + +.sidebar .nav-link { + font-size: .875rem; + font-weight: 500; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar-heading { + font-size: .75rem; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .form-control { + padding: .75rem 1rem; +} diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html new file mode 100644 index 0000000..4ae3f6f --- /dev/null +++ b/site/content/docs/5.3/examples/dashboard/index.html @@ -0,0 +1,332 @@ +--- +layout: examples +title: Dashboard Template +extra_css: + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" + - "dashboard.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" + integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" + - src: "dashboard.js" +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Company name + +
    +
  • + +
    • +
  • + +
    • +
+ + +
+ +
+
+
+
+
+
Company name
+ +
+
+ + +
+ Saved reports + + + +
+ + +
+ + +
+
+
+ +
+
+

Dashboard

+
+
+ + +
+ +
+
+ + + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+
+
diff --git a/site/content/docs/5.3/examples/dropdowns/dropdowns.css b/site/content/docs/5.3/examples/dropdowns/dropdowns.css new file mode 100644 index 0000000..f633e2c --- /dev/null +++ b/site/content/docs/5.3/examples/dropdowns/dropdowns.css @@ -0,0 +1,71 @@ +.dropdown-item-danger { + color: var(--bs-red); +} +.dropdown-item-danger:hover, +.dropdown-item-danger:focus { + color: #fff; + background-color: var(--bs-red); +} +.dropdown-item-danger.active { + background-color: var(--bs-red); +} + +.btn-hover-light { + color: var(--bs-body-color); + background-color: var(--bs-body-bg); +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-link-hover-color); + background-color: var(--bs-tertiary-bg); +} + +.cal-month, +.cal-days, +.cal-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + align-items: center; +} +.cal-month-name { + grid-column-start: 2; + grid-column-end: 7; + text-align: center; +} +.cal-weekday, +.cal-btn { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0; +} +.cal-btn:not([disabled]) { + font-weight: 500; + color: var(--bs-emphasis-color); +} +.cal-btn:hover, +.cal-btn:focus { + background-color: var(--bs-secondary-bg); +} +.cal-btn[disabled] { + border: 0; + opacity: .5; +} + +.w-220px { + width: 220px; +} + +.w-280px { + width: 280px; +} + +.w-340px { + width: 340px; +} + +.opacity-10 { + opacity: .1; +} diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/content/docs/5.3/examples/dropdowns/index.html new file mode 100644 index 0000000..3dac768 --- /dev/null +++ b/site/content/docs/5.3/examples/dropdowns/index.html @@ -0,0 +1,462 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+ +
+ +
+
+
+
+
+ + June + + +
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+
+ + June + + +
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
+ +
+
+ +
 
+
+
+ +
+
+ +
+ +
 
+
+
+ +
+
+
diff --git a/site/content/docs/5.3/examples/features/features.css b/site/content/docs/5.3/examples/features/features.css new file mode 100644 index 0000000..debc263 --- /dev/null +++ b/site/content/docs/5.3/examples/features/features.css @@ -0,0 +1,26 @@ +.feature-icon { + width: 4rem; + height: 4rem; + border-radius: .75rem; +} + +.icon-square { + width: 3rem; + height: 3rem; + border-radius: .75rem; +} + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + +.feature-icon-small { + width: 3rem; + height: 3rem; +} diff --git a/site/content/docs/5.3/examples/features/index.html b/site/content/docs/5.3/examples/features/index.html new file mode 100644 index 0000000..02fad75 --- /dev/null +++ b/site/content/docs/5.3/examples/features/index.html @@ -0,0 +1,340 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Features examples

+ + + +
+ +
+

Hanging icons

+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+
+

Featured title

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ + Primary button + +
+
+
+
+ +
+ +
+

Custom cards

+ +
+
+
+
+

Short title, long jacket

+
    +
  • + Bootstrap +
    • +
  • + + Earth +
    • +
  • + + 3d +
    • +
+
+
+
+ +
+
+
+

Much longer title that wraps to multiple lines

+
    +
  • + Bootstrap +
    • +
  • + + Pakistan +
    • +
  • + + 4d +
    • +
+
+
+
+ +
+
+
+

Another longer title belongs here

+
    +
  • + Bootstrap +
    • +
  • + + California +
    • +
  • + + 5d +
    • +
+
+
+
+
+
+ +
+ +
+

Icon grid

+ +
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+ +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+
+ +
+ +
+

Features with title

+ +
+
+

Left-aligned title explaining these awesome features

+

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

+ Primary button +
+ +
+
+
+
+ + + +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+ +
+
+ + + +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+ +
+
+ + + +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+ +
+
+ + + +
+

Featured title

+

Paragraph of text beneath the heading to explain the heading.

+
+
+
+
+
+
diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg new file mode 100644 index 0000000..ed2e36a Binary files /dev/null and b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg differ diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg new file mode 100644 index 0000000..b66864a Binary files /dev/null and b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg differ diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg new file mode 100644 index 0000000..c411b17 Binary files /dev/null and b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg differ diff --git a/site/content/docs/5.3/examples/footers/index.html b/site/content/docs/5.3/examples/footers/index.html new file mode 100644 index 0000000..83c2409 --- /dev/null +++ b/site/content/docs/5.3/examples/footers/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: Footers +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ + + + © {{< year >}} Company, Inc +
+ +
    +
    • +
    • +
    • +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css new file mode 100644 index 0000000..cbc7c31 --- /dev/null +++ b/site/content/docs/5.3/examples/grid/grid.css @@ -0,0 +1,13 @@ +.themed-grid-col { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(112.520718, 44.062154, 249.437846, .15); + border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); +} + +.themed-container { + padding: .75rem; + margin-bottom: 1.5rem; + background-color: rgba(112.520718, 44.062154, 249.437846, .15); + border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); +} diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html new file mode 100644 index 0000000..8a61582 --- /dev/null +++ b/site/content/docs/5.3/examples/grid/index.html @@ -0,0 +1,187 @@ +--- +layout: examples +title: Grid Template +extra_css: + - "grid.css" +body_class: "py-4" +--- + +
+
+ +

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

+ +

Five grid tiers

+

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +
+
.col-xxl-4
+
.col-xxl-4
+
.col-xxl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three equal columns alternative

+

By using the .row-cols-* classes, you can easily create a grid with equal columns.

+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+

+ No grid classes are necessary for full-width elements. +

+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8 +
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.

+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
+ +

Gutters

+

With .gx-* classes, the horizontal gutters can be adjusted.

+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+

Use the .gy-* classes to control the vertical gutters.

+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+

With .g-* classes, the gutters in both directions can be adjusted.

+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+ +
+
+ +

Containers

+

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

+
+ +
.container
+
.container-sm
+
.container-md
+
.container-lg
+
.container-xl
+
.container-xxl
+
.container-fluid
+
diff --git a/site/content/docs/5.3/examples/headers/headers.css b/site/content/docs/5.3/examples/headers/headers.css new file mode 100644 index 0000000..f887573 --- /dev/null +++ b/site/content/docs/5.3/examples/headers/headers.css @@ -0,0 +1,15 @@ +.form-control-dark { + border-color: var(--bs-gray); +} +.form-control-dark:focus { + border-color: #fff; + box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); +} + +.text-small { + font-size: 85%; +} + +.dropdown-toggle:not(:focus) { + outline: 0; +} diff --git a/site/content/docs/5.3/examples/headers/index.html b/site/content/docs/5.3/examples/headers/index.html new file mode 100644 index 0000000..d47597f --- /dev/null +++ b/site/content/docs/5.3/examples/headers/index.html @@ -0,0 +1,297 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + +
+

Headers examples

+ +
+
+ + + Simple header + + + +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+ + + +
+ + + +
+ + +
+
+
+ +
+ +
+
+
+ + + + + + + + +
+ + +
+
+
+
+ +
+ +
+
+
+ + + + + + + + +
+ + +
+
+
+
+ +
+ +
+
+
+ + +
+ +
+ + +
+ + +
+
+
+
+ +
+
+
+









+
+
+









+
+
+
+ +
+ + +
+
+ + + Double header + + +
+
+ +
+ +
+
+
+
+ + + + + +
+
+
+
+
+ + +
+ + +
+
+
+
+ +
+
diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png new file mode 100644 index 0000000..471a9ed Binary files /dev/null and b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png differ diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-themes.png b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png new file mode 100644 index 0000000..13c3233 Binary files /dev/null and b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png differ diff --git a/site/content/docs/5.3/examples/heroes/heroes.css b/site/content/docs/5.3/examples/heroes/heroes.css new file mode 100644 index 0000000..e9deaf7 --- /dev/null +++ b/site/content/docs/5.3/examples/heroes/heroes.css @@ -0,0 +1,3 @@ +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.3/examples/heroes/index.html b/site/content/docs/5.3/examples/heroes/index.html new file mode 100644 index 0000000..7f5daa9 --- /dev/null +++ b/site/content/docs/5.3/examples/heroes/index.html @@ -0,0 +1,125 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +
+

Heroes examples

+ +
+ +

Centered hero

+
+

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.

+
+ + +
+
+
+ +
+ +
+

Centered screenshot

+
+

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.

+
+ + +
+
+
+
+ Example image +
+
+
+ +
+ +
+
+
+ Bootstrap Themes +
+
+

Responsive left-aligned hero with image

+

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.

+
+ + +
+
+
+
+ +
+ +
+
+
+

Vertically centered hero sign-up form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ By clicking Sign up, you agree to the terms of use. +
+
+
+
+ +
+ +
+
+
+

Border hero with cropped image and shadows

+

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.

+
+ + +
+
+
+ +
+
+
+ +
+ +
+
+

Dark color hero

+
+

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.

+
+ + +
+
+
+
+ +
+
diff --git a/site/content/docs/5.3/examples/jumbotron/index.html b/site/content/docs/5.3/examples/jumbotron/index.html new file mode 100644 index 0000000..049684d --- /dev/null +++ b/site/content/docs/5.3/examples/jumbotron/index.html @@ -0,0 +1,44 @@ +--- +layout: examples +title: Jumbotron example +--- + +
+
+
+ + Bootstrap + Jumbotron example + +
+ +
+
+

Custom jumbotron

+

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+ +
+
+ +
+
+
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ +
+
+
+
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ +
+
+
+ +
+ © {{< year >}} +
+
+
diff --git a/site/content/docs/5.3/examples/jumbotrons/index.html b/site/content/docs/5.3/examples/jumbotrons/index.html new file mode 100644 index 0000000..ded1144 --- /dev/null +++ b/site/content/docs/5.3/examples/jumbotrons/index.html @@ -0,0 +1,82 @@ +--- +layout: examples +title: Jumbotrons +extra_css: + - "jumbotrons.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + +
+
+ +

Jumbotron with icon

+

+ This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action. +

+
+ + +
+
+
+ +
+ +
+
+ + +

Placeholder jumbotron

+

+ This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action. +

+ +
+
+ +
+ +
+
+
+

Full-width jumbotron

+

+ This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes. +

+
+
+
+ +
+ +
+
+

Basic jumbotron

+

+ This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes. +

+
+
+ +
diff --git a/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css new file mode 100644 index 0000000..d7d065e --- /dev/null +++ b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css @@ -0,0 +1 @@ +.border-dashed { --bs-border-style: dashed; } diff --git a/site/content/docs/5.3/examples/list-groups/index.html b/site/content/docs/5.3/examples/list-groups/index.html new file mode 100644 index 0000000..1a6e5e8 --- /dev/null +++ b/site/content/docs/5.3/examples/list-groups/index.html @@ -0,0 +1,225 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + + + + + + + + + + + + + + + + + +
+
+ + twbs +
+
+
List group item heading
+

Some placeholder content in a paragraph.

+
+ now +
+ + + twbs +
+
+
Another title here
+

Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.

+
+ 3d +
+ + + twbs +
+
+
Third heading
+

Some placeholder content in a paragraph.

+
+ 1w +
+ +
+
+ +
+ +
+
+ + + +
+ +
+ + + +
+
+ +
+ +
+
+ + + + +
+
+ +
+ +
+
+ + + + + + + + + + + +
+
+ +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
diff --git a/site/content/docs/5.3/examples/list-groups/list-groups.css b/site/content/docs/5.3/examples/list-groups/list-groups.css new file mode 100644 index 0000000..b90cfa0 --- /dev/null +++ b/site/content/docs/5.3/examples/list-groups/list-groups.css @@ -0,0 +1,63 @@ +.list-group { + width: 100%; + max-width: 460px; + margin-inline: 1.5rem; +} + +.form-check-input:checked + .form-checked-content { + opacity: .5; +} + +.form-check-input-placeholder { + border-style: dashed; +} +[contenteditable]:focus { + outline: 0; +} + +.list-group-checkable .list-group-item { + cursor: pointer; +} +.list-group-item-check { + position: absolute; + clip: rect(0, 0, 0, 0); +} +.list-group-item-check:hover + .list-group-item { + background-color: var(--bs-secondary-bg); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-primary); + border-color: var(--bs-primary); +} +.list-group-item-check[disabled] + .list-group-item, +.list-group-item-check:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} + +.list-group-radio .list-group-item { + cursor: pointer; + border-radius: .5rem; +} +.list-group-radio .form-check-input { + z-index: 2; + margin-top: -.5em; +} +.list-group-radio .list-group-item:hover, +.list-group-radio .list-group-item:focus { + background-color: var(--bs-secondary-bg); +} + +.list-group-radio .form-check-input:checked + .list-group-item { + background-color: var(--bs-body); + border-color: var(--bs-primary); + box-shadow: 0 0 0 2px var(--bs-primary); +} +.list-group-radio .form-check-input[disabled] + .list-group-item, +.list-group-radio .form-check-input:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html new file mode 100644 index 0000000..c554deb --- /dev/null +++ b/site/content/docs/5.3/examples/masonry/index.html @@ -0,0 +1,105 @@ +--- +layout: examples +title: Masonry example +extra_js: + - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" + integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" + async: true +--- + +
+

Bootstrap and Masonry

+

Integrate Masonry with the Bootstrap grid system and cards component.

+ +

Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

+ + 

+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+
+ +

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

+ +
+ +
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title that wraps to a new line
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+
+
Card title
+

This card has a regular title and short paragraph of text below it.

+

Last updated 3 mins ago

+
+
+
+
+
+ {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} +
+
+
+
+
+
+

A well-known quote, contained in a blockquote element.

+
+
+ Someone famous in Source Title +
+
+
+
+
+
+
+
Card title
+

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

+

Last updated 3 mins ago

+
+
+
+
+ +
diff --git a/site/content/docs/5.3/examples/modals/index.html b/site/content/docs/5.3/examples/modals/index.html new file mode 100644 index 0000000..5fcc2d2 --- /dev/null +++ b/site/content/docs/5.3/examples/modals/index.html @@ -0,0 +1,150 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
diff --git a/site/content/docs/5.3/examples/modals/modals.css b/site/content/docs/5.3/examples/modals/modals.css new file mode 100644 index 0000000..924952a --- /dev/null +++ b/site/content/docs/5.3/examples/modals/modals.css @@ -0,0 +1,8 @@ +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + diff --git a/site/content/docs/5.3/examples/navbar-bottom/index.html b/site/content/docs/5.3/examples/navbar-bottom/index.html new file mode 100644 index 0000000..92eed64 --- /dev/null +++ b/site/content/docs/5.3/examples/navbar-bottom/index.html @@ -0,0 +1,41 @@ +--- +layout: examples +title: Bottom navbar example +--- + +
+
+

Bottom Navbar example

+

This example is a quick exercise to illustrate how the bottom navbar works.

+ }}" role="button">View navbar docs » +
+
+ diff --git a/site/content/docs/5.3/examples/navbar-fixed/index.html b/site/content/docs/5.3/examples/navbar-fixed/index.html new file mode 100644 index 0000000..a2a1c75 --- /dev/null +++ b/site/content/docs/5.3/examples/navbar-fixed/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Fixed top navbar example +extra_css: + - "navbar-fixed.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css new file mode 100644 index 0000000..c77c0c1 --- /dev/null +++ b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css @@ -0,0 +1,5 @@ +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; +} diff --git a/site/content/docs/5.3/examples/navbar-static/index.html b/site/content/docs/5.3/examples/navbar-static/index.html new file mode 100644 index 0000000..2b1b308 --- /dev/null +++ b/site/content/docs/5.3/examples/navbar-static/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Top navbar example +extra_css: + - "navbar-static.css" +--- + + + +
+
+

Navbar example

+

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

+ }}" role="button">View navbar docs » +
+
diff --git a/site/content/docs/5.3/examples/navbar-static/navbar-static.css b/site/content/docs/5.3/examples/navbar-static/navbar-static.css new file mode 100644 index 0000000..25bbdde --- /dev/null +++ b/site/content/docs/5.3/examples/navbar-static/navbar-static.css @@ -0,0 +1,4 @@ +/* Show it's not fixed to the top */ +body { + min-height: 75rem; +} diff --git a/site/content/docs/5.3/examples/navbars-offcanvas/index.html b/site/content/docs/5.3/examples/navbars-offcanvas/index.html new file mode 100644 index 0000000..858998f --- /dev/null +++ b/site/content/docs/5.3/examples/navbars-offcanvas/index.html @@ -0,0 +1,147 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbars-offcanvas.css" +--- + +
+ + + + + + +
+
+
+

Navbar with offcanvas examples

+

This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the }}">top and }}">fixed top examples.

+

From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.

+

+ }}" role="button">Learn more about offcanvas navbars » +

+
+
+
+
diff --git a/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css new file mode 100644 index 0000000..70d2094 --- /dev/null +++ b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/5.3/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html new file mode 100644 index 0000000..4c903bb --- /dev/null +++ b/site/content/docs/5.3/examples/navbars/index.html @@ -0,0 +1,450 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbars.css" +--- + +
+ + + + + + + + + + + + + + + + + + +
+

Matching .container-xl...

+
+ + + +
+ + + + + + +
+
+
+

Navbar examples

+

This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the }}">top and }}">fixed top examples.

+

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

+

+ }}" role="button">View navbar docs » +

+
+
+
+
+
diff --git a/site/content/docs/5.3/examples/navbars/navbars.css b/site/content/docs/5.3/examples/navbars/navbars.css new file mode 100644 index 0000000..70d2094 --- /dev/null +++ b/site/content/docs/5.3/examples/navbars/navbars.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html new file mode 100644 index 0000000..f72583f --- /dev/null +++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html @@ -0,0 +1,140 @@ +--- +layout: examples +title: Offcanvas navbar template +extra_css: + - "offcanvas-navbar.css" +extra_js: + - src: "offcanvas-navbar.js" +body_class: "bg-body-tertiary" +aliases: "/docs/5.3/examples/offcanvas/" +--- + + + +
+ +
+ +
+
+ +
+

Bootstrap

+ Since 2011 +
+
+ +
+
Recent updates
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? +

+
+
+ {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + Some more representative placeholder content, related to this other user. Another status update, perhaps. +

+
+
+ {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} +

+ @username + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. +

+
+ + All updates + +
+ +
+
Suggestions
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} +
+
+ Full Name + Follow +
+ @username +
+
+ + All suggestions + +
+
diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css new file mode 100644 index 0000000..f855b96 --- /dev/null +++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css @@ -0,0 +1,52 @@ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +body { + padding-top: 56px; +} + +@media (max-width: 991.98px) { + .offcanvas-collapse { + position: fixed; + top: 56px; /* Height of navbar */ + bottom: 0; + left: 100%; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + overflow-y: auto; + visibility: hidden; + background-color: #343a40; + transition: transform .3s ease-in-out, visibility .3s ease-in-out; + } + .offcanvas-collapse.open { + visibility: visible; + transform: translateX(-100%); + } +} + +.nav-scroller .nav { + color: rgba(255, 255, 255, .75); +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; + color: #6c757d; +} + +.nav-scroller .nav-link:hover { + color: #007bff; +} + +.nav-scroller .active { + font-weight: 500; + color: #343a40; +} + +.bg-purple { + background-color: #6f42c1; +} diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js new file mode 100644 index 0000000..b97a171 --- /dev/null +++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js @@ -0,0 +1,7 @@ +(() => { + 'use strict' + + document.querySelector('#navbarSideCollapse').addEventListener('click', () => { + document.querySelector('.offcanvas-collapse').classList.toggle('open') + }) +})() diff --git a/site/content/docs/5.3/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html new file mode 100644 index 0000000..e4e7b8a --- /dev/null +++ b/site/content/docs/5.3/examples/pricing/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: Pricing example +extra_css: + - "pricing.css" +--- + + + + Check + + + + +
+
+
+ + Bootstrap + Pricing example + + + +
+ +
+

Pricing

+

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

+
+
+ +
+
+
+
+
+

Free

+
+
+

$0/mo

+
    +
  • 10 users included
    • +
  • 2 GB of storage
    • +
  • Email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Pro

+
+
+

$15/mo

+
    +
  • 20 users included
    • +
  • 10 GB of storage
    • +
  • Priority email support
    • +
  • Help center access
    • +
+ +
+
+
+
+
+
+

Enterprise

+
+
+

$29/mo

+
    +
  • 30 users included
    • +
  • 15 GB of storage
    • +
  • Phone and email support
    • +
  • Help center access
    • +
+ +
+
+
+
+ +

Compare plans

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FreeProEnterprise
Public
Private
Permissions
Sharing
Unlimited members
Extra security
+
+
+ + +
diff --git a/site/content/docs/5.3/examples/pricing/pricing.css b/site/content/docs/5.3/examples/pricing/pricing.css new file mode 100644 index 0000000..c65d020 --- /dev/null +++ b/site/content/docs/5.3/examples/pricing/pricing.css @@ -0,0 +1,11 @@ +body { + background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); +} + +.container { + max-width: 960px; +} + +.pricing-header { + max-width: 700px; +} diff --git a/site/content/docs/5.3/examples/product/index.html b/site/content/docs/5.3/examples/product/index.html new file mode 100644 index 0000000..a0ae98e --- /dev/null +++ b/site/content/docs/5.3/examples/product/index.html @@ -0,0 +1,189 @@ +--- +layout: examples +title: Product example +extra_css: + - "product.css" +--- + + + + + + + + + + + + + + + + +
+
+
+

Designed for engineers

+

Build anything you want with Aperture

+
+ + Learn more + + + + Buy + + +
+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+ + diff --git a/site/content/docs/5.3/examples/product/product.css b/site/content/docs/5.3/examples/product/product.css new file mode 100644 index 0000000..6c90ae5 --- /dev/null +++ b/site/content/docs/5.3/examples/product/product.css @@ -0,0 +1,74 @@ +.container { + max-width: 960px; +} + +.icon-link > .bi { + width: .75em; + height: .75em; +} + +/* + * Custom translucent site header + */ + +.site-header { + background-color: rgba(0, 0, 0, .85); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); +} +.site-header a { + color: #8e8e8e; + transition: color .15s ease-in-out; +} +.site-header a:hover { + color: #fff; + text-decoration: none; +} + +/* + * Dummy devices (replace them with your own or something else entirely!) + */ + +.product-device { + position: absolute; + right: 10%; + bottom: -30%; + width: 300px; + height: 540px; + background-color: #333; + border-radius: 21px; + transform: rotate(30deg); +} + +.product-device::before { + position: absolute; + top: 10%; + right: 10px; + bottom: 10%; + left: 10px; + content: ""; + background-color: rgba(255, 255, 255, .1); + border-radius: 5px; +} + +.product-device-2 { + top: -25%; + right: auto; + bottom: 0; + left: 5%; + background-color: #e5e5e5; +} + + +/* + * Extra utilities + */ + +.flex-equal > * { + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + flex: 1; + } +} diff --git a/site/content/docs/5.3/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html new file mode 100644 index 0000000..ee1edc1 --- /dev/null +++ b/site/content/docs/5.3/examples/sidebars/index.html @@ -0,0 +1,356 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + +
+

Sidebars examples

+ +
+ + + Sidebar + +
+ +
+
+ + +
+
+ +
+ +
+ + + Sidebar + +
+ +
+
+ + +
+
+ +
+ +
+ + + + + +
+ + +
+
+ +
+ +
+ + + Collapsible + + +
+ +
+ +
+ + + List group + +
+ +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ +
+
+ +
+
diff --git a/site/content/docs/5.3/examples/sidebars/sidebars.css b/site/content/docs/5.3/examples/sidebars/sidebars.css new file mode 100644 index 0000000..f6a8f1c --- /dev/null +++ b/site/content/docs/5.3/examples/sidebars/sidebars.css @@ -0,0 +1,63 @@ +body { + min-height: 100vh; + min-height: -webkit-fill-available; +} + +html { + height: -webkit-fill-available; +} + +main { + height: 100vh; + height: -webkit-fill-available; + max-height: 100vh; + overflow-x: auto; + overflow-y: hidden; +} + +.dropdown-toggle { outline: 0; } + +.btn-toggle { + padding: .25rem .5rem; + font-weight: 600; + color: var(--bs-emphasis-color); + background-color: transparent; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(var(--bs-emphasis-color-rgb), .85); + background-color: var(--bs-tertiary-bg); +} + +.btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +[data-bs-theme="dark"] .btn-toggle::before { + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(var(--bs-emphasis-color-rgb), .85); +} +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; +} +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: var(--bs-tertiary-bg); +} + +.scrollarea { + overflow-y: auto; +} diff --git a/site/content/docs/5.3/examples/sidebars/sidebars.js b/site/content/docs/5.3/examples/sidebars/sidebars.js new file mode 100644 index 0000000..4075f1f --- /dev/null +++ b/site/content/docs/5.3/examples/sidebars/sidebars.js @@ -0,0 +1,8 @@ +/* global bootstrap: false */ +(() => { + 'use strict' + const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + tooltipTriggerList.forEach(tooltipTriggerEl => { + new bootstrap.Tooltip(tooltipTriggerEl) + }) +})() diff --git a/site/content/docs/5.3/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html new file mode 100644 index 0000000..8420c45 --- /dev/null +++ b/site/content/docs/5.3/examples/sign-in/index.html @@ -0,0 +1,32 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "sign-in.css" +body_class: "d-flex align-items-center py-4 bg-body-tertiary" +--- + +
+
+ +

Please sign in

+ +
+ + +
+
+ + +
+ +
+ + +
+ +

© 2017–{{< year >}}

+
+
diff --git a/site/content/docs/5.3/examples/sign-in/sign-in.css b/site/content/docs/5.3/examples/sign-in/sign-in.css new file mode 100644 index 0000000..641f6d9 --- /dev/null +++ b/site/content/docs/5.3/examples/sign-in/sign-in.css @@ -0,0 +1,25 @@ +html, +body { + height: 100%; +} + +.form-signin { + max-width: 330px; + padding: 1rem; +} + +.form-signin .form-floating:focus-within { + z-index: 2; +} + +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html new file mode 100644 index 0000000..0a24a1e --- /dev/null +++ b/site/content/docs/5.3/examples/starter-template/index.html @@ -0,0 +1,107 @@ +--- +layout: examples +title: Starter Template +--- + + + + + + + Bootstrap + + + + +
+
+ + + Starter template + +
+ +
+

Get started with Bootstrap

+

Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

+ +
+ }}" class="btn btn-primary btn-lg px-4">Download examples +
+ +
+ +
+
+

Starter projects

+

Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

+ +
+ +
+

Guides

+

Read more detailed instructions and documentation on using or contributing to Bootstrap.

+ +
+
+
+
+ Created by the Bootstrap team · © {{< year >}} +
+
diff --git a/site/content/docs/5.3/examples/sticky-footer-navbar/index.html b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html new file mode 100644 index 0000000..75b99cd --- /dev/null +++ b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: + - "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +
+ + +
+ + +
+
+

Sticky footer with fixed navbar

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

+

Back to }}">the default sticky footer minus the navbar.

+
+
+ +
+
+ Place sticky footer content here. +
+
diff --git a/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 0000000..3087ead --- /dev/null +++ b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,7 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +main > .container { + padding: 60px 15px 0; +} diff --git a/site/content/docs/5.3/examples/sticky-footer/index.html b/site/content/docs/5.3/examples/sticky-footer/index.html new file mode 100644 index 0000000..631adda --- /dev/null +++ b/site/content/docs/5.3/examples/sticky-footer/index.html @@ -0,0 +1,23 @@ +--- +layout: examples +title: Sticky Footer Template +extra_css: + - "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + + +
+
+

Sticky footer

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Use }}">the sticky footer with a fixed navbar if need be, too.

+
+
+ +
+
+ Place sticky footer content here. +
+
diff --git a/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css new file mode 100644 index 0000000..f8be437 --- /dev/null +++ b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css @@ -0,0 +1,9 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} diff --git a/site/content/docs/5.3/extend/approach.md b/site/content/docs/5.3/extend/approach.md new file mode 100644 index 0000000..392aef4 --- /dev/null +++ b/site/content/docs/5.3/extend/approach.md @@ -0,0 +1,86 @@ +--- +layout: docs +title: Approach +description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself. +group: extend +aliases: + - "/docs/5.3/extend/" +--- + +While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve. + +See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you. + +## Summary + +We'll dive into each of these more throughout, but at a high level, here's what guides our approach. + +- Components should be responsive and mobile-first +- Components should be built with a base class and extended via modifier classes +- Component states should obey a common z-index scale +- Whenever possible, prefer an HTML and CSS implementation over JavaScript +- Whenever possible, use utilities over custom styles +- Whenever possible, avoid enforcing strict HTML requirements (children selectors) + +## Responsive + +Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger. + +Across Bootstrap, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up. + +At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time. + +## Classes + +Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override. + +As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc. + +Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you're actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants. + +## z-index scales + +There are two `z-index` scales in Bootstrap—elements within a component and overlay components. + +### Component elements + +- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination. +- These components share a standard `z-index` scale of `0` through `3`. +- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`. +- This approach matches our expectations of highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered. + +### Overlay components + +Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project's custom styles. + +Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars. + +Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}). + +## HTML and CSS over JS + +Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you. + +This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}). + +Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `
+{{< /example >}} + +To set a custom height on your ` + +
+{{< /example >}} + +## Selects + +Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike ``s, they'll always show the `
+ + + +