Merging upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
8838637a85
commit
449962af96
GPG key ID:
FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
|
|
@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools,
|
|||
|
||||
## 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.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
|
||||
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.2](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
|
||||
|
||||
### Structural markup
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth
|
|||
|
||||
### Color contrast
|
||||
|
||||
Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
|
||||
Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
|
||||
|
||||
### Visually hidden content
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ On browsers that support `prefers-reduced-motion`, and where the user has *not*
|
|||
|
||||
## Additional resources
|
||||
|
||||
- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
|
||||
- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG/)
|
||||
- [The A11Y Project](https://www.a11yproject.com/)
|
||||
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
||||
- [Tenon.io Accessibility Checker](https://tenon.io/)
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Internet Explorer is not supported. **If you require Internet Explorer support,
|
|||
|
||||
### 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).
|
||||
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://issues.chromium.org/issues/40301599) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
|
||||
### iOS text fields and scrolling
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ bootstrap/
|
|||
└── bootstrap.min.js.map
|
||||
```
|
||||
|
||||
This is the most basic form of Bootstrap: compiled 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/).
|
||||
This is the most basic form of Bootstrap: compiled 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://web.dev/articles/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/docs/v2/).
|
||||
|
||||
### CSS files
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ description: Help develop Bootstrap with our documentation build scripts and tes
|
|||
group: getting-started
|
||||
toc: true
|
||||
aliases: "/docs/5.3/getting-started/build-tools/"
|
||||
added:
|
||||
show_badge: false
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## Tooling setup
|
||||
|
|
@ -38,7 +41,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
|
|||
|
||||
## Sass
|
||||
|
||||
Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated).
|
||||
Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass/) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated/).
|
||||
|
||||
Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Download ready-to-use compiled code for **Bootstrap v{{< param current_version >
|
|||
|
||||
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.
|
||||
|
||||
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
|
||||
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary">Download</a>
|
||||
|
||||
## Source files
|
||||
|
||||
|
|
@ -26,13 +26,13 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
|
|||
|
||||
Should you require our full set of [build tools]({{< docsref "/getting-started/contribute#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>
|
||||
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary">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>
|
||||
<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary">Download Examples</a>
|
||||
|
||||
## CDN via jsDelivr
|
||||
|
||||
|
|
@ -100,9 +100,20 @@ Install Bootstrap in your Node.js powered apps with [the yarn package](https://y
|
|||
yarn add bootstrap@{{< param "current_version" >}}
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
**Yarn 2+ (aka Yarn Berry) doesn't support the `node_modules` directory by default**: using our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
|
||||
|
||||
```sh
|
||||
yarn config set nodeLinker node-modules # Use the node_modules linker
|
||||
touch yarn.lock # Create an empty yarn.lock file
|
||||
yarn install # Install the dependencies
|
||||
yarn start # Start the project
|
||||
```
|
||||
{{< /callout >}}
|
||||
|
||||
### 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):
|
||||
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/guides/gemfile.html):
|
||||
|
||||
```ruby
|
||||
gem 'bootstrap', '~> {{< param current_ruby_version >}}'
|
||||
|
|
@ -126,7 +137,7 @@ composer require twbs/bootstrap:{{< param current_version >}}
|
|||
|
||||
### NuGet
|
||||
|
||||
If you develop in .NET Framework, 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/). Newer projects should use [libman](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
|
||||
If you develop in .NET Framework, 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/). Newer projects should use [libman](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
|
||||
|
||||
```powershell
|
||||
Install-Package bootstrap
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN
|
|||
</html>
|
||||
```
|
||||
|
||||
2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
|
|
@ -50,7 +50,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN
|
|||
</html>
|
||||
```
|
||||
|
||||
You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
|
||||
You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
|
||||
|
||||
```html
|
||||
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
|
||||
|
|
@ -83,18 +83,19 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
|
|||
|
||||
Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
|
||||
|
||||
- Accordions for extending our Collapse plugin
|
||||
- Alerts for dismissing
|
||||
- Buttons for toggling states and checkbox/radio functionality
|
||||
- Carousel for all slide behaviors, controls, and indicators
|
||||
- Collapse for toggling visibility of content
|
||||
- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/))
|
||||
- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
|
||||
- Modals for displaying, positioning, and scroll behavior
|
||||
- Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
|
||||
- Navs with the Tab plugin for toggling content panes
|
||||
- Offcanvases for displaying, positioning, and scroll behavior
|
||||
- Scrollspy for scroll behavior and navigation updates
|
||||
- Toasts for displaying and dismissing
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
|
||||
|
||||
## Important globals
|
||||
|
||||
|
|
@ -147,9 +148,9 @@ Stay up-to-date on the development of Bootstrap and reach out to the community w
|
|||
|
||||
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
|
||||
- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
|
||||
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
|
||||
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
|
||||
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
|
||||
- Developers should use the keyword `bootstrap` on packages that 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.
|
||||
You can also follow [@getbootstrap on X](https://x.com/{{< param x >}}) for the latest gossip and awesome music videos.
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
|
|||
{{< /callout >}}
|
||||
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
|
||||
- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
|
||||
|
||||
## Using Bootstrap as a module
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
|
|||
|
||||
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](https://popper.js.org/).
|
||||
Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/docs/v2/).
|
||||
|
||||
## Data attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@ toc: true
|
|||
thumbnail: guides/bootstrap-parcel@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Parcel?
|
||||
|
||||
[Parcel](https://parceljs.org/) is a web application bundler designed to simplify the development process with a zero-configuration setup out of the box. It offers features found in more advanced bundlers while focusing on ease of use, making it ideal for developers seeking a quick start.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -111,7 +115,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
|
||||
|
||||
|
|
@ -150,7 +154,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
|
|||
|
||||
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/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
|
|
@ -168,9 +168,19 @@ After running Sass then RTLCSS, each selector in your CSS files will be prepende
|
|||
3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223).
|
||||
{{< /callout >}}
|
||||
|
||||
Do you want to automate this process and address several edge cases involving both directions within a single stylesheet? Then, consider using [PostCSS RTLCSS](https://github.com/elchininet/postcss-rtlcss) as a [PostCSS](https://github.com/postcss/postcss) plugin to process your source files. PostCSS RTLCSS uses [RTLCSS](https://rtlcss.com) behind the scenes to manage the direction flipping process, but it separates the flipped declarations into rules with a different prefix for LTR and RTL, something that allows you to have both directions within the same stylesheet file. By doing this, you can switch between LTR and RTL orientations by simply changing the `dir` of the page (or even by modifying a specific class if you configure the plugin accordingly).
|
||||
|
||||
{{< callout warning >}}
|
||||
**Important things to take into account** when using PostCSS RTLCSS to build a combined LTR and RTL implementation:
|
||||
|
||||
1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
|
||||
2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
|
||||
3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:freeze */`, `/* rtl:begin:freeze */` and `/* rtl:end:freeze */` directives respectively. These directives will prefix the targeted rules or declarations with the current direction but will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
|
||||
{{< /callout >}}
|
||||
|
||||
## The breadcrumb case
|
||||
|
||||
The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
|
||||
The [breadcrumb separator]({{< docsref "/components/breadcrumb#dividers" >}}) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
|
||||
|
||||
## Additional resources
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,21 @@ description: The official guide for how to include and bundle Bootstrap's CSS an
|
|||
group: getting-started
|
||||
toc: true
|
||||
thumbnail: guides/bootstrap-vite@2x.png
|
||||
added:
|
||||
show_badge: false
|
||||
version: "5.2"
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Vite?
|
||||
|
||||
[Vite](https://vite.dev/) is a modern frontend build tool designed for speed and simplicity. It provides an efficient and streamlined development experience, especially for modern JavaScript frameworks.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -132,7 +139,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
|
||||
|
||||
|
|
@ -172,7 +179,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
|
|||
|
||||
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">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@ toc: true
|
|||
thumbnail: guides/bootstrap-webpack@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Webpack?
|
||||
|
||||
[Webpack](https://webpack.js.org/) is a JavaScript module bundler that processes modules and their dependencies to generate static assets. It simplifies managing complex web applications with multiple files and dependencies.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -141,7 +145,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
|
||||
|
||||
|
|
@ -244,7 +248,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
|
|||
|
||||
4. **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/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue