diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/getting-started')
7 files changed, 79 insertions, 108 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md index dc550ecb9..f75fed85c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md @@ -29,8 +29,8 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor {{< bs-table "table" >}} | | Chrome | Firefox | Safari | Android Browser & WebView | | --- | --- | --- | --- | --- | -| **Android** | Supported | Supported | <span class="text-muted">—</span> | v6.0+ | -| **iOS** | Supported | Supported | Supported | <span class="text-muted">—</span> | +| **Android** | Supported | Supported | <span class="text-body-secondary">—</span> | v6.0+ | +| **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">—</span> | {{< /bs-table >}} ### Desktop browsers @@ -41,7 +41,7 @@ Similarly, the latest versions of most desktop browsers are supported. | | Chrome | Firefox | Microsoft Edge | Opera | Safari | | --- | --- | --- | --- | --- | --- | | **Mac** | Supported | Supported | Supported | Supported | Supported | -| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">—</span> | +| **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">—</span> | {{< /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/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md index a4192fb65..d296d18ff 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md @@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun </html> ``` -### Responsive meta tag +### Viewport meta 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 `<head>`. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md index 80eed9ce1..ef3c3ba64 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md @@ -30,6 +30,7 @@ A better alternative for those using this type of frameworks is to use a framewo 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 the browser, if your [targeted browsers support it](https://caniuse.com/es6-module). +<!-- eslint-skip --> ```html <script type="module"> import { Toast } from 'bootstrap.esm.min.js' @@ -54,6 +55,7 @@ Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relativ To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper: +<!-- eslint-skip --> ```html <!doctype html> <html lang="en"> @@ -65,13 +67,13 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to </head> <body> <h1>Hello, modularity!</h1> - <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> + <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script> <script type="importmap"> { "imports": { - "@popperjs/core": "{{< param "cdn.popper" >}}", + "@popperjs/core": "{{< param "cdn.popper_esm" >}}", "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" } } @@ -231,42 +233,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep The default `allowList` value is the following: -```js -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'], - area: [], - b: [], - br: [], - col: [], - code: [], - div: [], - em: [], - hr: [], - h1: [], - h2: [], - h3: [], - h4: [], - h5: [], - h6: [], - i: [], - img: ['src', 'srcset', 'alt', 'title', 'width', 'height'], - li: [], - ol: [], - p: [], - pre: [], - s: [], - small: [], - span: [], - sub: [], - sup: [], - strong: [], - u: [], - ul: [] -} -``` +{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}} If you want to add new values to this default `allowList` you can do the following: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md index 833b07713..36619e7b2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Parcel" +title: Bootstrap and Parcel description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel. group: getting-started toc: true @@ -123,7 +123,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md index f4abf050b..156f20563 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md @@ -13,9 +13,7 @@ We recommend getting familiar with Bootstrap first by reading through our [Getti You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL. {{< callout warning >}} -### Experimental feature - -The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights. +**Bootstrap's RTL feature is still experimental** and will evolve based on user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights. {{< /callout >}} ## Required HTML @@ -163,9 +161,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction. {{< callout warning >}} -#### Edge cases and known limitations - -While this approach is understandable, please pay attention to the following: +**Edge cases and known limitations** to consider when working with a combined LTR and RTL implementation: 1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly. 2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/). diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md index 4086316d3..b62e6190d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Vite" +title: Bootstrap and Vite description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite. group: getting-started toc: true @@ -82,6 +82,9 @@ With dependencies installed and our project folder ready for us to start coding, export default { root: path.resolve(__dirname, 'src'), + build: { + outDir: '../dist' + }, server: { port: 8080, hot: true @@ -98,13 +101,13 @@ With dependencies installed and our project folder ready for us to start coding, <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Vite</title> + <script type="module" src="./js/main.js"></script> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Vite!</h1> <button class="btn btn-primary">Primary button</button> </div> - <script type="module" src="./js/main.js"></script> </body> </html> ``` @@ -136,36 +139,16 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s ## Import Bootstrap -1. **Set up Bootstrap's Sass import in `vite.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `resolve` section—we use this to add an alias to our source files inside `node_modules` to keep imports as simple as possible. - - <!-- eslint-skip --> - ```js - const path = require('path') - - export default { - root: path.resolve(__dirname, 'src'), - resolve: { - alias: { - '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), - } - }, - server: { - port: 8080, - hot: true - } - } - ``` - -2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass. +1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass. ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* -3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. +2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. <!-- eslint-skip --> ```js @@ -188,7 +171,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md index 870e070e3..bd539b891 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Webpack" +title: Bootstrap and Webpack description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack. group: getting-started toc: true @@ -24,10 +24,10 @@ We're building a Webpack project with Bootstrap from scratch, so there are some npm init -y ``` -2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. We use `--save-dev` to signal that these dependencies are only for development use and not for production. +2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production. ```sh - npm i --save-dev webpack webpack-cli webpack-dev-server + npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here. @@ -49,21 +49,20 @@ Now that we have all the necessary dependencies installed, we can get to work cr We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below. ```sh -mkdir {dist,src,src/js,src/scss} -touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js +mkdir {src,src/js,src/scss} +touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js ``` When you're done, your complete project should look like this: ```text my-project/ -├── dist/ -│ └── index.html ├── src/ │ ├── js/ │ │ └── main.js -│ └── scss/ -│ └── styles.scss +│ ├── scss/ +│ │ └── styles.scss +│ └── index.html ├── package-lock.json ├── package.json └── webpack.config.js @@ -78,9 +77,13 @@ With dependencies installed and our project folder ready for us to start coding, 1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload). ```js + 'use strict' + const path = require('path') + const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { + mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', @@ -90,11 +93,14 @@ With dependencies installed and our project folder ready for us to start coding, static: path.resolve(__dirname, 'dist'), port: 8080, hot: true - } + }, + plugins: [ + new HtmlWebpackPlugin({ template: './src/index.html' }) + ] } ``` -2. **Next we fill in our `dist/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step. +2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step. ```html <!doctype html> @@ -109,20 +115,20 @@ With dependencies installed and our project folder ready for us to start coding, <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn btn-primary">Primary button</button> </div> - <script src="./main.js"></script> </body> </html> ``` We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack. -3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. +3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project. ```json { // ... "scripts": { - "start": "webpack serve --mode development", + "start": "webpack serve", + "build": "webpack build --mode=production", "test": "echo \"Error: no test specified\" && exit 1" }, // ... @@ -146,9 +152,14 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first 1. **Set up the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section. ```js + 'use strict' + const path = require('path') + const autoprefixer = require('autoprefixer') + const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { + mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', @@ -159,28 +170,35 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first port: 8080, hot: true }, + plugins: [ + new HtmlWebpackPlugin({ template: './src/index.html' }) + ], module: { rules: [ { test: /\.(scss)$/, use: [ { + // Adds CSS to the DOM by injecting a `<style>` tag loader: 'style-loader' }, { + // Interprets `@import` and `url()` like `import/require()` and will resolve them loader: 'css-loader' }, { + // Loader for webpack to process CSS with PostCSS loader: 'postcss-loader', options: { postcssOptions: { plugins: () => [ - require('autoprefixer') + autoprefixer ] } } }, { + // Loads a SASS/SCSS file and compiles it to CSS loader: 'sass-loader' } ] @@ -196,7 +214,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* @@ -249,20 +267,27 @@ npm install --save-dev mini-css-extract-plugin Then instantiate and use the plugin in the Webpack configuration: ```diff ---- a/webpack/webpack.config.js -+++ b/webpack/webpack.config.js -@@ -1,8 +1,10 @@ -+const miniCssExtractPlugin = require('mini-css-extract-plugin') +--- a/webpack.config.js ++++ b/webpack.config.js +@@ -3,6 +3,7 @@ const path = require('path') - + const autoprefixer = require('autoprefixer') + const HtmlWebpackPlugin = require('html-webpack-plugin') ++const miniCssExtractPlugin = require('mini-css-extract-plugin') + module.exports = { mode: 'development', - entry: './src/js/main.js', -+ plugins: [new miniCssExtractPlugin()], - output: { - filename: "main.js", - path: path.resolve(__dirname, "dist"), -@@ -18,8 +20,8 @@ module.exports = { +@@ -17,7 +18,8 @@ module.exports = { + hot: true + }, + plugins: [ +- new HtmlWebpackPlugin({ template: './src/index.html' }) ++ new HtmlWebpackPlugin({ template: './src/index.html' }), ++ new miniCssExtractPlugin() + ], + module: { + rules: [ +@@ -25,8 +27,8 @@ module.exports = { test: /\.(scss)$/, use: [ { @@ -277,8 +302,8 @@ Then instantiate and use the plugin in the Webpack configuration: After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this: ```diff ---- a/webpack/dist/index.html -+++ b/webpack/dist/index.html +--- a/dist/index.html ++++ b/dist/index.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> @@ -296,9 +321,9 @@ Bootstrap's CSS includes multiple references to SVG files via inline `data:` URI Configure Webpack to extract inline SVG files like this: ```diff ---- a/webpack/webpack.config.js -+++ b/webpack/webpack.config.js -@@ -16,6 +16,14 @@ module.exports = { +--- a/webpack.config.js ++++ b/webpack.config.js +@@ -23,6 +23,14 @@ module.exports = { }, module: { rules: [ |