diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 994c5b1a6b..3eecceea28 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -80,18 +80,18 @@ When an alert is dismissed, the element is completely removed from the page stru Enable dismissal of an alert via JavaScript: -{{< highlight js >}} +```js var alertList = document.querySelectorAll('.alert') alertList.forEach(function (alert) { new bootstrap.Alert(alert) }) -{{< /highlight >}} +``` Or with `data` attributes on a button **within the alert**, as demonstrated above: -{{< highlight html >}} +```html -{{< /highlight >}} +``` Note that closing an alert will remove it from the DOM. @@ -99,10 +99,10 @@ Note that closing an alert will remove it from the DOM. You can create an alert instance with the alert constructor, for example: -{{< highlight js >}} +```js var myAlert = document.getElementById('myAlert') var bsAlert = new bootstrap.Alert(myAlert) -{{< /highlight >}} +``` This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) @@ -141,11 +141,11 @@ This makes an alert listen for click events on descendant elements which have th -{{< highlight js >}} +```js var alertNode = document.querySelector('.alert') var alert = bootstrap.Alert.getInstance(alertNode) alert.close() -{{< /highlight >}} +``` ### Events @@ -174,11 +174,11 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali -{{< highlight js >}} +```js var myAlert = document.getElementById('myAlert') myAlert.addEventListener('closed.bs.alert', function () { // do something, for instance, explicitly move focus to the most appropriate element, // so it doesn't get lost/reset to the start of the page // document.getElementById('...').focus() }) -{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md index 730faf2db2..7a5992bbc7 100644 --- a/site/content/docs/5.0/components/button-group.md +++ b/site/content/docs/5.0/components/button-group.md @@ -163,11 +163,11 @@ Instead of applying button sizing classes to every button in a group, just add ` -{{< highlight html >}} +```html
...
...
...
-{{< /highlight >}} +``` ## Nesting @@ -261,8 +261,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli -{{< highlight html >}} +```html
...
-{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index 4b4522ab77..845aba7224 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -129,10 +129,10 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to You can create a button instance with the button constructor, for example: -{{< highlight js >}} +```js var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) -{{< /highlight >}} +``` @@ -163,10 +163,10 @@ var bsButton = new bootstrap.Button(button) For example, to toggle all buttons -{{< highlight js >}} +```js var buttons = document.querySelectorAll('.btn') buttons.forEach(function (button) { var button = new bootstrap.Button(button) button.toggle() }) -{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index c478cbfadc..fbfbff4d5d 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -263,10 +263,10 @@ The `data-ride="carousel"` attribute is used to mark a carousel as animating sta Call carousel manually with: -{{< highlight js >}} +```js var myCarousel = document.querySelector('#myCarousel') var carousel = new bootstrap.Carousel(myCarousel) -{{< /highlight >}} +``` ### Options @@ -330,13 +330,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items: -{{< highlight js >}} +```js var myCarousel = document.querySelector('#myCarousel') var carousel = new bootstrap.Carousel(myCarousel, { interval: 2000, wrap: false }) -{{< /highlight >}} +```
@@ -411,13 +411,13 @@ All carousel events are fired at the carousel itself (i.e. at the `
@@ -264,9 +264,9 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
-{{< highlight js >}} +```js var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... }) -{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index ee6182f297..827cc2c747 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -122,7 +122,7 @@ The best part is you can do this with any button variant, too: -{{< highlight html >}} +```html
-{{< /highlight >}} +``` ### Split button @@ -225,7 +225,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the -{{< highlight html >}} +```html
@@ -240,7 +240,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
  • Separated link
    • -{{< /highlight >}} +``` ## Sizing @@ -274,7 +274,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro -{{< highlight html >}} +```html
    -{{< /highlight >}} +```
    @@ -325,7 +325,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
    -{{< highlight html >}} +```
    -{{< /highlight >}} +``` ## Dark dropdowns @@ -429,7 +429,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. -{{< highlight html >}} +```html
    -{{< /highlight >}} +``` ### Dropright @@ -488,7 +488,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th -{{< highlight html >}} +```html
    -{{< /highlight >}} +``` ### Dropleft @@ -549,7 +549,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the -{{< highlight html >}} +```html
    -{{< /highlight >}} +``` ## Menu items @@ -825,7 +825,7 @@ On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. -{{< highlight html >}} +```html
    -{{< /highlight >}} +``` ### Via JavaScript Call the dropdowns via JavaScript: -{{< highlight js >}} +```js var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new bootstrap.Dropdown(dropdownToggleEl) }) -{{< /highlight >}} +``` {{< callout info >}} ##### `data-toggle="dropdown"` still required @@ -1009,9 +1009,9 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element and have -{{< highlight js >}} +```js var myDropdown = document.getElementById('myDropdown') myDropdown.addEventListener('show.bs.dropdown', function () { // do something... }) -{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index a82bdddf79..fa576cd661 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -288,7 +288,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled -{{< highlight html >}} +```html
    @@ -307,14 +307,14 @@ Use the tab JavaScript plugin—include it individually or through the compiled
    -{{< /highlight >}} +``` ### Using data attributes You can activate a list group navigation without writing any JavaScript by simply specifying `data-toggle="list"` or on an element. Use these data attributes on `.list-group-item`.
    -{{< highlight html >}} +```html
    Home @@ -330,14 +330,14 @@ You can activate a list group navigation without writing any JavaScript by simpl
    ...
    ...
    -{{< /highlight >}} +```
    ### Via JavaScript Enable tabbable list item via JavaScript (each list item needs to be activated individually): -{{< highlight js >}} +```js var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a')) triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl) @@ -347,30 +347,30 @@ triggerTabList.forEach(function (triggerEl) { tabTrigger.show() }) }) -{{< /highlight >}} +``` You can activate individual list item in several ways: -{{< highlight js >}} +```js var triggerEl = document.querySelector('#myTab a[href="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab -{{< /highlight >}} +``` ### Fade effect To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible. -{{< highlight html >}} +```html
    ...
    ...
    ...
    ...
    -{{< /highlight >}} +``` ### Methods @@ -378,7 +378,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. -{{< highlight html >}} +```html
    Home Profile @@ -399,18 +399,18 @@ Activates a list item element and content container. Tab should have either a `d firstTab.show() -{{< /highlight >}} +``` #### show Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs). -{{< highlight js >}} +```js var someListItemEl = document.querySelector('#someListItem') var tab = new bootstrap.Tab(someListItemEl) tab.show() -{{< /highlight >}} +``` #### dispose @@ -420,10 +420,10 @@ Destroys an element's tab. *Static* method which allows you to get the tab instance associated with a DOM element -{{< highlight js >}} +```js var triggerEl = document.querySelector('#trigger') var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance -{{< /highlight >}} +``` ### Events @@ -463,10 +463,10 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will -{{< highlight js >}} +```js var tabEl = document.querySelector('a[data-toggle="list"]') tabEl.addEventListener('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) -{{< /highlight >}} +``` diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 8064999ec9..542f535bc2 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -17,14 +17,14 @@ Before getting started with Bootstrap's modal component, be sure to read the fol - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details. - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: -{{< highlight js >}} +```js var myModal = document.getElementById('myModal') var myInput = document.getElementById('myInput') myModal.addEventListener('shown.bs.modal', function () { myInput.focus() }) -{{< /highlight >}} +``` {{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} @@ -58,7 +58,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
    -{{< highlight html >}} +```html
    @@ -76,7 +76,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
    -{{< /highlight >}} +``` ### Live demo @@ -106,7 +106,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and -{{< highlight html >}} +```html -{{< highlight html >}} +```html -{{< highlight html >}} +```html
    ...
    -{{< /highlight >}} +``` ### Vertically centered @@ -335,7 +335,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. -{{< highlight html >}} +```html
    ... @@ -345,7 +345,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
    ...
    -{{< /highlight >}} +``` ### Tooltips and popovers @@ -379,7 +379,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
    -{{< highlight html >}} +```html
    Popover in a modal

    This button triggers a popover on click.

    @@ -387,7 +387,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
    Tooltips in a modal

    This link and that link have tooltips on hover.

    -{{< /highlight >}} +``` ### Using the grid @@ -442,7 +442,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w -{{< highlight html >}} +```html
    @@ -471,7 +471,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
    -{{< /highlight >}} +``` ### Varying modal content @@ -512,7 +512,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati {{< /example >}} -{{< highlight js >}} +```js var exampleModal = document.getElementById('exampleModal') exampleModal.addEventListener('show.bs.modal', function (event) { // Button that triggered the modal @@ -529,7 +529,7 @@ exampleModal.addEventListener('show.bs.modal', function (event) { modalTitle.textContent = 'New message to ' + recipient modalBodyInput.value = recipient }) -{{< /highlight >}} +``` ### Change animation @@ -541,11 +541,11 @@ If you want for example a zoom-in animation, you can set `$modal-fade-transform: For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. -{{< highlight html >}} +```html -{{< /highlight >}} +``` ### Dynamic heights @@ -603,11 +603,11 @@ Our default modal without modifier class constitutes the "medium" size modal. -{{< highlight html >}} +```html
    ...
    ...
    ...
    -{{< /highlight >}} +``` -{{< highlight html >}} +```html