docs: switch to fenced codeblocks (#31806)

2026-06-11 18:02:28 +03:00 · 2020-10-19 12:56:49 +03:00
parent 48177c946f
commit e6618a6ebb
43 changed files with 494 additions and 446 deletions
@@ -30,18 +30,18 @@ Some combinations of colors that currently make up Bootstrap's default palette

 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.

-{{< highlight html >}}
+```html
 <p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
 </p>
-{{< /highlight >}}
+```

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

-{{< highlight html >}}
+```html
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
-{{< /highlight >}}
+```

 ### Reduced motion

@@ -12,7 +12,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this:

 <!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->

-{{< highlight text >}}
+```text
 bootstrap/
 ├── css/
 │   ├── bootstrap-grid.css
@@ -44,7 +44,7 @@ bootstrap/
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
-{{< /highlight >}}
+```

 This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).

@@ -139,7 +139,7 @@ Similarly, we have options for including some or all of our compiled JavaScript.

 The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:

-{{< highlight text >}}
+```text
 bootstrap/
 ├── dist/
 │   ├── css/
@@ -151,6 +151,6 @@ bootstrap/
 │              └── examples/
 ├── js/
 └── scss/
-{{< /highlight >}}
+```

 The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
@@ -38,17 +38,17 @@ If you want to download and examine our [examples]({{< docsref "/examples" >}}),

 Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project.

-{{< highlight html >}}
+```html
 <link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
 <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```

 If you're using our compiled JavaScript and prefer to include Popper.js separately, add Popper.js before our JS, via a CDN preferably.

-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
 <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```

 ## Package managers

@@ -58,9 +58,9 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo

 Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):

-{{< highlight sh >}}
+```sh
 npm install bootstrap@next
-{{< /highlight >}}
+```

 `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
 The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap's plugins individually by loading the `/js/dist/*.js` files under the package's top-level directory.
@@ -74,23 +74,23 @@ Bootstrap's `package.json` contains some additional metadata under the following

 Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):

-{{< highlight sh >}}
+```sh
 yarn add bootstrap@next
-{{< /highlight >}}
+```

 ### RubyGems

 Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):

-{{< highlight ruby >}}
+```ruby
 gem 'bootstrap', '~> {{< param current_ruby_version >}}'
-{{< /highlight >}}
+```

 Alternatively, if you're not using Bundler, you can install the gem by running this command:

-{{< highlight sh >}}
+```sh
 gem install bootstrap -v {{< param current_ruby_version >}}
-{{< /highlight >}}
+```

 [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.

@@ -98,18 +98,18 @@ gem install bootstrap -v {{< param current_ruby_version >}}

 You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):

-{{< highlight sh >}}
+```sh
 composer require twbs/bootstrap:{{< param current_version >}}
-{{< /highlight >}}
+```

 ### NuGet

 If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):

-{{< highlight powershell >}}
+```powershell
 Install-Package bootstrap
-{{< /highlight >}}
+```

-{{< highlight powershell >}}
+```powershell
 Install-Package bootstrap.sass
-{{< /highlight >}}
+```
@@ -18,9 +18,9 @@ Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open sour

 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.

-{{< highlight html >}}
+```html
 <link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
-{{< /highlight >}}
+```

 ### JS

@@ -30,18 +30,18 @@ Many of our components require the use of JavaScript to function. Specifically,

 Include everything you need in one script with our bundle. Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.

-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```

 #### Separate

 If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins.

-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
 <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```

 #### Modules

@@ -57,7 +57,7 @@ Curious which components explicitly require our JavaScript and Popper.js? Click

 Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

-{{< highlight html >}}
+```html
 <!doctype html>
 <html lang="en">
  <head>
@@ -84,7 +84,7 @@ Be sure to have your pages set up with the latest design and development standar
    -->
  </body>
 </html>
-{{< /highlight >}}
+```

 That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.

@@ -96,20 +96,20 @@ Bootstrap employs a handful of important global styles and settings that you'll

 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.

-{{< highlight html >}}
+```html
 <!doctype html>
 <html lang="en">
  ...
 </html>
-{{< /highlight >}}
+```

 ### 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 `<head>`.

