mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Bump version to 5.0.0-alpha1 (#29925)
Also add v4.5.0 in versions and keep README.md pointing to v4.5.0 so that there are no broken stuff.
This commit is contained in:
XhmikosR
@@ -0,0 +1,57 @@
|
||||
---
|
||||
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 [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0](https://www.w3.org/TR/WCAG20/) (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 [<abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](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 <abbr title="Accessible Rich Internet Applications">ARIA</abbr> 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
|
||||
|
||||
Most colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to *insufficient* color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)) when used against a light background. Authors will need to 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 `.sr-only` 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 >}}
|
||||
<p class="text-danger">
|
||||
<span class="sr-only">Danger: </span>
|
||||
This action is not reversible
|
||||
</p>
|
||||
{{< /highlight >}}
|
||||
|
||||
For visually hidden interactive controls, such as traditional "skip" links, use the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, since Bootstrap 5 the `.sr-only-focusable` class may not be used in combination with the `.sr-only` class.**
|
||||
|
||||
{{< highlight html >}}
|
||||
<a class="sr-only-focusable" href="#content">Skip to main content</a>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Reduced motion
|
||||
|
||||
Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/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.
|
||||
|
||||
## Additional resources
|
||||
|
||||
- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/)
|
||||
- [The A11Y Project](https://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://developer.paciellogroup.com/resources/contrastanalyser/)
|
||||
- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
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/)
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
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. This also includes the latest version of Legacy Edge (EdgeHTML layout engine).
|
||||
|
||||
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" | 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.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Chrome</th>
|
||||
<th scope="col">Firefox</th>
|
||||
<th scope="col">Safari</th>
|
||||
<th scope="col">Android Browser & WebView</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Android</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td>v6.0+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Desktop browsers
|
||||
|
||||
Similarly, the latest versions of most desktop browsers are supported.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Chrome</th>
|
||||
<th scope="col">Firefox</th>
|
||||
<th scope="col">Microsoft Edge</th>
|
||||
<th scope="col">Opera</th>
|
||||
<th scope="col">Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Mac</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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 `<body>` 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 `<body>` 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 `<input>` or a `<textarea>`, the `<body>` content underneath the modal will be scrolled instead of the modal itself. See [WebKit bug #153856](https://bugs.webkit.org/show_bug.cgi?id=153856).
|
||||
|
||||
### Navbar Dropdowns
|
||||
|
||||
The `.dropdown-backdrop` element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or [any other element which will fire a click event in iOS](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile)).
|
||||
|
||||
## Browser zooming
|
||||
|
||||
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
|
||||
|
||||
## Validators
|
||||
|
||||
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com/) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
|
||||
|
||||
These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
|
||||
|
||||
Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Build tools
|
||||
description: Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Tooling setup
|
||||
|
||||
Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||
|
||||
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
|
||||
|
||||
1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
|
||||
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json).
|
||||
|
||||
When completed, you'll be able to run the various commands provided from the command line.
|
||||
|
||||
## Using npm scripts
|
||||
|
||||
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:**
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm start</code>
|
||||
</td>
|
||||
<td>
|
||||
Compiles CSS and JavaScript, builds the documentation, and starts a local server.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm run dist</code>
|
||||
</td>
|
||||
<td>
|
||||
Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm test</code>
|
||||
</td>
|
||||
<td>
|
||||
Runs tests locally after running <code>npm run dist</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm run docs-serve</code>
|
||||
</td>
|
||||
<td>
|
||||
Builds and runs the documentation locally.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
## Local documentation
|
||||
|
||||
Running our documentation locally requires the use of Hugo, which gets installed via the [hugo-bin](https://www.npmjs.com/package/hugo-bin) npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started:
|
||||
|
||||
1. Run through the [tooling setup](#tooling-setup) above to install all dependencies.
|
||||
2. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
|
||||
3. Open `http://localhost:9001/` in your browser, and voilà.
|
||||
|
||||
Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
|
||||
|
||||
## 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
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Contents
|
||||
description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Precompiled Bootstrap
|
||||
|
||||
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 >}}
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap-grid.css
|
||||
│ ├── bootstrap-grid.css.map
|
||||
│ ├── bootstrap-grid.min.css
|
||||
│ ├── bootstrap-grid.min.css.map
|
||||
│ ├── bootstrap-reboot.css
|
||||
│ ├── bootstrap-reboot.css.map
|
||||
│ ├── bootstrap-reboot.min.css
|
||||
│ ├── bootstrap-reboot.min.css.map
|
||||
│ ├── bootstrap-utilities.css
|
||||
│ ├── bootstrap-utilities.css.map
|
||||
│ ├── bootstrap-utilities.min.css
|
||||
│ ├── bootstrap-utilities.min.css.map
|
||||
│ ├── bootstrap.css
|
||||
│ ├── bootstrap.css.map
|
||||
│ ├── bootstrap.min.css
|
||||
│ └── bootstrap.min.css.map
|
||||
└── js/
|
||||
├── bootstrap.bundle.js
|
||||
├── bootstrap.bundle.js.map
|
||||
├── bootstrap.bundle.min.js
|
||||
├── bootstrap.bundle.min.js.map
|
||||
├── bootstrap.esm.js
|
||||
├── bootstrap.esm.js.map
|
||||
├── bootstrap.esm.min.js
|
||||
├── bootstrap.esm.min.js.map
|
||||
├── bootstrap.js
|
||||
├── 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/).
|
||||
|
||||
## CSS files
|
||||
|
||||
Bootstrap includes a handful of options for including some or all of our compiled CSS.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">CSS files</th>
|
||||
<th scope="col">Layout</th>
|
||||
<th scope="col">Content</th>
|
||||
<th scope="col">Components</th>
|
||||
<th scope="col">Utilities</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
|
||||
</th>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
|
||||
</th>
|
||||
<td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td><a class="link-secondary" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-utilities.css</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-utilities.min.css</code></div>
|
||||
</th>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
|
||||
</th>
|
||||
<td class="text-muted">—</td>
|
||||
<td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## JS files
|
||||
|
||||
Similarly, we have options for including some or all of our compiled JavaScript.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">JS files</th>
|
||||
<th scope="col">Popper</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
|
||||
</th>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
|
||||
<div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
|
||||
</th>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Bootstrap source code
|
||||
|
||||
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 >}}
|
||||
bootstrap/
|
||||
├── dist/
|
||||
│ ├── css/
|
||||
│ └── js/
|
||||
├── site/
|
||||
│ └──content/
|
||||
│ └── docs/
|
||||
│ └── 5.0/
|
||||
│ └── 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.
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Download
|
||||
description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Compiled CSS and JS
|
||||
|
||||
Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes:
|
||||
|
||||
- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
|
||||
- Compiled and minified JavaScript plugins
|
||||
|
||||
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
|
||||
|
||||
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
|
||||
|
||||
## Source files
|
||||
|
||||
Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
|
||||
|
||||
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
|
||||
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
|
||||
|
||||
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
|
||||
|
||||
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
## Examples
|
||||
|
||||
If you want to download and examine our [examples]({{< docsref "/examples" >}}), you can grab the already built examples:
|
||||
|
||||
<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a>
|
||||
|
||||
## BootstrapCDN
|
||||
|
||||
Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project.
|
||||
|
||||
{{< highlight html >}}
|
||||
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
|
||||
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
|
||||
{{< /highlight >}}
|
||||
|
||||
If you're using our compiled JavaScript, don't forget to include Popper.js, via a CDN preferably, before our JS.
|
||||
|
||||
{{< highlight html >}}
|
||||
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
|
||||
{{< /highlight >}}
|
||||
|
||||
## Package managers
|
||||
|
||||
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
|
||||
|
||||
### npm
|
||||
|
||||
Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
|
||||
|
||||
{{< highlight sh >}}
|
||||
npm install bootstrap
|
||||
{{< /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.
|
||||
|
||||
Bootstrap's `package.json` contains some additional metadata under the following keys:
|
||||
|
||||
- `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
|
||||
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
|
||||
|
||||
### yarn
|
||||
|
||||
Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
|
||||
|
||||
{{< highlight sh >}}
|
||||
yarn add bootstrap
|
||||
{{< /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 >}}
|
||||
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 >}}
|
||||
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.
|
||||
|
||||
### Composer
|
||||
|
||||
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):
|
||||
|
||||
{{< highlight 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 >}}
|
||||
Install-Package bootstrap
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< highlight powershell >}}
|
||||
Install-Package bootstrap.sass
|
||||
{{< /highlight >}}
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Introduction
|
||||
description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
|
||||
group: getting-started
|
||||
aliases:
|
||||
- "/docs/5.0/getting-started/"
|
||||
- "/docs/getting-started/"
|
||||
- "/getting-started/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Quick start
|
||||
|
||||
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
|
||||
|
||||
### CSS
|
||||
|
||||
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
|
||||
|
||||
{{< highlight html >}}
|
||||
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
|
||||
{{< /highlight >}}
|
||||
|
||||
### JS
|
||||
|
||||
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper.js](https://popper.js.org/). Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. Popper.js must come first, and then our JavaScript plugins.
|
||||
|
||||
{{< highlight 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 >}}
|
||||
|
||||
If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
|
||||
|
||||
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
|
||||
|
||||
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.
|
||||
|
||||
{{< partial "getting-started/components-requiring-javascript" >}}
|
||||
|
||||
## Starter template
|
||||
|
||||
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 >}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
|
||||
|
||||
<title>Hello, world!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- Popper.js first, then Bootstrap JS -->
|
||||
<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>
|
||||
</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.
|
||||
|
||||
## 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.
|
||||
|
||||
### 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.
|
||||
|
||||
{{< highlight 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 >}}
|
||||
<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).
|
||||
|
||||
### Box-sizing
|
||||
|
||||
For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
|
||||
|
||||
On the rare occasion you need to override it, use something like the following:
|
||||
|
||||
{{< highlight 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`.
|
||||
|
||||
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
|
||||
|
||||
### Reboot
|
||||
|
||||
For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
|
||||
|
||||
## Community
|
||||
|
||||
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
|
||||
|
||||
- Follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}).
|
||||
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
|
||||
- Join [the official Slack room]({{< param slack >}}).
|
||||
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
|
||||
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||
|
||||
You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
layout: docs
|
||||
title: JavaScript
|
||||
description: Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Individual or compiled
|
||||
|
||||
Plugins can be included individually (using Bootstrap's individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
|
||||
|
||||
If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready.
|
||||
|
||||
## 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/#feat=es6-module).
|
||||
|
||||
{{< highlight 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
|
||||
|
||||
Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper.js. For more information about the issue see [here](https://v8.dev/features/modules#specifiers).
|
||||
{{< /callout >}}
|
||||
|
||||
## Dependencies
|
||||
|
||||
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
|
||||
|
||||
Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/).
|
||||
|
||||
## Still want to use jQuery? It's possible!
|
||||
|
||||
Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. **If Bootstrap detects `jQuery` in the `window` object** it'll add all of our components in jQuery's plugin system; this means you'll be able to do `$('[data-toggle="tooltip"]').tooltip()` to enable tooltips. The same goes for our other components.
|
||||
|
||||
## Data attributes
|
||||
|
||||
Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
|
||||
|
||||
{{< callout warning >}}
|
||||
## Selectors
|
||||
|
||||
Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier).
|
||||
If you use special selectors, for example: `collapse:Example` be sure to escape them.
|
||||
{{< /callout >}}
|
||||
|
||||
## Events
|
||||
|
||||
Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
|
||||
|
||||
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 >}}
|
||||
var myModal = document.getElementById('myModal')
|
||||
|
||||
myModal.addEventListener('show.bs.modal', function (e) {
|
||||
if (!data) {
|
||||
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 >}}
|
||||
$('#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 >}}
|
||||
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)`.
|
||||
|
||||
### Asynchronous functions and transitions
|
||||
|
||||
All programmatic API methods are **asynchronous** and return to the caller once the transition is started but **before it ends**.
|
||||
|
||||
In order to execute an action once the transition is complete, you can listen to the corresponding event.
|
||||
|
||||
{{< highlight 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 >}}
|
||||
var myCarouselEl = document.getElementById('myCarousel')
|
||||
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
|
||||
|
||||
myCarouselEl.addEventListener('slid.bs.carousel', function (e) {
|
||||
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
|
||||
})
|
||||
|
||||
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 >}}
|
||||
// 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 >}}
|
||||
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 >}}
|
||||
bootstrap.Tooltip.VERSION // => "{{< param current_version >}}"
|
||||
{{< /highlight >}}
|
||||
|
||||
## No special fallbacks when JavaScript is disabled
|
||||
|
||||
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Third-party libraries
|
||||
|
||||
**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
|
||||
{{< /callout >}}
|
||||
|
||||
## Sanitizer
|
||||
|
||||
Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.
|
||||
|
||||
The default `whiteList` value is the following:
|
||||
|
||||
{{< highlight js >}}
|
||||
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
|
||||
var DefaultWhitelist = {
|
||||
// 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: []
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
If you want to add new values to this default `whiteList` you can do the following:
|
||||
|
||||
{{< highlight js >}}
|
||||
var myDefaultWhiteList = bootstrap.Tooltip.Default.whiteList
|
||||
|
||||
// To allow table elements
|
||||
myDefaultWhiteList.table = []
|
||||
|
||||
// To allow td elements and data-option attributes on td elements
|
||||
myDefaultWhiteList.td = ['data-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-]+/
|
||||
myDefaultWhiteList['*'].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 >}}
|
||||
var yourTooltipEl = document.getElementById('yourTooltip')
|
||||
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
|
||||
sanitizeFn: function (content) {
|
||||
return DOMPurify.sanitize(content)
|
||||
}
|
||||
})
|
||||
{{< /highlight >}}
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
layout: docs
|
||||
title: RFS
|
||||
description: Bootstrap's resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## What is RFS?
|
||||
|
||||
Bootstrap's side project [RFS](https://github.com/twbs/rfs/tree/v{{< param "rfs_version" >}}) is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like `margin`, `padding`, `border-radius`, or even `box-shadow`.
|
||||
|
||||
The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior.
|
||||
|
||||
## Using RFS
|
||||
|
||||
The mixins are included in Bootstrap and are available once you include Bootstrap's `scss`. RFS can also be [installed standalone](https://github.com/twbs/rfs/tree/v{{< param "rfs_version" >}}#installation) if needed.
|
||||
|
||||
### Using the mixins
|
||||
|
||||
The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`. See the example below for source Sass and compiled CSS.
|
||||
|
||||
```scss
|
||||
.title {
|
||||
@include font-size(4rem);
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.title {
|
||||
font-size: calc(1.525rem + 3.3vw);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Any other property can be passed to the `rfs()` mixin like this:
|
||||
|
||||
```scss
|
||||
.selector {
|
||||
@include rfs(4rem, border-radius);
|
||||
}
|
||||
```
|
||||
|
||||
`!important` can also just be added to whatever value you want:
|
||||
|
||||
```scss
|
||||
.selector {
|
||||
@include padding(2.5rem !important);
|
||||
}
|
||||
```
|
||||
|
||||
### Using the functions
|
||||
|
||||
When you don't want to use the includes, there are also two functions:
|
||||
|
||||
- `rfs-value()` converts a value into a `rem` value if a `px` value is passed, in other cases it returns the same result.
|
||||
- `rfs-fluid-value()` returns the fluid version of a value if the property needs rescaling.
|
||||
|
||||
In this example, we use one of Bootstrap's built-in [responsive breakpoint mixins]({{< docsref "/layout/breakpoints" >}}) to only apply styling below the `lg` breakpoint.
|
||||
|
||||
```scss
|
||||
.selector {
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: rfs-fluid-value(2rem);
|
||||
font-size: rfs-fluid-value(1.125rem);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@media (max-width: 991.98px) {
|
||||
.selector {
|
||||
padding: calc(1.325rem + 0.9vw);
|
||||
font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Extended documentation
|
||||
|
||||
RFS is a separate project under the Bootstrap organization. More about RFS and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/v{{< param "rfs_version" >}}).
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Webpack and bundlers
|
||||
description: Learn how to include Bootstrap in your project using Webpack or other bundlers.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Installing Bootstrap
|
||||
|
||||
[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
|
||||
|
||||
## Importing JavaScript
|
||||
|
||||
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 >}}
|
||||
// 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 >}}
|
||||
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 both of them to your `package.json` using `npm install popper.js`.
|
||||
|
||||
## Importing Styles
|
||||
|
||||
### Importing Precompiled Sass
|
||||
|
||||
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
|
||||
|
||||
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 >}}
|
||||
@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/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
|
||||
|
||||
{{< highlight js >}}
|
||||
...
|
||||
{
|
||||
test: /\.(scss)$/,
|
||||
use: [{
|
||||
loader: 'style-loader', // inject CSS to page
|
||||
}, {
|
||||
loader: 'css-loader', // translates CSS into CommonJS modules
|
||||
}, {
|
||||
loader: 'postcss-loader', // Run postcss actions
|
||||
options: {
|
||||
plugins: function () { // postcss plugins, can be exported to postcss.config.js
|
||||
return [
|
||||
require('autoprefixer')
|
||||
];
|
||||
}
|
||||
}
|
||||
}, {
|
||||
loader: 'sass-loader' // compiles Sass to CSS
|
||||
}]
|
||||
},
|
||||
...
|
||||
{{< /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 >}}
|
||||
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 >}}
|
||||
...
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
}
|
||||
]
|
||||
}
|
||||
...
|
||||
{{< /highlight >}}
|
||||
Reference in New Issue
Block a user