diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/4.6/getting-started')
10 files changed, 0 insertions, 1563 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/accessibility.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/accessibility.md deleted file mode 100644 index e8fe84126..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/accessibility.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -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. - -```html -<p class="text-danger"> - <span class="sr-only">Danger: </span> - This action is not reversible -</p> -``` - -For visually hidden interactive controls, such as traditional "skip" links, `.sr-only` can be combined with the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). - -```html -<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> -``` - -### 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, and meaningful animations (such as spinners) will be slowed down. - -## Additional resources - -- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) -- [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/) -- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/best-practices.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/best-practices.md deleted file mode 100644 index e17fc1290..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/best-practices.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -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/) diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/browsers-devices.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/browsers-devices.md deleted file mode 100644 index e6cdd8fe2..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/browsers-devices.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -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. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**. - -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" | chomp | 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 table-bordered table-striped"> - <thead> - <tr> - <td></td> - <th>Chrome</th> - <th>Firefox</th> - <th>Safari</th> - <th>Android Browser & WebView</th> - <th>Microsoft Edge</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Android</th> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-muted">N/A</td> - <td class="text-success">Android v5.0+ supported</td> - <td class="text-success">Supported</td> - </tr> - <tr> - <th scope="row">iOS</th> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-muted">N/A</td> - <td class="text-success">Supported</td> - </tr> - <tr> - <th scope="row">Windows 10 Mobile</th> - <td class="text-muted">N/A</td> - <td class="text-muted">N/A</td> - <td class="text-muted">N/A</td> - <td class="text-muted">N/A</td> - <td class="text-success">Supported</td> - </tr> - </tbody> -</table> - -### Desktop browsers - -Similarly, the latest versions of most desktop browsers are supported. - -<table class="table table-bordered table-striped"> - <thead> - <tr> - <td></td> - <th>Chrome</th> - <th>Firefox</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Mac</th> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-muted">N/A</td> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - </tr> - <tr> - <th scope="row">Windows</th> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-success">Supported, IE10+</td> - <td class="text-success">Supported</td> - <td class="text-success">Supported</td> - <td class="text-danger">Not supported</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, Firefox for Linux, and Internet Explorer 9, though they are not officially supported. - -For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{< docsref "/browser-bugs" >}}). - -## Internet Explorer - -Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](https://caniuse.com/) for details on browser support of CSS3 and HTML5 features. **If you require IE8-9 support, use Bootstrap 3.** - -## 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. - -## Sticky `:hover`/`:focus` on iOS - -While `:hover` isn't possible on most touch devices, iOS emulates this behavior, resulting in "sticky" hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices. - -Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we've opted to deprecate [this shim](https://github.com/twbs/mq4-hover-shim) and keep the mixins as shortcuts for the pseudo-classes. - -## Printing - -Even in some modern browsers, printing can be quirky. - -As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868]({{< param repo >}}/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS: - -```css -@media print { - .container { - width: auto; - } -} -``` - -## Android stock browser - -Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general. - -### Select menu - -On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers. - -```html -<script> -$(function () { - var nua = navigator.userAgent - var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) - if (isAndroid) { - $('select.form-control').removeClass('form-control').css('width', '100%') - } -}) -</script> -``` - -Want to see an example? [Check out this JS Bin demo](http://jsbin.com/OyaqoDO/2). - -## 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). diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/build-tools.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/build-tools.md deleted file mode 100644 index 83c26c361..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/build-tools.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -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. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork [Bootstrap's repository]({{< param repo >}}). -3. 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 the following commands and tasks: - -| Task | Description | -| --- | --- | -| `npm run dist` | `npm run dist` creates the `/dist/` directory with compiled files. **Uses [Sass](https://sass-lang.com/), [Autoprefixer][autoprefixer], and [terser](https://github.com/terser/terser).** | -| `npm test` | Runs tests locally after running `npm run dist` | -| `npm run docs-serve` | Builds and runs the documentation locally. | - -Run `npm run` to see all the npm scripts. - -{{< callout info >}} -{{< partial "callout-info-npm-starter.md" >}} -{{< /callout >}} - -## Sass - -Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note because as of October 26, 2020, LibSass and packages built on top of it—including Node Sass—are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). - -If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on Dart Sass's [GitHub page](https://github.com/sass/dart-sass)). - -We increase the Sass rounding precision to 6 (by default, it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. - -## 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 diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/contents.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/contents.md deleted file mode 100644 index a902ebb1d..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/contents.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: docs -title: Contents -description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery. -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. --> - -```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.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.js - ├── bootstrap.js.map - ├── bootstrap.min.js - └── bootstrap.min.js.map -``` - -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/), but not [jQuery](https://jquery.com/). - -## CSS files - -Bootstrap includes a handful of options for including some or all of our compiled CSS. - -<table class="table table-bordered"> - <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 class="text-success">Included</td> - <td class="text-success">Included</td> - <td class="text-success">Included</td> - <td class="text-success">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="text-warning" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td> - <td class="bg-light text-muted">Not included</td> - <td class="bg-light text-muted">Not included</td> - <td><a class="text-warning" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></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="bg-light text-muted">Not included</td> - <td><a class="text-warning" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td> - <td class="bg-light text-muted">Not included</td> - <td class="bg-light text-muted">Not included</td> - </tr> - </tbody> -</table> - -## JS files - -Similarly, we have options for including some or all of our compiled JavaScript. - -<table class="table table-bordered"> - <thead> - <tr> - <th scope="col">JS files</th> - <th scope="col">Popper</th> - <th scope="col">jQuery</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 class="text-success">Included</td> - <td class="bg-light text-muted">Not 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="bg-light text-muted">Not included</td> - <td class="bg-light text-muted">Not included</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: - -```text -bootstrap/ -├── dist/ -│ ├── css/ -│ └── js/ -├── site/ -│ └──content/ -| └──docs/ -| └── 4.6/ -| └── examples/ -├── js/ -└── scss/ -``` - -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. diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/download.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/download.md deleted file mode 100644 index b52bdc5af..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/download.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -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 (see [JS files comparison]({{< docsref "/getting-started/contents#js-files" >}})) - -This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper). - -<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]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files -- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing - -Should you require our full set of [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> - -## jsDelivr - -Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project. - -```html -<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> -<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> -``` - -If you're using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably. - -```html -<script src="{{< param "cdn.jquery" >}}" integrity="{{< param "cdn.jquery_hash" >}}" crossorigin="anonymous"></script> -<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> -``` - -## 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]({{< docsref "/getting-started/build-tools#sass" >}}) 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): - -```sh -npm install bootstrap -``` - -`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.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) - -{{< callout info >}} -{{< partial "callout-info-npm-starter.md" >}} -{{< /callout >}} - -### yarn - -Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap): - -```sh -yarn add bootstrap -``` - -### 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): - -```ruby -gem 'bootstrap', '~> {{< param current_ruby_version >}}' -``` - -Alternatively, if you're not using Bundler, you can install the gem by running this command: - -```sh -gem install bootstrap -v {{< param current_ruby_version >}} -``` - -[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/): - -```sh -composer require twbs/bootstrap:{{< param current_version >}} -``` - -### 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/): - -```powershell -Install-Package bootstrap -``` - -```powershell -Install-Package bootstrap.sass -``` diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/introduction.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/introduction.md deleted file mode 100644 index d688e45c6..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/introduction.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -layout: docs -title: Introduction -description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. -group: getting-started -aliases: - - "/docs/4.6/getting-started/" - - "/docs/getting-started/" - - "/getting-started/" -toc: true ---- - -## Quick start - -Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. 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. - -```html -<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> -``` - -### JS - -Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper](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. - -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, and then our JavaScript plugins. - -#### Bundle - -Include every Bootstrap JavaScript plugin with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers, but not [jQuery](https://jquery.com/). Include jQuery first, then a Bootstrap JavaScript bundle. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section. - -```html -<script src="{{< param "cdn.jquery" >}}" integrity="{{< param "cdn.jquery_hash" >}}" crossorigin="anonymous"></script> -<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> -``` - -#### Separate - -If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins. - -```html -<script src="{{< param "cdn.jquery" >}}" integrity="{{< param "cdn.jquery_hash" >}}" crossorigin="anonymous"></script> -<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> -``` - -#### Components - -Curious which components explicitly require jQuery, our JavaScript, and Popper? 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> -{{< markdown >}} -- 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/)) -- Modals for displaying, positioning, and scroll behavior -- Navbar for extending our Collapse plugin to implement responsive behavior -- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/)) -- Scrollspy for scroll behavior and navigation updates -{{< /markdown >}} -</details> - -## 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: - -```html -<!doctype html> -<html lang="en"> - <head> - <!-- Required meta tags --> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - - <!-- 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; choose one of the two! --> - - <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> - <script src="{{< param "cdn.jquery" >}}" integrity="{{< param "cdn.jquery_hash" >}}" crossorigin="anonymous"></script> - <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> - - <!-- Option 2: Separate Popper and Bootstrap JS --> - <!-- - <script src="{{< param "cdn.jquery" >}}" integrity="{{< param "cdn.jquery_hash" >}}" crossorigin="anonymous"></script> - <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> -``` - -That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/overview" >}}) 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. - -```html -<!doctype html> -<html lang="en"> - ... -</html> -``` - -### 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>`. - -```html -<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -``` - -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: - -```css -.selector-for-some-widget { - box-sizing: content-box; -} -``` - -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. - -- 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. - -## CSPs and embedded SVGs - -Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options. - -- [Close button]({{< docsref "/utilities/close-icon" >}}) (used in alerts and modals) -- [Custom checkboxes and radio buttons]({{< docsref "/components/forms#custom-forms" >}}) -- [Form switches]({{< docsref "/components/forms#switches" >}}) -- [Form validation icons]({{< docsref "/components/forms#validation" >}}) -- [Custom select menus]({{< docsref "/components/forms#select-menu" >}}) -- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}}) -- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) - -Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary. diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/javascript.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/javascript.md deleted file mode 100644 index faa01c48d..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/javascript.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -layout: docs -title: JavaScript -description: Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. 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. - -## 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. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) to see which versions of jQuery are supported. - -Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/). - -## 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.) - -However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with `data-api` like so: - -```js -$(document).off('.data-api') -``` - -Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this: - -```js -$(document).off('.alert.data-api') -``` - -{{< 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()`. - -```js -$('#myModal').on('show.bs.modal', function (event) { - if (!data) { - return event.preventDefault() // stops modal from being shown - } -}) -``` - -## Programmatic API - -We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon. - -```js -$('.btn.danger').button('toggle').addClass('fat') -``` - -All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior): - -```js -$('#myModal').modal() // initialized with defaults -$('#myModal').modal({ keyboard: false }) // initialized with no keyboard -$('#myModal').modal('show') // initializes and invokes show immediately -``` - -Each plugin also exposes its raw constructor on a `Constructor` property: `$.fn.popover.Constructor`. If you'd like to get a particular plugin instance, retrieve it directly from an element: `$('[rel="popover"]').data('popover')`. - -### 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. - -```js -$('#myCollapse').on('shown.bs.collapse', function (event) { - // Action to execute once the collapsible area is expanded -}) -``` - -In addition a method call on a **transitioning component will be ignored**. - -```js -$('#myCarousel').on('slid.bs.carousel', function (event) { - $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished -}) - -$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller -$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !! -``` - -### Default settings - -You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object: - -```js -// changes default for the modal plugin's `keyboard` option to false -$.fn.modal.Constructor.Default.keyboard = false -``` - -## No conflict - -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. - -```js -var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value -$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality -``` - -## Version numbers - -The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin: - -```js -$.fn.tooltip.Constructor.VERSION // => "{{< param current_version >}}" -``` - -## 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 >}} - -## Util - -All Bootstrap's JavaScript files depend on `util.js` and it has to be included alongside the other JavaScript files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there. - -`util.js` includes utility functions and a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions. - -## Sanitizer - -Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML. - -The default `whiteList` value is the following: - -```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: [] -} -``` - -If you want to add new values to this default `whiteList` you can do the following: - -```js -var myDefaultWhiteList = $.fn.tooltip.Constructor.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) -``` - -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: - -```js -$('#yourTooltip').tooltip({ - sanitizeFn: function (content) { - return DOMPurify.sanitize(content) - } -}) -``` diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/theming.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/theming.md deleted file mode 100644 index 8c48444da..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/theming.md +++ /dev/null @@ -1,501 +0,0 @@ ---- -layout: docs -title: Theming Bootstrap -description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. -group: getting-started -toc: true ---- - -## Introduction - -In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our `dist` files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach. - -Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more. - -## Sass - -Utilize our source Sass files to take advantage of variables, maps, mixins, and more when [compiling Sass]({{< docsref "/getting-started/build-tools#sass" >}}) using your own asset pipeline. - -### File structure - -Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: - -```text -your-project/ -├── scss -│ └── custom.scss -└── node_modules/ - └── bootstrap - ├── js - └── scss -``` - -If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own. - -```text -your-project/ -├── scss -│ └── custom.scss -└── bootstrap/ - ├── js - └── scss -``` - -### Importing - -In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. - -```scss -// Custom.scss -// Option A: Include all of Bootstrap - -@import "../node_modules/bootstrap/scss/bootstrap"; - -// Add custom code after this -``` - -```scss -// Custom.scss -// Option B: Include parts of Bootstrap - -// Required -@import "../node_modules/bootstrap/scss/functions"; -@import "../node_modules/bootstrap/scss/variables"; -@import "../node_modules/bootstrap/scss/mixins"; - -// Include custom variable default overrides here - -// Optional -@import "../node_modules/bootstrap/scss/reboot"; -@import "../node_modules/bootstrap/scss/type"; -@import "../node_modules/bootstrap/scss/images"; -@import "../node_modules/bootstrap/scss/code"; -@import "../node_modules/bootstrap/scss/grid"; -``` - -With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. - -### Variable defaults - -Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. - -You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. - -Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports. - -Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm: - -```scss -// Required -@import "../node_modules/bootstrap/scss/functions"; -@import "../node_modules/bootstrap/scss/variables"; -@import "../node_modules/bootstrap/scss/mixins"; - -// Your variable overrides -$body-bg: #000; -$body-color: #111; - -// Bootstrap and its default variables - -// Optional -@import "../node_modules/bootstrap/scss/root"; -@import "../node_modules/bootstrap/scss/reboot"; -@import "../node_modules/bootstrap/scss/type"; -// etc -``` - -Repeat as necessary for any variable in Bootstrap, including the global options below. - -{{< callout info >}} -{{< partial "callout-info-npm-starter.md" >}} -{{< /callout >}} - -### Maps and loops - -Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. - -Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult. - -#### Modify map - -To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: - -```scss -$theme-colors: ( - "primary": #0074d9, - "danger": #ff4136 -); -``` - -#### Add to map - -To add a new color to `$theme-colors`, add the new key and value: - -```scss -$theme-colors: ( - "custom-color": #900 -); -``` - -#### Remove from map - -To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options: - -```scss -// Required -@import "../node_modules/bootstrap/scss/functions"; -@import "../node_modules/bootstrap/scss/variables"; -@import "../node_modules/bootstrap/scss/mixins"; - -$theme-colors: map-remove($theme-colors, "info", "light", "dark"); - -// Optional -@import "../node_modules/bootstrap/scss/root"; -@import "../node_modules/bootstrap/scss/reboot"; -@import "../node_modules/bootstrap/scss/type"; -... -``` - -#### Required keys - -Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used. - -For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values. - -### Functions - -Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps: - -```scss -@function color($key: "blue") { - @return map-get($colors, $key); -} - -@function theme-color($key: "primary") { - @return map-get($theme-colors, $key); -} - -@function gray($key: "100") { - @return map-get($grays, $key); -} -``` - -These allow you to pick one color from a Sass map much like how you'd use a color variable from v3. - -```scss -.custom-element { - color: gray("100"); - background-color: theme-color("dark"); -} -``` - -We also have another function for getting a particular _level_ of color from the `$theme-colors` map. Negative level values will lighten the color, while higher levels will darken. - -```scss -@function theme-color-level($color-name: "primary", $level: 0) { - $color: theme-color($color-name); - $color-base: if($level > 0, #000, #fff); - $level: abs($level); - - @return mix($color-base, $color, $level * $theme-color-interval); -} -``` - -In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. - -```scss -.custom-element { - color: theme-color-level(primary, -10); -} -``` - -Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose. - -#### Color contrast - -An additional function we include in Bootstrap is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. - -For example, to generate color swatches from our `$theme-colors` map: - -```scss -@each $color, $value in $theme-colors { - .swatch-#{$color} { - color: color-yiq($value); - } -} -``` - -It can also be used for one-off contrast needs: - -```scss -.custom-element { - color: color-yiq(#000); // returns `color: #fff` -} -``` - -You can also specify a base color with our color map functions: - -```scss -.custom-element { - color: color-yiq(theme-color("dark")); // returns `color: #fff` -} -``` - -#### 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. When using the `escape-svg` function, data URIs must be quoted. - -#### Add and Subtract functions - -We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct. - -Example where the calc is valid: - -```scss -$border-radius: .25rem; -$border-width: 1px; - -.element { - // Output calc(.25rem - 1px) is valid - border-radius: calc($border-radius - $border-width); -} - -.element { - // Output the same calc(.25rem - 1px) as above - border-radius: subtract($border-radius, $border-width); -} -``` - -Example where the calc is invalid: - -```scss -$border-radius: .25rem; -$border-width: 0; - -.element { - // Output calc(.25rem - 0) is invalid - border-radius: calc($border-radius - $border-width); -} - -.element { - // Output .25rem - border-radius: subtract($border-radius, $border-width); -} -``` - -## Sass options - -Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. - -You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file. - -| Variable | Values | Description | -| -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | -| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). | -| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | -| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | -| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | -| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | -| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | -| `$enable-hover-media-query` | `true` or `false` (default) | **Deprecated** | -| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | -| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | -| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | -| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | -| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{< docsref "/content/typography#responsive-font-sizes" >}}). | -| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | -| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. | - -## Color - -Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. - -### All colors - -All colors available in Bootstrap 4, are available as Sass variables and a Sass map in `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. - -<div class="row"> - {{< theme-colors.inline >}} - {{- range $.Site.Data.colors }} - {{- if (and (not (eq .name "white")) (not (eq .name "gray")) (not (eq .name "gray-dark"))) }} - <div class="col-md-4"> - <div class="p-3 mb-3 text-monospace swatch-{{ .name }}"> - <strong class="d-block">${{ .name }}</strong> - <small>{{ .hex }}</small> - </div> - </div> - {{ end -}} - {{ end -}} - {{< /theme-colors.inline >}} -</div> - -Here's how you can use these in your Sass: - -```scss -// With variable -.alpha { color: $purple; } - -// From the Sass map with our `color()` function -.beta { color: color("purple"); } -``` - -[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color`. - -{{< callout info >}} -In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. -{{< /callout >}} - -### Theme colors - -We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file. - -<div class="row"> - {{< theme-colors.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - <div class="col-md-4"> - <div class="p-3 mb-3 text-monospace bg-{{ .name }} {{ if (or (eq .name "light") (eq .name "warning")) }}text-dark{{ else }}text-white{{ end }}"> - <strong class="d-block">${{ .name }}</strong> - <small>{{ .hex }}</small> - </div> - </div> - {{ end -}} - {{< /theme-colors.inline >}} -</div> - -### Grays - -An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. Note that these are "cool grays", which tend towards a subtle blue tone, rather than neutral grays. - -<div class="row mb-3"> - <div class="col-md-4"> - {{< theme-colors.inline >}} - {{- range $.Site.Data.grays }} - <div class="p-3 text-monospace swatch-{{ .name }}"> - <strong class="d-block">$gray-{{ .name }}</strong> - <small>{{ .hex }}</small> - </div> - {{ end -}} - {{< /theme-colors.inline >}} - </div> -</div> - -Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: - -```scss -$colors: ( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 -) !default; -``` - -Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. - -## Components - -Many of Bootstrap's components and utilities are built with `@each` loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops. - -### Modifiers - -Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. - -Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities. - -```scss -// Generate alert modifier classes -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); - } -} - -// Generate `.bg-*` color utilities -@each $color, $value in $theme-colors { - @include bg-variant('.bg-#{$color}', $value); -} -``` - -### Responsive - -These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. - -```scss -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - .text#{$infix}-left { text-align: left !important; } - .text#{$infix}-right { text-align: right !important; } - .text#{$infix}-center { text-align: center !important; } - } -} -``` - -Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. - -## CSS variables - -Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping. - -### Available variables - -Here are the variables we include (note that the `:root` is required). They're located in our `_root.scss` file. - -```css -{{< root.inline >}} -{{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE ":root {([^}]*)}" $css 1 -}} - -{{- if (eq (len $match) 0) -}} -{{- errorf "Got no matches for :root in %q!" $.Page.Path -}} -{{- end -}} - -{{- index $match 0 -}} - -{{< /root.inline >}} -``` - -### Examples - -CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. - -```css -body { - font: 1rem/1.5 var(--font-family-sans-serif); -} -a { - color: var(--blue); -} -``` - -### Breakpoint variables - -While we originally included breakpoints in our CSS variables (e.g., `--breakpoint-md`), **these are not supported in media queries**, but they can still be used _within_ rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. [Learn more in the spec](https://www.w3.org/TR/css-variables-1/#using-variables). - -Here's an example of **what's not supported:** - -```css -@media (min-width: var(--breakpoint-sm)) { - ... -} -``` - -And here's an example of **what is supported:** - -```css -@media (min-width: 768px) { - .custom-element { - color: var(--primary); - } -} -``` diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/webpack.md b/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/webpack.md deleted file mode 100644 index 737f8eaa9..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/getting-started/webpack.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: docs -title: Webpack -description: Learn how to include Bootstrap in your project using Webpack. -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`): - -```js -import 'bootstrap'; -``` - -Alternatively, you may **import plugins individually** as needed: - -```js -import 'bootstrap/js/dist/util'; -import 'bootstrap/js/dist/alert'; -... -``` - -Bootstrap depends on [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/), -which are 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 --save jquery 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 "/getting-started/theming" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap: - -```scss -@import "custom"; -@import "~bootstrap/scss/bootstrap"; -``` - -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: - -```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 - }] -}, -... -``` - -### Importing Compiled CSS - -Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point: - -```js -import 'bootstrap/dist/css/bootstrap.min.css'; -``` - -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). - -```js -... -module: { - rules: [ - { - test: /\.css$/, - use: ['style-loader', 'css-loader'] - } - ] -} -... -``` |