-{{< highlight html >}}
+```html
 <meta name="viewport" content="width=device-width, initial-scale=1">
-{{< /highlight >}}
+```

 You can see an example of this in action in the [starter template](#starter-template).

@@ -119,11 +119,11 @@ For more straightforward sizing in CSS, we switch the global `box-sizing` value

 On the rare occasion you need to override it, use something like the following:

-{{< highlight css >}}
+```css
 .selector-for-some-widget {
  box-sizing: content-box;
 }
-{{< /highlight >}}
+```

 With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.

@@ -16,14 +16,14 @@ If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files whi

 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/#feat=es6-module).

-{{< highlight html >}}
+```html
 <script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
 </script>
-{{< /highlight >}}
+```

 {{< callout warning >}}
 ## Incompatible plugins
@@ -58,7 +58,7 @@ 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()`.

-{{< highlight js >}}
+```js
 var myModal = document.getElementById('myModal')

 myModal.addEventListener('show.bs.modal', function (e) {
@@ -66,30 +66,30 @@ myModal.addEventListener('show.bs.modal', function (e) {
    return e.preventDefault() // stops modal from being shown
  }
 })
-{{< /highlight >}}
+```

 {{< callout warning >}}
 ## jQuery events

 Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. 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`.

-{{< highlight js >}}
+```js
 $('#myTab a').on('shown.bs.tab', function () {
  // do something...
 })
-{{< /highlight >}}
+```
 {{< /callout >}}

 ## Programmatic API

 All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):

-{{< highlight js >}}
+```js
 var 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
-{{< /highlight >}}
+```

 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)`.

@@ -99,17 +99,17 @@ 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.

-{{< highlight js >}}
+```js
 var myCollapseEl = document.getElementById('#myCollapse')

 myCollapseEl.addEventListener('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
 })
-{{< /highlight >}}
+```

 In addition a method call on a **transitioning component will be ignored**.

-{{< highlight js >}}
+```js
 var myCarouselEl = document.getElementById('myCarousel')
 var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

@@ -119,33 +119,33 @@ myCarouselEl.addEventListener('slid.bs.carousel', function (e) {

 carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
 carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
-{{< /highlight >}}
+```

 ### Default settings

 You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:

-{{< highlight js >}}
+```js
 // changes default for the modal plugin's `keyboard` option to false
 bootstrap.Modal.Default.keyboard = false
-{{< /highlight >}}
+```

 ## No conflict (only if you use jQuery)

 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.

-{{< highlight js >}}
+```js
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-{{< /highlight >}}
+```

 ## Version numbers

 The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:

-{{< highlight js >}}
+```js
 bootstrap.Tooltip.VERSION // => "{{< param current_version >}}"
-{{< /highlight >}}
+```

 ## No special fallbacks when JavaScript is disabled

@@ -163,7 +163,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep

 The default `allowList` value is the following:

-{{< highlight js >}}
+```js
 var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
 var DefaultAllowlist = {
  // Global attributes allowed on any supplied element below.
@@ -198,11 +198,11 @@ var DefaultAllowlist = {
  u: [],
  ul: []
 }
-{{< /highlight >}}
+```

 If you want to add new values to this default `allowList` you can do the following:

-{{< highlight js >}}
+```js
 var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

 // To allow table elements
@@ -215,15 +215,15 @@ myDefaultAllowList.td = ['data-option']
 // Be careful about your regular expressions being too lax
 var myCustomRegex = /^data-my-app-[\w-]+/
 myDefaultAllowList['*'].push(myCustomRegex)
-{{< /highlight >}}
+```

 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:

-{{< highlight js >}}
+```js
 var yourTooltipEl = document.getElementById('yourTooltip')
 var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
 })
-{{< /highlight >}}
+```
@@ -14,17 +14,17 @@ 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`):

-{{< highlight js >}}
+```js
 // You can specify which plugins you need
 import { Tooltip, Toast, Popover } from 'bootstrap';
-{{< /highlight >}}
+```

 Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:

-{{< highlight js >}}
+```js
 import Alert from 'bootstrap/js/dist/alert';
 ...
-{{< /highlight >}}
+```

 Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
 This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`.
@@ -37,14 +37,14 @@ To enjoy the full potential of Bootstrap and customize it to your needs, use the

 First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/customize/sass" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:

-{{< highlight scss >}}
+```scss
@import "custom";
@import "~bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```

 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:

-{{< highlight js >}}
+```js
 // ...
 {
  test: /\.(scss)$/,
@@ -75,19 +75,19 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
  }]
 }
 // ...
-{{< /highlight >}}
+```

 ### Importing Compiled CSS

 Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:

-{{< highlight js >}}
+```js
 import 'bootstrap/dist/css/bootstrap.min.css';
-{{< /highlight >}}
+```

 In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).

-{{< highlight js >}}
+```js
 // ...
 module: {
  rules: [
@@ -101,4 +101,4 @@ module: {
  ]
 }
 // ...
-{{< /highlight >}}
+```