mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
XhmikosR
parent
631b5d4df1
commit
57e045f0ab
@ -143,14 +143,14 @@ class Dropdown {
|
||||
return
|
||||
}
|
||||
|
||||
// Disable totally Popper.js for Dropdown in Navbar
|
||||
// Totally disable Popper for Dropdowns in Navbar
|
||||
if (!this._inNavbar && usePopper) {
|
||||
/**
|
||||
* Check for Popper dependency
|
||||
* Popper - https://popper.js.org
|
||||
*/
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org/)')
|
||||
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
|
||||
}
|
||||
|
||||
let referenceElement = this._element
|
||||
@ -334,7 +334,7 @@ class Dropdown {
|
||||
}
|
||||
}
|
||||
|
||||
// Disable Popper.js if we have a static display
|
||||
// Disable Popper if we have a static display
|
||||
if (this._config.display === 'static') {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: false
|
||||
|
||||
@ -114,7 +114,7 @@ const TRIGGER_MANUAL = 'manual'
|
||||
class Tooltip {
|
||||
constructor(element, config) {
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)')
|
||||
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
@ -747,7 +747,7 @@ $(function () {
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
|
||||
QUnit.test('Dropdown should not use Popper in navbar', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' +
|
||||
@ -770,7 +770,7 @@ $(function () {
|
||||
$triggerDropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
|
||||
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper')
|
||||
done()
|
||||
})
|
||||
$triggerDropdown.trigger($.Event('click'))
|
||||
@ -1084,7 +1084,7 @@ $(function () {
|
||||
done()
|
||||
})
|
||||
|
||||
QUnit.test('should not use Popper.js if display set to static', function (assert) {
|
||||
QUnit.test('should not use Popper if display set to static', function (assert) {
|
||||
assert.expect(1)
|
||||
var dropdownHTML =
|
||||
'<div class="dropdown">' +
|
||||
@ -1106,7 +1106,7 @@ $(function () {
|
||||
|
||||
$dropdown.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
// Popper.js add this attribute when we use it
|
||||
// Popper adds this attribute when we use it
|
||||
assert.strictEqual(dropdownMenu.getAttribute('x-placement'), null)
|
||||
done()
|
||||
})
|
||||
@ -1114,7 +1114,7 @@ $(function () {
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should call Popper.js and detect navbar on update', function (assert) {
|
||||
QUnit.test('should call Popper and detect navbar on update', function (assert) {
|
||||
assert.expect(3)
|
||||
|
||||
var dropdownHTML =
|
||||
@ -1546,7 +1546,7 @@ $(function () {
|
||||
assert.ok(typeof offset.fn === 'undefined')
|
||||
})
|
||||
|
||||
QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) {
|
||||
QUnit.test('should allow to pass config to Popper with `popperConfig`', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var dropdownHTML =
|
||||
|
||||
@ -998,7 +998,7 @@ $(function () {
|
||||
}, 200)
|
||||
})
|
||||
|
||||
QUnit.test('should call Popper.js to update', function (assert) {
|
||||
QUnit.test('should call Popper to update', function (assert) {
|
||||
assert.expect(2)
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
|
||||
@ -1014,7 +1014,7 @@ $(function () {
|
||||
assert.ok(spyPopper.called)
|
||||
})
|
||||
|
||||
QUnit.test('should not call Popper.js to update', function (assert) {
|
||||
QUnit.test('should not call Popper to update', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
|
||||
@ -1027,7 +1027,7 @@ $(function () {
|
||||
assert.ok(tooltip._popper === null)
|
||||
})
|
||||
|
||||
QUnit.test('should use Popper.js to get the tip on placement change', function (assert) {
|
||||
QUnit.test('should use Popper to get the tip on placement change', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
|
||||
@ -1267,7 +1267,7 @@ $(function () {
|
||||
assert.strictEqual(tooltip.config.sanitize, true)
|
||||
})
|
||||
|
||||
QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) {
|
||||
QUnit.test('should allow to pass config to Popper with `popperConfig`', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// When enabled Popper.js, reset basic dropdown position
|
||||
// When Popper is enabled, reset the basic dropdown position
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
.dropdown-menu {
|
||||
&[x-placement^="top"],
|
||||
|
||||
@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
|
||||
|
||||
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
|
||||
@ -590,7 +590,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
|
||||
**Heads up!** Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
@ -640,7 +640,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Note that you don't need to add a `data-display="static"` attribute to dropdown buttons in navbars, since Popper.js isn't used in navbars.
|
||||
Note that you don't need to add a `data-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars.
|
||||
|
||||
## Menu content
|
||||
|
||||
@ -828,38 +828,38 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>
|
||||
<p>Offset of the dropdown relative to its target.</p>
|
||||
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
|
||||
<p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
||||
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>flip</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
|
||||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>boundary</td>
|
||||
<td>string | element</td>
|
||||
<td>'scrollParent'</td>
|
||||
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reference</td>
|
||||
<td>string | element</td>
|
||||
<td>'toggle'</td>
|
||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
|
||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display</td>
|
||||
<td>string</td>
|
||||
<td>'dynamic'</td>
|
||||
<td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td>
|
||||
<td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>popperConfig</td>
|
||||
<td>null | object</td>
|
||||
<td>null</td>
|
||||
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
|
||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
|
||||
- Popovers rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency.
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
@ -260,14 +260,14 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>offset</td>
|
||||
<td>number | string</td>
|
||||
<td>0</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fallbackPlacement</td>
|
||||
<td>string | array</td>
|
||||
<td>'flip'</td>
|
||||
<td>Allow to specify which position Popper will use on fallback. For more information refer to
|
||||
Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
||||
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customClass</td>
|
||||
@ -282,7 +282,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>boundary</td>
|
||||
<td>string | element</td>
|
||||
<td>'scrollParent'</td>
|
||||
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sanitize</td>
|
||||
@ -306,7 +306,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>popperConfig</td>
|
||||
<td>null | object</td>
|
||||
<td>null</td>
|
||||
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
|
||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
|
||||
- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for tooltips to work!
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
@ -240,7 +240,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>
|
||||
<p>Offset of the tooltip relative to its target.</p>
|
||||
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
|
||||
<p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
||||
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -248,7 +248,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>string | array</td>
|
||||
<td>'flip'</td>
|
||||
<td>Allow to specify which position Popper will use on fallback. For more information refer to
|
||||
Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
||||
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customClass</td>
|
||||
@ -263,7 +263,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>boundary</td>
|
||||
<td>string | element</td>
|
||||
<td>'scrollParent'</td>
|
||||
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sanitize</td>
|
||||
@ -287,7 +287,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<td>popperConfig</td>
|
||||
<td>null | object</td>
|
||||
<td>null</td>
|
||||
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
|
||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -13,7 +13,7 @@ Download ready-to-use compiled code for **Bootstrap v{{< param current_version >
|
||||
- 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.js).
|
||||
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>
|
||||
|
||||
@ -43,7 +43,7 @@ Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached v
|
||||
<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.js separately, add Popper.js before our JS, via a CDN preferably.
|
||||
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>
|
||||
|
||||
@ -24,9 +24,9 @@ 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. 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.
|
||||
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.js, and then our JavaScript plugins.
|
||||
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
|
||||
|
||||
@ -39,7 +39,7 @@ Include every Bootstrap JavaScript plugin with one of our two bundles. Both `boo
|
||||
|
||||
#### Separate
|
||||
|
||||
If you decide to go with the separate scripts solution, Popper.js must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
|
||||
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>
|
||||
@ -49,7 +49,7 @@ If you decide to go with the separate scripts solution, Popper.js must come firs
|
||||
|
||||
#### Components
|
||||
|
||||
Curious which components explicitly require jQuery, our JavaScript, and Popper.js? Click the show components link below. If you're unsure about the page structure, keep reading for an example page template.
|
||||
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>
|
||||
@ -58,10 +58,10 @@ Curious which components explicitly require jQuery, our JavaScript, and Popper.j
|
||||
- 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.js](https://popper.js.org/))
|
||||
- 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.js](https://popper.js.org/))
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
|
||||
- Scrollspy for scroll behavior and navigation updates
|
||||
{{< /markdown >}}
|
||||
</details>
|
||||
@ -92,7 +92,7 @@ Be sure to have your pages set up with the latest design and development standar
|
||||
<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: jQuery, Popper.js, and Bootstrap JS
|
||||
<!-- Option 2: jQuery, 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>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/">jsDelivr</a>.
|
||||
</p>
|
||||
<p>
|
||||
See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper.js and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
|
||||
See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
|
||||
</p>
|
||||
<a class="btn btn-lg btn-outline-primary mb-3" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
|
||||
</div>
|
||||
@ -36,7 +36,7 @@
|
||||
{{ highlight (printf (`<!-- CSS -->
|
||||
<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">
|
||||
`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
|
||||
{{ highlight (printf (`<!-- jQuery and JavaScript Bundle with Popper.js -->
|
||||
{{ highlight (printf (`<!-- jQuery and JavaScript Bundle with Popper -->
|
||||
<script src="%s" integrity=%q crossorigin="anonymous"></script>
|
||||
<script src="%s" integrity=%q crossorigin="anonymous"></script>
|
||||
`) .Site.Params.cdn.jquery (.Site.Params.cdn.jquery_hash | safeHTMLAttr) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user