diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/getting-started')
6 files changed, 34 insertions, 13 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/accessibility.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/accessibility.md index edfe914df..8f78112b7 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/accessibility.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/accessibility.md @@ -50,7 +50,7 @@ Bootstrap includes support for the [`prefers-reduced-motion` media feature](http ## Additional resources - [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) -- [The A11Y Project](https://a11yproject.com/) +- [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/) - [Colour Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/build-tools.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/build-tools.md index 3a8f42105..873a1ca11 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/build-tools.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/build-tools.md @@ -13,8 +13,9 @@ Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts) for its build 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]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). -3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins. +2. Either [download Bootstrap's sources]({{ site.download.source }}) or fork [Bootstrap's repository]({{ site.repo }}). +3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). +4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins. - **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems. When completed, you'll be able to run the various commands provided from the command line. diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/download.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/download.md index fc5b93819..7e0cb4a1e 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/download.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/download.md @@ -40,14 +40,15 @@ Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver {% highlight html %} <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> -<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -If you're using our compiled JavaScript, don't forget to include jQuery and Popper.js, via a CDN preferably, before our JS. +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 %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} ## Package managers diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/introduction.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/introduction.md index c5e7ed07e..6e83611b1 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/introduction.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/introduction.md @@ -26,9 +26,22 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee ### JS -Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. +Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. -We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. +Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. + +#### Bundle + +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/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section. + +{% highlight html %} +<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> +{% endhighlight %} + +#### Separate + +If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> @@ -36,9 +49,9 @@ We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -Curious which components explicitly require jQuery, our JS, 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. +#### Components -Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section. +Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're unsure about the page structure, keep reading for an example page template. <details> <summary class="text-primary mb-3">Show components requiring JavaScript</summary> @@ -77,11 +90,17 @@ Be sure to have your pages set up with the latest design and development standar <body> <h1>Hello, world!</h1> - <!-- Optional JavaScript --> - <!-- jQuery first, then Popper.js, then Bootstrap JS --> + <!-- Optional JavaScript; choose one of the two! --> + + <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> + <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> + <script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> + + <!-- Option 2: jQuery, Popper.js, and Bootstrap JS <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> + --> </body> </html> {% endhighlight %} diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/theming.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/theming.md index 32f83f308..bc8095792 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/theming.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/theming.md @@ -225,7 +225,7 @@ You can also specify a base color with our color map functions: #### Escape SVG -We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE. +We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE. When using the `escape-svg` function, data URIs must be quoted. #### Add and Subtract functions diff --git a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/webpack.md b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/webpack.md index 0cde33d7a..f58e434d6 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/getting-started/webpack.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/getting-started/webpack.md @@ -43,7 +43,7 @@ First, create your own `_custom.scss` and use it to override the [built-in custo @import "~bootstrap/scss/bootstrap"; {% endhighlight %} -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: +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 %} ... |