2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00

Add a docsref shortcode.

This allows for the build to fail if a reference isn't found.
This commit is contained in:
XhmikosR
2019-02-04 12:22:02 +02:00
parent 23ddfa99a3
commit 5d6e896ebb
45 changed files with 111 additions and 110 deletions
@@ -105,11 +105,11 @@ For Firefox, in addition to the latest normal stable release, we also support th
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](/docs/{{< param docs_version >}}/browser-bugs/).
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 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page](/docs/{{< param docs_version >}}/getting-started/javascript/#compatibility-with-ie-11). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page]({{< docsref "/getting-started/javascript#compatibility-with-ie-11" >}}). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
## Modals and dropdowns on mobile
@@ -74,10 +74,10 @@ Bootstrap includes a handful of options for including some or all of our compile
<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="/docs/{{< param docs_version >}}/layout/grid/">Only grid system</a></td>
<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="/docs/{{< param docs_version >}}/utilities/flex/">Only flex utilities</a></td>
<td><a class="text-warning" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
</tr>
<tr>
<th scope="row">
@@ -85,7 +85,7 @@ Bootstrap includes a handful of options for including some or all of our compile
<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="/docs/{{< param docs_version >}}/content/reboot/">Only Reboot</a></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>
@@ -10,7 +10,7 @@ toc: true
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](/docs/{{< param docs_version >}}/getting-started/contents/#css-files))
- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
- Compiled and minified JavaScript plugins
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
@@ -24,7 +24,7 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
Should you require [build tools](/docs/{{< param docs_version >}}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
@@ -12,7 +12,7 @@ toc: true
## Quick start
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page](/docs/{{< param docs_version >}}/getting-started/download/).
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
### CSS
@@ -31,11 +31,11 @@ Many of our components require the use of JavaScript to function. Specifically,
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}}
If you use `<script type="module">`, please refer to our [using Bootstrap as a module](/docs/{{< param docs_version >}}/getting-started/javascript/#using-bootstrap-as-a-module) section.
If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents](/docs/{{< param docs_version >}}/getting-started/contents/#precompiled-bootstrap) section.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
{{< partial "getting-started/components-requiring-javascript" >}}
@@ -67,7 +67,7 @@ Be sure to have your pages set up with the latest design and development standar
</html>
{{< /highlight >}}
That's all you need for overall page requirements. Visit the [Layout docs](/docs/{{< param docs_version >}}/layout/overview/) or [our official examples](/docs/{{< param docs_version >}}/examples/) to start laying out your site's content and components.
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
@@ -112,7 +112,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box
### Reboot
For improved cross-browser rendering, we use [Reboot](/docs/{{< param docs_version >}}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
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
@@ -231,18 +231,18 @@ You can find and customize these variables for key global options in Bootstrap's
| Variable | Values | Description |
| -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/docs/{{< param docs_version >}}/utilities/spacing/). |
| `$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 `box-shadow` styles on various components. |
| `$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](/docs/{{< param docs_version >}}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$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](/docs/{{< param docs_version >}}/content/typography/#responsive-font-sizes). |
| `$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`. |
@@ -276,7 +276,7 @@ Here's how you can use these in your Sass:
.beta { color: color("purple"); }
{{< /highlight >}}
[Color utility classes](/docs/{{< param docs_version >}}/utilities/colors/) are also available for setting `color` and `background-color`.
[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.
@@ -8,11 +8,11 @@ toc: true
## Installing Bootstrap
[Install bootstrap](/docs/{{< param docs_version >}}/getting-started/download/#npm) as a Node.js module using npm.
[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
## Importing JavaScript
Import [Bootstrap's JavaScript](/docs/{{< param docs_version >}}/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`):
Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
{{< highlight js >}}
import 'bootstrap';
@@ -34,7 +34,7 @@ This means that you will have to make sure to add both of them to your `package.
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](/docs/{{< param docs_version >}}/getting-started/theming/). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
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:
{{< highlight scss >}}
@import "custom";