From 2d07383e32b7ad9ebad43e85ebdeb891dd0d105c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 Dec 2021 09:20:48 +0100 Subject: docs: Use param to set Bootstrap version in Contents page (#35556) --- site/content/docs/5.1/getting-started/contents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md index 4e86d5592..07f6bdb98 100644 --- a/site/content/docs/5.1/getting-started/contents.md +++ b/site/content/docs/5.1/getting-started/contents.md @@ -171,7 +171,7 @@ bootstrap/ ├── site/ │ └──content/ │ └── docs/ -│ └── 5.1/ +│ └── {{< param docs_version >}}/ │ └── examples/ ├── js/ └── scss/ -- cgit v1.2.3 From d581737f784d144a961d61248d42f59440159571 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 11 Jan 2022 11:17:12 +0200 Subject: Update cspell config (#35647) * specify the files to scan in the config * enable `useGitignore` option * remove a few unneeded suppressions --- site/content/docs/5.1/getting-started/rtl.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/rtl.md b/site/content/docs/5.1/getting-started/rtl.md index b1a0534cf..19d9d4141 100644 --- a/site/content/docs/5.1/getting-started/rtl.md +++ b/site/content/docs/5.1/getting-started/rtl.md @@ -111,7 +111,7 @@ dt { In the case you're using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use `/*rtl:insert: {value}*/` in your font stack to modify the names of font families. -For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue Arabic` for RTL, your Sass code look like this: +For example, to switch from `Helvetica Neue` font for LTR to `Helvetica Neue Arabic` for RTL, your Sass code could look like this: ```scss $font-family-sans-serif: -- cgit v1.2.3 From d16088d5d1ec2de56a301fbb8e1a227ae7eb5ece Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Mar 2022 11:29:52 -0800 Subject: Redesign the "Added in" badges in the docs (#35980) Co-authored-by: XhmikosR --- site/content/docs/5.1/getting-started/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md index b2fe767d7..6bc972bee 100644 --- a/site/content/docs/5.1/getting-started/introduction.md +++ b/site/content/docs/5.1/getting-started/introduction.md @@ -1,7 +1,7 @@ --- layout: docs title: Introduction -description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. +description: Get started with Bootstrap via CDN and a template starter page. group: getting-started aliases: - "/docs/5.1/getting-started/" -- cgit v1.2.3 From a9a89debc7535a1c5857ced28c1002a2f682889f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Mar 2022 00:38:04 -0700 Subject: Rewrite docs tables in Markdown with table shortcode (#31337) Co-authored-by: XhmikosR Co-authored-by: GeoSot --- .../docs/5.1/getting-started/browsers-devices.md | 69 +++------------ site/content/docs/5.1/getting-started/contents.md | 99 +++------------------- .../content/docs/5.1/getting-started/contribute.md | 54 ++---------- 3 files changed, 35 insertions(+), 187 deletions(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md index bdda154a3..41885feaa 100644 --- a/site/content/docs/5.1/getting-started/browsers-devices.md +++ b/site/content/docs/5.1/getting-started/browsers-devices.md @@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende 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. - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxSafariAndroid Browser & WebView
AndroidSupportedSupported—v6.0+
iOSSupportedSupportedSupported—
+{{< bs-table "table" >}} +| | Chrome | Firefox | Safari | Android Browser & WebView | +| --- | --- | --- | --- | --- | +| **Android** | Supported | Supported | — | v6.0+ | +| **Windows** | Supported | Supported | Supported | — | +{{< /bs-table >}} ### Desktop browsers Similarly, the latest versions of most desktop browsers are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxMicrosoft EdgeOperaSafari
MacSupportedSupportedSupportedSupportedSupported
WindowsSupportedSupportedSupportedSupported—
+{{< 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. diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md index 07f6bdb98..b9b92506c 100644 --- a/site/content/docs/5.1/getting-started/contents.md +++ b/site/content/docs/5.1/getting-started/contents.md @@ -68,96 +68,25 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us Bootstrap includes a handful of options for including some or all of our compiled CSS. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS filesLayoutContentComponentsUtilities
-
bootstrap.css
-
bootstrap.rtl.css
-
bootstrap.min.css
-
bootstrap.rtl.min.css
- 		IncludedIncludedIncludedIncluded
-
bootstrap-grid.css
-
bootstrap-grid.rtl.css
-
bootstrap-grid.min.css
-
bootstrap-grid.rtl.min.css
- 		}}">Only grid system——}}">Only flex utilities
-
bootstrap-utilities.css
-
bootstrap-utilities.rtl.css
-
bootstrap-utilities.min.css
-
bootstrap-utilities.rtl.min.css
- 		———Included
-
bootstrap-reboot.css
-
bootstrap-reboot.rtl.css
-
bootstrap-reboot.min.css
-
bootstrap-reboot.rtl.min.css
- 		—}}">Only Reboot——
+{{< bs-table "table" >}} +| CSS files | Layout | Content | Components | Utilities | +| --- | --- | --- | --- | --- | +| `bootstrap.css`
`bootstrap.min.css`
`bootstrap.rtl.css`
`bootstrap.rtl.min.css` | Included | Included | Included | Included | +| `bootstrap-grid.css`
`bootstrap-grid.rtl.css`
`bootstrap-grid.min.css`
`bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +| `bootstrap-utilities.css`
`bootstrap-utilities.rtl.css`
`bootstrap-utilities.min.css`
`bootstrap-utilities.rtl.min.css` | — | — | — | Included | +| `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +{{< /bs-table >}} ## JS files Similarly, we have options for including some or all of our compiled JavaScript. - - - - - - - - - - - - - - - - - -
JS filesPopper
-
bootstrap.bundle.js
-
bootstrap.bundle.min.js
- 		Included
-
bootstrap.js
-
bootstrap.min.js
- 		—
+{{< bs-table "table" >}} +| JS Files | Popper | +| --- | --- | +| `bootstrap.bundle.js`
`bootstrap.bundle.min.js`
| Included | +| `bootstrap.js`
`bootstrap.min.js`
| – | +{{< /bs-table >}} ## Bootstrap source code diff --git a/site/content/docs/5.1/getting-started/contribute.md b/site/content/docs/5.1/getting-started/contribute.md index 337bb2a43..67fe67f94 100644 --- a/site/content/docs/5.1/getting-started/contribute.md +++ b/site/content/docs/5.1/getting-started/contribute.md @@ -23,48 +23,14 @@ When completed, you'll be able to run the various commands provided from the com Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:** - - - - - - - - - - - - - - - - - - - - - - - - - -
TaskDescription
- npm start - - Compiles CSS and JavaScript, builds the documentation, and starts a local server. -
- npm run dist - - Creates the dist/ directory with compiled files. Requires Sass, Autoprefixer, and terser. -
- npm test - - Runs tests locally after running npm run dist -
- npm run docs-serve - - Builds and runs the documentation locally. -
+{{< bs-table >}} +| Task | Description | +| --- | --- | +| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. | +| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). | +| `npm test` | Runs tests locally after running `npm run dist` | +| `npm run docs-serve` | Builds and runs the documentation locally. | +{{< /bs-table >}} {{< callout info >}} {{< partial "callout-info-npm-starter.md" >}} @@ -78,7 +44,7 @@ Dart Sass uses a rounding precision of 10 and for efficiency reasons does not al ## Autoprefixer -Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. +Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details. @@ -99,5 +65,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc ## Troubleshooting Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`. - -[autoprefixer]: https://github.com/postcss/autoprefixer -- cgit v1.2.3 From 5b31463e35bc9af18fabb30f76186c0e77ea2b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 6 Apr 2022 15:42:05 +0200 Subject: Doc: Reorder alphabetically lists of components --- site/content/docs/5.1/getting-started/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md index 6bc972bee..e12ea9687 100644 --- a/site/content/docs/5.1/getting-started/introduction.md +++ b/site/content/docs/5.1/getting-started/introduction.md @@ -62,9 +62,9 @@ Curious which components explicitly require our JavaScript and Popper? Click the - Modals for displaying, positioning, and scroll behavior - Navbar for extending our Collapse plugin to implement responsive behavior - Offcanvases for displaying, positioning, and scroll behavior +- Scrollspy for scroll behavior and navigation updates - Toasts for displaying and dismissing - Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/)) -- Scrollspy for scroll behavior and navigation updates {{< /markdown >}} -- cgit v1.2.3 From 1fed10dfb15aeb6c09b9c7f81ffe9214186ff48a Mon Sep 17 00:00:00 2001 From: Anthony Perez <43166263+anthonypz@users.noreply.github.com> Date: Wed, 16 Mar 2022 13:51:52 -0700 Subject: Update parcel.md Following the Parcel v1 installation guide seems to install the latest version of Parcel (v2), which makes several instructions in this guide throw errors. Therefore, I have updated the guide to work with version 2 of Parcel. Change Details: 1) Update the URL to point to the latest doc pages. 2) Use the `type="module"` HTML attribute to reference a module [migration](https://parceljs.org/getting-started/migration/#code-changes) 3) The `--out-dir ` CLI parameter has been changed to `--dist-dir ` [CLI](https://parceljs.org/features/cli/#parameters) 4) For a reason I'm unsure of, `--experimental-scope-hoisting` throws the following error: `error: unknown option '--experimental-scope-hoisting'`, so I removed it to get the build to work. --- site/content/docs/5.1/getting-started/parcel.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md index 23aab0054..fe5d9da32 100644 --- a/site/content/docs/5.1/getting-started/parcel.md +++ b/site/content/docs/5.1/getting-started/parcel.md @@ -8,7 +8,7 @@ toc: true ## Install Parcel -Install [Parcel Bundler](https://en.parceljs.org/getting_started.html). +Install [Parcel Bundler](https://parceljs.org/getting-started/webapp/). ## Install Bootstrap @@ -65,7 +65,7 @@ Include `src/index.js` before the closing `` tag. - + ``` @@ -78,7 +78,7 @@ Add `dev` and `build` scripts in your `package.json` file. "scripts": { "dev": "parcel ./src/index.html", "prebuild": "npx rimraf build", - "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build" + "build": "parcel build --public-url ./ ./src/index.html --dist-dir build" } ``` -- cgit v1.2.3 From fc87624a5002177eb590101a087e0c03a68f73c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 20 Apr 2022 22:27:28 -0700 Subject: Rewrite Getting Started > Introduction page to be more guide-like (#36204) * Rewrite Getting Started > Introduction page to be more guide-like * Add tabs, mention offcanvas for navbar --- .../docs/5.1/getting-started/introduction.md | 130 ++++++++++----------- 1 file changed, 65 insertions(+), 65 deletions(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md index e12ea9687..70bfdc704 100644 --- a/site/content/docs/5.1/getting-started/introduction.md +++ b/site/content/docs/5.1/getting-started/introduction.md @@ -1,7 +1,7 @@ --- layout: docs -title: Introduction -description: Get started with Bootstrap via CDN and a template starter page. +title: Get started with Bootstrap +description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. group: getting-started aliases: - "/docs/5.1/getting-started/" @@ -12,42 +12,77 @@ toc: true ## Quick start -Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}). +Get started by including Bootstrap's production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). -### CSS +
-Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS. +1. **Create a new `index.html` file in your project root.** Include the `}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> -``` + ```html + + + + + + Bootstrap demo + + +

Hello, world!

+ + + ``` -### JS +2. **Include Bootstrap's CSS and JS.** Place the `` tag in the `` for our CSS, and the ` + + + ``` -#### Bundle + You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper. -Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section. + ```html + + + ``` -```html - -``` +3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]({{< docsref "/layout/grid" >}}), adding dozens of [components]({{< docsref "/components/buttons" >}}), and utilizing [our official examples]({{< docsref "/examples" >}}). -#### Separate +## CDN links -If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins. +As reference, here are our primary CDN links. -```html - - -``` +{{< bs-table >}} +| Description | URL | +| --- | --- | +| CSS | `{{< param "cdn.css" >}}` | +| JS | `{{< param "cdn.js_bundle" >}}` | +{{< /bs-table >}} + +You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}). + +## Next steps + +- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes. + +- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) and the list of [components that require JavaScript](#js-components) below. -#### Modules +- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}). -If you use ` - - - - - -``` - -For next steps, visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components. - ## Important globals -Bootstrap employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in. +Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in. ### HTML5 doctype -Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups. +Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky and incomplete styling. ```html @@ -121,13 +121,13 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun ### Responsive meta tag -Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your ``. +Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your ``. ```html ``` -You can see an example of this in action in the [starter template](#starter-template). +You can see an example of this in action in the [quick start](#quick-start). ### Box-sizing -- cgit v1.2.3 From 00d45b11e7088981d52027df65bebf7f5e4c6050 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 26 Apr 2022 19:38:41 +0300 Subject: Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter --- .../content/docs/5.1/getting-started/javascript.md | 42 +++++++++++----------- site/content/docs/5.1/getting-started/parcel.md | 1 + site/content/docs/5.1/getting-started/webpack.md | 8 +++-- 3 files changed, 28 insertions(+), 23 deletions(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index 8ee428921..5e4321034 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -59,9 +59,9 @@ Bootstrap provides custom events for most plugins' unique actions. Generally, th All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`. ```js -var myModal = document.getElementById('myModal') +const myModal = document.getElementById('myModal') -myModal.addEventListener('show.bs.modal', function (event) { +myModal.addEventListener('show.bs.modal', event => { if (!data) { return event.preventDefault() // stops modal from being shown } @@ -74,7 +74,7 @@ myModal.addEventListener('show.bs.modal', function (event) { Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on ``. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`. ```js -$('#myTab a').on('shown.bs.tab', function () { +$('#myTab a').on('shown.bs.tab', () => { // do something... }) ``` @@ -85,10 +85,10 @@ $('#myTab a').on('shown.bs.tab', function () { All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior): ```js -var myModalEl = document.getElementById('myModal') +const myModalEl = document.getElementById('myModal') -var modal = new bootstrap.Modal(myModalEl) // initialized with defaults -var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard +const modal = new bootstrap.Modal(myModalEl) // initialized with defaults +const modal1 = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard ``` If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`. @@ -98,8 +98,8 @@ If you'd like to get a particular plugin instance, each plugin exposes a `getIns You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only. ```js -var modal = new bootstrap.Modal('#myModal') -var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') +const modal = new bootstrap.Modal('#myModal') +const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') ``` ### Asynchronous functions and transitions @@ -109,9 +109,9 @@ All programmatic API methods are **asynchronous** and return to the caller once In order to execute an action once the transition is complete, you can listen to the corresponding event. ```js -var myCollapseEl = document.getElementById('myCollapse') +const myCollapseEl = document.getElementById('myCollapse') -myCollapseEl.addEventListener('shown.bs.collapse', function (event) { +myCollapseEl.addEventListener('shown.bs.collapse', event => { // Action to execute once the collapsible area is expanded }) ``` @@ -119,10 +119,10 @@ myCollapseEl.addEventListener('shown.bs.collapse', function (event) { In addition a method call on a **transitioning component will be ignored**. ```js -var myCarouselEl = document.getElementById('myCarousel') -var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance +const myCarouselEl = document.getElementById('myCarousel') +const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance -myCarouselEl.addEventListener('slid.bs.carousel', function (event) { +myCarouselEl.addEventListener('slid.bs.carousel', event => { carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished }) @@ -144,7 +144,7 @@ bootstrap.Modal.Default.keyboard = false Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of. ```js -var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value +const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality ``` @@ -173,8 +173,8 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep The default `allowList` value is the following: ```js -var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i -var DefaultAllowlist = { +const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i +const DefaultAllowlist = { // Global attributes allowed on any supplied element below. '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], a: ['target', 'href', 'title', 'rel'], @@ -212,7 +212,7 @@ var DefaultAllowlist = { If you want to add new values to this default `allowList` you can do the following: ```js -var myDefaultAllowList = bootstrap.Tooltip.Default.allowList +const myDefaultAllowList = bootstrap.Tooltip.Default.allowList // To allow table elements myDefaultAllowList.table = [] @@ -222,16 +222,16 @@ myDefaultAllowList.td = ['data-bs-option'] // You can push your custom regex to validate your attributes. // Be careful about your regular expressions being too lax -var myCustomRegex = /^data-my-app-[\w-]+/ +const myCustomRegex = /^data-my-app-[\w-]+/ myDefaultAllowList['*'].push(myCustomRegex) ``` If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following: ```js -var yourTooltipEl = document.getElementById('yourTooltip') -var tooltip = new bootstrap.Tooltip(yourTooltipEl, { - sanitizeFn: function (content) { +const yourTooltipEl = document.getElementById('yourTooltip') +const tooltip = new bootstrap.Tooltip(yourTooltipEl, { + sanitizeFn(content) { return DOMPurify.sanitize(content) } }) diff --git a/site/content/docs/5.1/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md index fe5d9da32..fe83f381a 100644 --- a/site/content/docs/5.1/getting-started/parcel.md +++ b/site/content/docs/5.1/getting-started/parcel.md @@ -36,6 +36,7 @@ project-name/ Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually `src/index.js`). You can import all our plugins in one file or separately if you require only a subset of them. + ```js // Import all plugins import * as bootstrap from 'bootstrap'; diff --git a/site/content/docs/5.1/getting-started/webpack.md b/site/content/docs/5.1/getting-started/webpack.md index b87460ebe..3c6c86504 100644 --- a/site/content/docs/5.1/getting-started/webpack.md +++ b/site/content/docs/5.1/getting-started/webpack.md @@ -14,6 +14,7 @@ toc: true Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`): + ```js import 'bootstrap'; @@ -23,6 +24,7 @@ import * as bootstrap from 'bootstrap'; Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed: + ```js import Alert from 'bootstrap/js/dist/alert'; @@ -48,6 +50,7 @@ First, create your own `_custom.scss` and use it to override the [built-in custo For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar: + ```js // ... { @@ -66,8 +69,8 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s // if you use postcss 7.x skip the key postcssOptions: { // postcss plugins, can be exported to postcss.config.js - plugins: function () { - return [ + plugins: () => { + [ require('autoprefixer') ]; } @@ -85,6 +88,7 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point: + ```js import 'bootstrap/dist/css/bootstrap.min.css'; ``` -- cgit v1.2.3 From ebb1f485d3e750a67ac7633e5044f2fce0749afe Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Fri, 29 Apr 2022 16:38:30 -0400 Subject: Document incompatibilities between Bootstrap JS and React/.etc (#36217) * Document incompatibilities between Bootstrap JS and React/.etc Closes #35665. * Remove link to reactstrap * Update javascript.md Co-authored-by: Mark Otto --- site/content/docs/5.1/getting-started/javascript.md | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index 5e4321034..b4d8cbff1 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -12,6 +12,16 @@ Plugins can be included individually (using Bootstrap's individual `js/dist/*.js If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready. +## Usage with JavaScript frameworks + +While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScript is not fully compatible with frameworks like React, Vue, and Angular** which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the "open" position. + +A better alternative for those using React and similar frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: + +- React: [react-bootstrap](https://react-bootstrap.github.io/) +- Vue: [BootstrapVue](https://bootstrap-vue.org/) +- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) + ## Using Bootstrap as a module We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module). -- cgit v1.2.3 From 207ddbee4946fa43cef07ab44aa0d00e48fef0f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=AA=E5=BF=83=E7=A6=BE?= Date: Sat, 30 Apr 2022 13:07:00 +0800 Subject: Update path to `@popperjs/core` in parcel.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -│ └── popper.js/ +│ └── @popperjs/ +| └── core/ --- site/content/docs/5.1/getting-started/parcel.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md index fe83f381a..4bdd119e6 100644 --- a/site/content/docs/5.1/getting-started/parcel.md +++ b/site/content/docs/5.1/getting-started/parcel.md @@ -23,7 +23,8 @@ project-name/ ├── build/ ├── node_modules/ │ └── bootstrap/ -│ └── popper.js/ +│ └── @popperjs/ +| └── core/ ├── scss/ │ └── custom.scss ├── src/ -- cgit v1.2.3 From 795167d822d3752ef2ad4f6e716a37e0270c741e Mon Sep 17 00:00:00 2001 From: cccabinet Date: Tue, 10 May 2022 21:08:49 +0900 Subject: Fix contents.md --- site/content/docs/5.1/getting-started/contents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md index b9b92506c..a83b65ee3 100644 --- a/site/content/docs/5.1/getting-started/contents.md +++ b/site/content/docs/5.1/getting-started/contents.md @@ -74,7 +74,7 @@ Bootstrap includes a handful of options for including some or all of our compile | `bootstrap.css`
`bootstrap.min.css`
`bootstrap.rtl.css`
`bootstrap.rtl.min.css` | Included | Included | Included | Included | | `bootstrap-grid.css`
`bootstrap-grid.rtl.css`
`bootstrap-grid.min.css`
`bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | | `bootstrap-utilities.css`
`bootstrap-utilities.rtl.css`
`bootstrap-utilities.min.css`
`bootstrap-utilities.rtl.min.css` | — | — | — | Included | -| `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +| `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | {{< /bs-table >}} ## JS files -- cgit v1.2.3 From 88a6610895c05d05f4710d0783eb5ea2f30294fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 11 May 2022 20:51:00 +0200 Subject: Minor changes in 'Usage with JavaScript frameworks' description --- site/content/docs/5.1/getting-started/javascript.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index b4d8cbff1..fd676cf42 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -14,11 +14,11 @@ If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files whi ## Usage with JavaScript frameworks -While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScript is not fully compatible with frameworks like React, Vue, and Angular** which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the "open" position. +While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular** which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the "open" position. -A better alternative for those using React and similar frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: +A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: -- React: [react-bootstrap](https://react-bootstrap.github.io/) +- React: [React Bootstrap](https://react-bootstrap.github.io/) - Vue: [BootstrapVue](https://bootstrap-vue.org/) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) -- cgit v1.2.3 From f7e8ca91e03165abb82d4c82555dc4ef96340cc9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 May 2022 23:57:58 +0300 Subject: Prepare v5.2.0-beta1 --- .../docs/5.1/getting-started/accessibility.md | 62 ------ .../docs/5.1/getting-started/best-practices.md | 20 -- .../docs/5.1/getting-started/browsers-devices.md | 79 ------- site/content/docs/5.1/getting-started/contents.md | 109 --------- .../content/docs/5.1/getting-started/contribute.md | 67 ------ site/content/docs/5.1/getting-started/download.md | 119 ---------- .../docs/5.1/getting-started/introduction.md | 162 -------------- .../content/docs/5.1/getting-started/javascript.md | 248 --------------------- site/content/docs/5.1/getting-started/parcel.md | 101 --------- site/content/docs/5.1/getting-started/rfs.md | 86 ------- site/content/docs/5.1/getting-started/rtl.md | 182 --------------- site/content/docs/5.1/getting-started/webpack.md | 112 ---------- 12 files changed, 1347 deletions(-) delete mode 100644 site/content/docs/5.1/getting-started/accessibility.md delete mode 100644 site/content/docs/5.1/getting-started/best-practices.md delete mode 100644 site/content/docs/5.1/getting-started/browsers-devices.md delete mode 100644 site/content/docs/5.1/getting-started/contents.md delete mode 100644 site/content/docs/5.1/getting-started/contribute.md delete mode 100644 site/content/docs/5.1/getting-started/download.md delete mode 100644 site/content/docs/5.1/getting-started/introduction.md delete mode 100644 site/content/docs/5.1/getting-started/javascript.md delete mode 100644 site/content/docs/5.1/getting-started/parcel.md delete mode 100644 site/content/docs/5.1/getting-started/rfs.md delete mode 100644 site/content/docs/5.1/getting-started/rtl.md delete mode 100644 site/content/docs/5.1/getting-started/webpack.md (limited to 'site/content/docs/5.1/getting-started') diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md deleted file mode 100644 index e9f1cb316..000000000 --- a/site/content/docs/5.1/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.1/getting-started/best-practices.md b/site/content/docs/5.1/getting-started/best-practices.md deleted file mode 100644 index e17fc1290..000000000 --- a/site/content/docs/5.1/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 [Slack](https://bootstrap-slack.herokuapp.com/) diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md deleted file mode 100644 index 41885feaa..000000000 --- a/site/content/docs/5.1/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+ | -| **Windows** | 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 `