diff options
| author | Rohit Sharma <rohit2sharma95@gmail.com> | 2020-07-22 22:33:11 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2020-11-14 08:09:15 +0300 |
| commit | 418f17ee2b849dafdc39623ba2378df9229164a7 (patch) | |
| tree | 7446b75f6b2a8e8ad9f5f8ab8143b4d451c94a14 | |
| parent | fe961c192d951bde610cdcd4817f4d8548d33141 (diff) | |
Add `bs` in data attributes
- Add `bs` in data APIs everywhere
- Update unit tests
76 files changed, 827 insertions, 807 deletions
diff --git a/js/src/alert.js b/js/src/alert.js index 7eb53ac0bc..724cda0173 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -const SELECTOR_DISMISS = '[data-dismiss="alert"]' +const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]' const EVENT_CLOSE = `close${EVENT_KEY}` const EVENT_CLOSED = `closed${EVENT_KEY}` diff --git a/js/src/button.js b/js/src/button.js index dc9bd0e9db..42376943de 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]' const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` diff --git a/js/src/carousel.js b/js/src/carousel.js index 84a88bb04d..58844a3873 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item' const SELECTOR_ITEM_IMG = '.carousel-item img' const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev' const SELECTOR_INDICATORS = '.carousel-indicators' -const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]' -const SELECTOR_DATA_RIDE = '[data-ride="carousel"]' +const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]' +const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]' const PointerType = { TOUCH: 'touch', @@ -419,7 +419,7 @@ class Carousel { return } - const elementInterval = parseInt(element.getAttribute('data-interval'), 10) + const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10) if (elementInterval) { this._config.defaultInterval = this._config.defaultInterval || this._config.interval @@ -576,7 +576,7 @@ class Carousel { ...Manipulator.getDataAttributes(target), ...Manipulator.getDataAttributes(this) } - const slideIndex = this.getAttribute('data-slide-to') + const slideIndex = this.getAttribute('data-bs-slide-to') if (slideIndex) { config.interval = false diff --git a/js/src/collapse.js b/js/src/collapse.js index 838d0f2a36..f3ca86f366 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -59,7 +59,7 @@ const WIDTH = 'width' const HEIGHT = 'height' const SELECTOR_ACTIVES = '.show, .collapsing' -const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** * ------------------------------------------------------------------------ @@ -74,7 +74,7 @@ class Collapse { this._config = this._getConfig(config) this._triggerArray = SelectorEngine.find( `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` + - `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]` + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]` ) const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -137,7 +137,7 @@ class Collapse { actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent) .filter(elem => { if (typeof this._config.parent === 'string') { - return elem.getAttribute('data-parent') === this._config.parent + return elem.getAttribute('data-bs-parent') === this._config.parent } return elem.classList.contains(CLASS_NAME_COLLAPSE) @@ -303,7 +303,7 @@ class Collapse { parent = SelectorEngine.findOne(parent) } - const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]` + const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]` SelectorEngine.find(selector, parent) .forEach(element => { diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index bcbd340ace..04b9543c8a 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -47,9 +47,13 @@ const Manipulator = { ...element.dataset } - Object.keys(attributes).forEach(key => { - attributes[key] = normalizeData(attributes[key]) - }) + Object.keys(attributes) + .filter(key => key.startsWith('bs')) + .forEach(key => { + let pureKey = key.replace(/^bs/, '') + pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length) + attributes[pureKey] = normalizeData(attributes[key]) + }) return attributes }, diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 3a3f12c488..c262997ce9 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right' const CLASS_NAME_NAVBAR = 'navbar' const CLASS_NAME_POSITION_STATIC = 'position-static' -const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_FORM_CHILD = '.dropdown form' const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_NAVBAR_NAV = '.navbar-nav' diff --git a/js/src/modal.js b/js/src/modal.js index d6d10ab935..c42dc154c2 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' -const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]' -const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' @@ -473,7 +473,7 @@ class Modal { .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] - Manipulator.setDataAttribute(element, 'padding-right', actualPadding) + Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding) element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` }) @@ -482,7 +482,7 @@ class Modal { .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] - Manipulator.setDataAttribute(element, 'margin-right', actualMargin) + Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin) element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px` }) @@ -490,7 +490,7 @@ class Modal { const actualPadding = document.body.style.paddingRight const calculatedPadding = window.getComputedStyle(document.body)['padding-right'] - Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding) + Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding) document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` } @@ -501,9 +501,9 @@ class Modal { // Restore fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) .forEach(element => { - const padding = Manipulator.getDataAttribute(element, 'padding-right') + const padding = Manipulator.getDataAttribute(element, 'bs-padding-right') if (typeof padding !== 'undefined') { - Manipulator.removeDataAttribute(element, 'padding-right') + Manipulator.removeDataAttribute(element, 'bs-padding-right') element.style.paddingRight = padding } }) @@ -511,19 +511,19 @@ class Modal { // Restore sticky content and navbar-toggler margin SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) .forEach(element => { - const margin = Manipulator.getDataAttribute(element, 'margin-right') + const margin = Manipulator.getDataAttribute(element, 'bs-margin-right') if (typeof margin !== 'undefined') { - Manipulator.removeDataAttribute(element, 'margin-right') + Manipulator.removeDataAttribute(element, 'bs-margin-right') element.style.marginRight = margin } }) // Restore body padding - const padding = Manipulator.getDataAttribute(document.body, 'padding-right') + const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right') if (typeof padding === 'undefined') { document.body.style.paddingRight = '' } else { - Manipulator.removeDataAttribute(document.body, 'padding-right') + Manipulator.removeDataAttribute(document.body, 'bs-padding-right') document.body.style.paddingRight = padding } } diff --git a/js/src/popover.js b/js/src/popover.js index 7203d9babe..46b693e696 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -123,7 +123,7 @@ class Popover extends Tooltip { } _getContent() { - return this.element.getAttribute('data-content') || + return this.element.getAttribute('data-bs-content') || this.config.content } diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 53c1700a50..de456e0805 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_SPY = '[data-spy="scroll"]' +const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_NAV_LINKS = '.nav-link' const SELECTOR_NAV_ITEMS = '.nav-item' @@ -241,7 +241,7 @@ class ScrollSpy { this._clear() const queries = this._selector.split(',') - .map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`) + .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`) const link = SelectorEngine.findOne(queries.join(',')) diff --git a/js/src/tab.js b/js/src/tab.js index f7ebfc9cdc..56269e2fac 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_ACTIVE = '.active' const SELECTOR_ACTIVE_UL = ':scope > li > .active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active' diff --git a/js/src/toast.js b/js/src/toast.js index bf5a386e81..1e50b06693 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -52,7 +52,7 @@ const Default = { delay: 5000 } -const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]' /** * ------------------------------------------------------------------------ diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 0b19a96013..505f8c8532 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -443,7 +443,7 @@ class Tooltip { } getTitle() { - let title = this.element.getAttribute('data-original-title') + let title = this.element.getAttribute('data-bs-original-title') if (!title) { title = typeof this.config.title === 'function' ? @@ -578,11 +578,11 @@ class Tooltip { } _fixTitle() { - const titleType = typeof this.element.getAttribute('data-original-title') + const titleType = typeof this.element.getAttribute('data-bs-original-title') if (this.element.getAttribute('title') || titleType !== 'string') { this.element.setAttribute( - 'data-original-title', + 'data-bs-original-title', this.element.getAttribute('title') || '' ) diff --git a/js/src/util/index.js b/js/src/util/index.js index b7fac9c443..b8a53af969 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -33,7 +33,7 @@ const getUID = prefix => { } const getSelector = element => { - let selector = element.getAttribute('data-target') + let selector = element.getAttribute('data-bs-target') if (!selector || selector === '#') { const hrefAttr = element.getAttribute('href') @@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight const getjQuery = () => { const { jQuery } = window - if (jQuery && !document.body.hasAttribute('data-no-jquery')) { + if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery } diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js index 07c6674e65..ed427cd922 100644 --- a/js/tests/integration/bundle-modularity.js +++ b/js/tests/integration/bundle-modularity.js @@ -2,6 +2,6 @@ import 'popper.js' import Tooltip from '../../dist/tooltip' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js index 69d7543525..1c6e60bf5e 100644 --- a/js/tests/integration/bundle.js +++ b/js/tests/integration/bundle.js @@ -2,6 +2,6 @@ import 'popper.js' import { Tooltip } from '../../../dist/js/bootstrap.esm.js' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 5606755b17..0ea0b64c33 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -14,14 +14,14 @@ <div class="container"> <h1>Hello, world!</h1> <div class="mt-5"> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> - <div id="carouselExampleCaptions" class="carousel slide mt-2" data-ride="carousel"> + <div id="carouselExampleCaptions" class="carousel slide mt-2" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carouselExampleCaptions" data-slide-to="0"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="1" class="active"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" class="active"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item"> @@ -46,11 +46,11 @@ </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js index 9372215b65..a746d85011 100644 --- a/js/tests/unit/alert.spec.js +++ b/js/tests/unit/alert.spec.js @@ -23,7 +23,7 @@ describe('Alert', () => { it('should close an alert without instantiating it manually', () => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-dismiss="alert">x</button>', '</div>' ].join('') @@ -36,7 +36,7 @@ describe('Alert', () => { it('should close an alert without instantiating it manually with the parent selector', () => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-target=".alert" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-target=".alert" data-bs-dismiss="alert">x</button>', '</div>' ].join('') diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index ac32b4b897..44d7b54b18 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -27,8 +27,8 @@ describe('Button', () => { describe('data-api', () => { it('should toggle active class on click', () => { fixtureEl.innerHTML = [ - '<button class="btn" data-toggle="button">btn</button>', - '<button class="btn testParent" data-toggle="button"><div class="test"></div></button>' + '<button class="btn" data-bs-toggle="button">btn</button>', + '<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>' ].join('') const btn = fixtureEl.querySelector('.btn') @@ -53,7 +53,7 @@ describe('Button', () => { describe('toggle', () => { it('should toggle aria-pressed', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button" aria-pressed="false"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -70,7 +70,7 @@ describe('Button', () => { describe('dispose', () => { it('should dispose a button', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -85,7 +85,7 @@ describe('Button', () => { describe('jQueryInterface', () => { it('should handle config passed and toggle existing button', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -101,7 +101,7 @@ describe('Button', () => { }) it('should create new button instance and call toggle', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') @@ -115,7 +115,7 @@ describe('Button', () => { }) it('should just create a button instance without calling toggle', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index a4bd1bac86..8c928c429d 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -313,7 +313,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -357,7 +357,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -396,7 +396,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = () => {} fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -434,7 +434,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = () => {} fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -472,7 +472,7 @@ describe('Carousel', () => { clearPointerEvents() document.documentElement.ontouchstart = () => {} - fixtureEl.innerHTML = '<div class="carousel" data-interval="false"></div>' + fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>' const carouselEl = fixtureEl.querySelector('.carousel') const carousel = new Carousel(carouselEl) @@ -660,13 +660,13 @@ describe('Carousel', () => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <ol class="carousel-indicators">', - ' <li data-target="#myCarousel" data-slide-to="0" class="active"></li>', - ' <li id="secondIndicator" data-target="#myCarousel" data-slide-to="1"></li>', - ' <li data-target="#myCarousel" data-slide-to="2"></li>', + ' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>', + ' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>', + ' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>', ' </ol>', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -689,7 +689,7 @@ describe('Carousel', () => { it('should not call next when the page is not visible', () => { fixtureEl.innerHTML = [ '<div style="display: none;">', - ' <div class="carousel" data-interval="false"></div>', + ' <div class="carousel" data-bs-interval="false"></div>', '</div>' ].join('') @@ -878,8 +878,8 @@ describe('Carousel', () => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', - ' <div class="carousel-item active" data-interval="7">item 1</div>', - ' <div id="secondItem" class="carousel-item" data-interval="9385">item 2</div>', + ' <div class="carousel-item active" data-bs-interval="7">item 1</div>', + ' <div id="secondItem" class="carousel-item" data-bs-interval="9385">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -958,7 +958,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -985,7 +985,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1010,7 +1010,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1045,7 +1045,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1125,8 +1125,8 @@ describe('Carousel', () => { }) describe('data-api', () => { - it('should init carousels with data-ride="carousel" on load', () => { - fixtureEl.innerHTML = '<div data-ride="carousel"></div>' + it('should init carousels with data-bs-ride="carousel" on load', () => { + fixtureEl.innerHTML = '<div data-bs-ride="carousel"></div>' const carouselEl = fixtureEl.querySelector('div') const loadEvent = createEvent('load') @@ -1144,8 +1144,8 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>', '</div>' ].join('') @@ -1160,7 +1160,7 @@ describe('Carousel', () => { }, 10) }) - it('should create carousel and go to the next slide on click with data-slide-to', done => { + it('should create carousel and go to the next slide on click with data-bs-slide-to', done => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', @@ -1168,7 +1168,7 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div id="next" data-target="#myCarousel" data-slide-to="1"></div>', + ' <div id="next" data-bs-target="#myCarousel" data-bs-slide-to="1"></div>', '</div>' ].join('') @@ -1191,8 +1191,8 @@ describe('Carousel', () => { ' <div class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>', '</div>' ].join('') @@ -1211,8 +1211,8 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>', '</div>' ].join('') diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index a5e101aad1..c1ead859a9 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -32,7 +32,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -55,7 +55,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -74,7 +74,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -120,15 +120,15 @@ describe('Collapse', () => { expect(collapse.hide).toHaveBeenCalled() }) - it('should find collapse children if they have collapse class too not only data-parent', done => { + it('should find collapse children if they have collapse class too not only data-bs-parent', done => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item 1</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item 1</a>', ' <div id="collapse1" class="collapse show">Lorem ipsum 1</div>', ' </div>', ' <div class="item">', - ' <a id="triggerCollapse2" data-toggle="collapse" href="#">Toggle item 2</a>', + ' <a id="triggerCollapse2" data-bs-toggle="collapse" href="#">Toggle item 2</a>', ' <div id="collapse2" class="collapse">Lorem ipsum 2</div>', ' </div>', '</div>' @@ -376,7 +376,7 @@ describe('Collapse', () => { describe('data-api', () => { it('should show multiple collapsed elements', done => { fixtureEl.innerHTML = [ - '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>', + '<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>', '<div id="collapse1" class="collapse multi"></div>', '<div id="collapse2" class="collapse multi"></div>' ].join('') @@ -398,7 +398,7 @@ describe('Collapse', () => { it('should hide multiple collapsed elements', done => { fixtureEl.innerHTML = [ - '<a role="button" data-toggle="collapse" href=".multi"></a>', + '<a role="button" data-bs-toggle="collapse" href=".multi"></a>', '<div id="collapse1" class="collapse multi show"></div>', '<div id="collapse2" class="collapse multi show"></div>' ].join('') @@ -420,8 +420,8 @@ describe('Collapse', () => { it('should remove "collapsed" class from target when collapse is shown', done => { fixtureEl.innerHTML = [ - '<a id="link1" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>', - '<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>', + '<a id="link1" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>', + '<a id="link2" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>', '<div id="test1"></div>' ].join('') @@ -442,8 +442,8 @@ describe('Collapse', () => { it('should add "collapsed" class to target when collapse is hidden', done => { fixtureEl.innerHTML = [ - '<a id="link1" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>', - '<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>', + '<a id="link1" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>', + '<a id="link2" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>', '<div id="test1" class="show"></div>' ].join('') @@ -466,12 +466,12 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div id="accordion">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', - ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>', ' </div>', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>', ' </div>', '</div>' ].join('') @@ -499,7 +499,7 @@ describe('Collapse', () => { it('should not prevent event for input', done => { fixtureEl.innerHTML = [ - '<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1">', + '<input type="checkbox" data-bs-toggle="collapse" data-bs-target="#collapsediv1">', '<div id="collapsediv1"></div>' ].join('') @@ -521,14 +521,14 @@ describe('Collapse', () => { ' <div class="row">', ' <div class="col-lg-6">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', - ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>', ' </div>', ' </div>', ' <div class="col-lg-6">', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>', ' </div>', ' </div>', ' </div>', @@ -569,12 +569,12 @@ describe('Collapse', () => { it('should allow accordion to target multiple elements', done => { fixtureEl.innerHTML = [ '<div id="accordion">', - ' <a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>', - ' <a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>', + ' <a id="linkTriggerOne" data-bs-toggle="collapse" data-bs-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" data-bs-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>', '</div>' ].join('') @@ -647,19 +647,19 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div id="accordion">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', - ' <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">', ' <div id="nestedAccordion">', ' <div class="item">', - ' <a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>', - ' <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>', + ' <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>', + ' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>', ' </div>', ' </div>', ' </div>', ' </div>', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>', ' </div>', '</div>' ].join('') @@ -703,9 +703,9 @@ describe('Collapse', () => { it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => { fixtureEl.innerHTML = [ - '<a id="trigger1" role="button" data-toggle="collapse" href="#test1"></a>', - '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>', - '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>', + '<a id="trigger1" role="button" data-bs-toggle="collapse" href="#test1"></a>', + '<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>', + '<a id="trigger3" role="button" data-bs-toggle="collapse" href=".multi"></a>', '<div id="test1" class="multi"></div>', '<div id="test2" class="multi"></div>' ].join('') diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js index 8d8118f2ba..747e8bfd74 100644 --- a/js/tests/unit/dom/manipulator.spec.js +++ b/js/tests/unit/dom/manipulator.spec.js @@ -60,14 +60,30 @@ describe('Manipulator', () => { expect().nothing() }) - it('should get all data attributes', () => { - fixtureEl.innerHTML = '<div data-test="js" data-test2="js2" ></div>' + it('should get all data attributes, without bs prefixed as well', () => { + fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value"></div>' const div = fixtureEl.querySelector('div') expect(Manipulator.getDataAttributes(div)).toEqual({ - test: 'js', - test2: 'js2' + bsToggle: 'tabs', + bsTarget: '#element', + another: 'value', + toggle: 'tabs', + target: '#element' + }) + }) + + it('should remove just prefixed bs keyword from the attributes and override original attribute with bs prefixed', () => { + fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-toggle="override" data-target-bs="#element" data-in-bs-out="in-between"></div>' + + const div = fixtureEl.querySelector('div') + + expect(Manipulator.getDataAttributes(div)).toEqual({ + bsToggle: 'tabs', + targetBs: '#element', + inBsOut: 'in-between', + toggle: 'tabs' }) }) }) diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 17a5b41cf0..b1a99e7e6b 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -39,7 +39,7 @@ describe('Dropdown', () => { it('should create offset modifier correctly when offset option is a function', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -47,7 +47,7 @@ describe('Dropdown', () => { ].join('') const getOffset = offsets => offsets - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { offset: getOffset }) @@ -61,7 +61,7 @@ describe('Dropdown', () => { it('should create offset modifier correctly when offset option is not a function', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -69,7 +69,7 @@ describe('Dropdown', () => { ].join('') const myOffset = 7 - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { offset: myOffset }) @@ -80,7 +80,7 @@ describe('Dropdown', () => { expect(offset.fn).toBeUndefined() }) - it('should add a listener on trigger which do not have data-toggle="dropdown"', () => { + it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', ' <button class="btn">Dropdown</button>', @@ -103,14 +103,14 @@ describe('Dropdown', () => { it('should allow to pass config to popper.js with `popperConfig`', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { popperConfig: { placement: 'left' @@ -127,14 +127,14 @@ describe('Dropdown', () => { it('should toggle a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -150,13 +150,13 @@ describe('Dropdown', () => { it('should destroy old popper references on toggle', done => { fixtureEl.innerHTML = [ '<div class="first dropdown">', - ' <button class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="firstBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>', '<div class="second dropdown">', - ' <button class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="secondBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -187,7 +187,7 @@ describe('Dropdown', () => { it('should toggle a dropdown and add/remove event listener on mobile', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -195,7 +195,7 @@ describe('Dropdown', () => { ].join('') const defaultValueOnTouchStart = document.documentElement.ontouchstart - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -226,14 +226,14 @@ describe('Dropdown', () => { it('should toggle a dropdown at the right', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu dropdown-menu-right">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -249,14 +249,14 @@ describe('Dropdown', () => { it('should toggle a dropup', done => { fixtureEl.innerHTML = [ '<div class="dropup">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropupEl = fixtureEl.querySelector('.dropup') const dropdown = new Dropdown(btnDropdown) @@ -272,14 +272,14 @@ describe('Dropdown', () => { it('should toggle a dropup at the right', done => { fixtureEl.innerHTML = [ '<div class="dropup">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu dropdown-menu-right">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropupEl = fixtureEl.querySelector('.dropup') const dropdown = new Dropdown(btnDropdown) @@ -295,14 +295,14 @@ describe('Dropdown', () => { it('should toggle a dropright', done => { fixtureEl.innerHTML = [ '<div class="dropright">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const droprightEl = fixtureEl.querySelector('.dropright') const dropdown = new Dropdown(btnDropdown) @@ -318,14 +318,14 @@ describe('Dropdown', () => { it('should toggle a dropleft', done => { fixtureEl.innerHTML = [ '<div class="dropleft">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropleftEl = fixtureEl.querySelector('.dropleft') const dropdown = new Dropdown(btnDropdown) @@ -341,14 +341,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with parent reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: 'parent' @@ -366,14 +366,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with a dom node reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: fixtureEl @@ -391,14 +391,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with a jquery object reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: { 0: fixtureEl, jquery: 'jQuery' } @@ -416,14 +416,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -442,14 +442,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -468,14 +468,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the menu is shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -494,14 +494,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if show event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -526,14 +526,14 @@ describe('Dropdown', () => { it('should show a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -548,14 +548,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -574,14 +574,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -600,14 +600,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the menu is shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -626,14 +626,14 @@ describe('Dropdown', () => { it('should not show a dropdown if show event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -658,14 +658,14 @@ describe('Dropdown', () => { it('should hide a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -681,14 +681,14 @@ describe('Dropdown', () => { it('should hide a dropdown and destroy popper', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -708,14 +708,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -735,14 +735,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -762,14 +762,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the menu is not shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -788,14 +788,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if hide event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -821,14 +821,14 @@ describe('Dropdown', () => { it('should dispose dropdown', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) expect(dropdown._popper).toBeNull() @@ -844,14 +844,14 @@ describe('Dropdown', () => { it('should dispose dropdown with popper.js', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) dropdown.toggle() @@ -875,14 +875,14 @@ describe('Dropdown', () => { it('should call popper.js and detect navbar on update', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) dropdown.toggle() @@ -901,14 +901,14 @@ describe('Dropdown', () => { it('should just detect navbar on update', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) spyOn(dropdown, '_detectNavbar') @@ -924,14 +924,14 @@ describe('Dropdown', () => { it('should not add class position-static to dropdown if boundary not set', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -945,14 +945,14 @@ describe('Dropdown', () => { it('should add class position-static to dropdown if boundary not scrollParent', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -966,14 +966,14 @@ describe('Dropdown', () => { it('should show and hide a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') let showEventTriggered = false let hideEventTriggered = false @@ -1009,7 +1009,7 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<nav class="navbar navbar-expand-md navbar-light bg-light">', ' <div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -1017,7 +1017,7 @@ describe('Dropdown', () => { '</nav>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') @@ -1032,14 +1032,14 @@ describe('Dropdown', () => { it('should not use popper.js if display set to static', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') @@ -1055,14 +1055,14 @@ describe('Dropdown', () => { it('should remove "show" class if tabbing outside of menu', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -1086,7 +1086,7 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<div class="nav">', ' <div class="dropdown" id="testmenu">', - ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>', + ' <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', @@ -1094,14 +1094,14 @@ describe('Dropdown', () => { '</div>', '<div class="btn-group">', ' <button class="btn">Actions</button>', - ' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Action 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]') + const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]') expect(triggerDropdownList.length).toEqual(2) @@ -1138,21 +1138,21 @@ describe('Dropdown', () => { it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>', + ' <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', '</div>', '<div class="btn-group">', ' <button class="btn">Actions</button>', - ' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Action 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]') + const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]') expect(triggerDropdownList.length).toEqual(2) @@ -1197,14 +1197,14 @@ describe('Dropdown', () => { it('should fire hide and hidden event without a clickEvent if event type is not click', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('hide.bs.dropdown', e => { @@ -1229,7 +1229,7 @@ describe('Dropdown', () => { it('should ignore keyboard events within <input>s and <textarea>s', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' <input type="text">', @@ -1238,7 +1238,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') const textarea = fixtureEl.querySelector('textarea') @@ -1265,7 +1265,7 @@ describe('Dropdown', () => { it('should skip disabled element when using keyboard navigation', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>', ' <button class="dropdown-item" type="button" disabled>Disabled button</button>', @@ -1274,7 +1274,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('shown.bs.dropdown', () => { @@ -1300,7 +1300,7 @@ describe('Dropdown', () => { ' }', '</style>', '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <button class="dropdown-item d-none" type="button">Hidden button by class</button>', ' <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>', @@ -1310,7 +1310,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('shown.bs.dropdown', () => { @@ -1332,7 +1332,7 @@ describe('Dropdown', () => { it('should focus next/previous element when using keyboard navigation', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a id="item1" class="dropdown-item" href="#">A link</a>', ' <a id="item2" class="dropdown-item" href="#">Another link</a>', @@ -1340,7 +1340,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const item1 = fixtureEl.querySelector('#item1') const item2 = fixtureEl.querySelector('#item2') @@ -1370,7 +1370,7 @@ describe('Dropdown', () => { it('should focus on the first element when using ArrowUp for the first time', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a id="item1" class="dropdown-item" href="#">A link</a>', ' <a id="item2" class="dropdown-item" href="#">Another link</a>', @@ -1378,7 +1378,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const item1 = fixtureEl.querySelector('#item1') @@ -1398,14 +1398,14 @@ describe('Dropdown', () => { it('should not close the dropdown if the user clicks on a text field', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <input type="text">', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') @@ -1425,14 +1425,14 @@ describe('Dropdown', () => { it('should not close the dropdown if the user clicks on a textarea', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <textarea></textarea>', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const textarea = fixtureEl.querySelector('textarea') @@ -1452,7 +1452,7 @@ describe('Dropdown', () => { it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' <input type="text">', @@ -1461,7 +1461,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') const textarea = fixtureEl.querySelector('textarea') @@ -1527,7 +1527,7 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<div class="tabs">', ' <div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' <a class="dropdown-item" href="#">Something else here</a>', @@ -1538,9 +1538,9 @@ describe('Dropdown', () => { '</div>' ] - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(triggerDropdown) - const button = fixtureEl.querySelector('button[data-toggle="dropdown"]') + const button = fixtureEl.querySelector('button[data-bs-toggle="dropdown"]') spyOn(dropdown, 'toggle') diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js index ba41d49efb..6198cdb851 100644 --- a/js/tests/unit/jquery.spec.js +++ b/js/tests/unit/jquery.spec.js @@ -42,7 +42,7 @@ describe('jQuery', () => { it('should use jQuery event system', done => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-dismiss="alert">x</button>', '</div>' ].join('') diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 9ed1fc4348..c90e260b6c 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -29,7 +29,7 @@ describe('Modal', () => { document.body.classList.remove('modal-open') document.body.removeAttribute('style') - document.body.removeAttribute('data-padding-right') + document.body.removeAttribute('data-bs-padding-right') document.querySelectorAll('.modal-backdrop') .forEach(backdrop => { @@ -67,12 +67,12 @@ describe('Modal', () => { document.body.style.paddingRight = originalPadding modalEl.addEventListener('shown.bs.modal', () => { - expect(document.body.getAttribute('data-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-padding-right') + expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right') modal.toggle() }) modalEl.addEventListener('hidden.bs.modal', () => { - expect(document.body.getAttribute('data-padding-right')).toBeNull() + expect(document.body.getAttribute('data-bs-padding-right')).toBeNull() expect().nothing() done() }) @@ -95,7 +95,7 @@ describe('Modal', () => { const expectedPadding = originalPadding + modal._getScrollbarWidth() const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10) - expect(fixedEl.getAttribute('data-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-padding-right') + expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right') expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening') modal.toggle() }) @@ -103,7 +103,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10) - expect(fixedEl.getAttribute('data-padding-right')).toEqual(null, 'data-padding-right should be cleared after closing') + expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing') expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing') done() }) @@ -126,7 +126,7 @@ describe('Modal', () => { const expectedMargin = originalMargin - modal._getScrollbarWidth() const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - expect(stickyTopEl.getAttribute('data-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-margin-right') + expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right') expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening') modal.toggle() }) @@ -134,7 +134,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing') + expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing') expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing') done() }) @@ -355,19 +355,19 @@ describe('Modal', () => { modal.show() }) - it('should close modal when a click occurred on data-dismiss="modal"', done => { + it('should close modal when a click occurred on data-bs-dismiss="modal"', done => { fixtureEl.innerHTML = [ '<div class="modal fade">', ' <div class="modal-dialog">', ' <div class="modal-header">', - ' <button type="button" data-dismiss="modal"></button>', + ' <button type="button" data-bs-dismiss="modal"></button>', ' </div>', ' </div>', '</div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]') + const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]') const modal = new Modal(modalEl) spyOn(modal, 'hide').and.callThrough() @@ -542,7 +542,7 @@ describe('Modal', () => { }) it('should not close modal when clicking outside of modal-content if backdrop = static', done => { - fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" ><div class="modal-dialog"></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" ><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -569,7 +569,7 @@ describe('Modal', () => { }) it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => { - fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog"></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -596,7 +596,7 @@ describe('Modal', () => { }) it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => { - fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -627,7 +627,7 @@ describe('Modal', () => { }) it('should not overflow when clicking outside of modal-content if backdrop = static', done => { - fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -873,12 +873,12 @@ describe('Modal', () => { describe('data-api', () => { it('should open modal', done => { fixtureEl.innerHTML = [ - '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>', + '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') @@ -894,13 +894,13 @@ describe('Modal', () => { it('should not recreate a new modal', done => { fixtureEl.innerHTML = [ - '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>', + '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(modal, 'show').and.callThrough() @@ -914,12 +914,12 @@ describe('Modal', () => { it('should prevent default when the trigger is <a> or <area>', done => { fixtureEl.innerHTML = [ - '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(Event.prototype, 'preventDefault').and.callThrough() @@ -938,12 +938,12 @@ describe('Modal', () => { it('should focus the trigger on hide', done => { fixtureEl.innerHTML = [ - '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -969,12 +969,12 @@ describe('Modal', () => { it('should not focus the trigger if the modal is not visible', done => { fixtureEl.innerHTML = [ - '<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal" style="display: none;"></a>', '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -1000,12 +1000,12 @@ describe('Modal', () => { it('should not focus the trigger if the modal is not shown', done => { fixtureEl.innerHTML = [ - '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -1086,7 +1086,7 @@ describe('Modal', () => { }) it('should should not call show method', () => { - fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog"></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-show="false"><div class="modal-dialog"></div>' const div = fixtureEl.querySelector('div') diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index acaf0a48c2..df48305954 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -64,7 +64,7 @@ describe('Popover', () => { describe('show', () => { it('should show a popover', done => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -120,7 +120,7 @@ describe('Popover', () => { describe('hide', () => { it('should hide a popover', done => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -140,7 +140,7 @@ describe('Popover', () => { describe('jQueryInterface', () => { it('should create a popover', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') @@ -168,7 +168,7 @@ describe('Popover', () => { }) it('should not re create a popover', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -182,7 +182,7 @@ describe('Popover', () => { }) it('should throw error on undefined method', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const action = 'undefinedMethod' @@ -198,7 +198,7 @@ describe('Popover', () => { }) it('should should call show method', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -214,7 +214,7 @@ describe('Popover', () => { }) it('should do nothing if dipose is called when a popover do not exist', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') @@ -231,7 +231,7 @@ describe('Popover', () => { describe('getInstance', () => { it('should return popover instance', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -240,7 +240,7 @@ describe('Popover', () => { }) it('should return null when there is no popover instance', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 9ac02ce99f..33298300cf 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -641,7 +641,7 @@ describe('ScrollSpy', () => { describe('event handler', () => { it('should create scrollspy on window load event', () => { - fixtureEl.innerHTML = '<div data-spy="scroll"></div>' + fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>' const scrollSpyEl = fixtureEl.querySelector('div') diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index a08fec20d6..f74d389df2 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -282,17 +282,17 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">', + ' <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">', ' <button class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">', + ' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">', ' <button class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">', + ' <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">', ' <button id="btnClose" class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', @@ -425,7 +425,7 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a id="triggerProfile" data-bs-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -447,13 +447,13 @@ describe('Tab', () => { it('selected tab should deactivate previous selected link in dropdown', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs">', - ' <li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>', - ' <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>', + ' <li class="nav-item"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>', + ' <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>', ' <li class="nav-item dropdown">', - ' <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>', + ' <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">Dropdown</a>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>', - ' <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>', + ' <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>', + ' <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a>', ' </div>', ' </li>', '</ul>' @@ -470,15 +470,15 @@ describe('Tab', () => { it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '<nav class="nav nav-tabs" role="tablist">', - ' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>', - ' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', - ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>', + ' <a id="tab1" href="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>', + ' <a href="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', + ' <a href="#x-tab3" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>', '</nav>', '<div class="tab-content">', ' <div class="tab-pane" id="x-tab1" role="tabpanel">', ' <nav class="nav nav-tabs" role="tablist">', - ' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>', - ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>', + ' <a href="#nested-tab1" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>', + ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>', ' </nav>', ' <div class="tab-content">', ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>', @@ -510,8 +510,8 @@ describe('Tab', () => { it('should not remove fade class if no active pane is present', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-bs-toggle="tab" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane fade" id="home" role="tabpanel"></div>', @@ -548,10 +548,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>', ' </li>', '</ul>', '<div class="tab-content">', @@ -574,10 +574,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>', ' </li>', '</ul>', '<div class="tab-content">', diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js index 1641ded666..b743549625 100644 --- a/js/tests/unit/toast.spec.js +++ b/js/tests/unit/toast.spec.js @@ -43,10 +43,10 @@ describe('Toast', () => { toast.show() }) - it('should close toast when close element with data-dismiss attribute is set', done => { + it('should close toast when close element with data-bs-dismiss attribute is set', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">', - ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">', + '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">', + ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">', ' close', ' </button>', '</div>' @@ -79,8 +79,8 @@ describe('Toast', () => { Toast.Default.delay = defaultDelay fixtureEl.innerHTML = [ - '<div class="toast" data-autohide="false" data-animation="false">', - ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">', + '<div class="toast" data-bs-autohide="false" data-bs-animation="false">', + ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">', ' close', ' </button>', '</div>' @@ -102,7 +102,7 @@ describe('Toast', () => { describe('show', () => { it('should auto hide', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1">', + '<div class="toast" data-bs-delay="1">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -122,7 +122,7 @@ describe('Toast', () => { it('should not add fade class', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -142,7 +142,7 @@ describe('Toast', () => { it('should not trigger shown if show is prevented', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -202,7 +202,7 @@ describe('Toast', () => { describe('hide', () => { it('should allow to hide toast manually', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-autohide="false">', + '<div class="toast" data-bs-delay="1" data-bs-autohide="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -239,7 +239,7 @@ describe('Toast', () => { it('should not trigger hidden if hide is prevented', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -289,7 +289,7 @@ describe('Toast', () => { it('should allow to destroy toast and hide it before that', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="0" data-autohide="false">', + '<div class="toast" data-bs-delay="0" data-bs-autohide="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 611fadfe1c..c6d91b4028 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -64,7 +64,7 @@ describe('Tooltip', () => { describe('constructor', () => { it('should not take care of disallowed data attributes', () => { - fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-sanitize="false" title="Another tooltip">' + fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip">' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index f7cc379777..ecad59b4d3 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -24,9 +24,9 @@ describe('Util', () => { }) describe('getSelectorFromElement', () => { - it('should get selector from data-target', () => { + it('should get selector from data-bs-target', () => { fixtureEl.innerHTML = [ - '<div id="test" data-target=".target"></div>', + '<div id="test" data-bs-target=".target"></div>', '<div class="target"></div>' ].join('') @@ -35,7 +35,7 @@ describe('Util', () => { expect(Util.getSelectorFromElement(testEl)).toEqual('.target') }) - it('should get selector from href if no data-target set', () => { + it('should get selector from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '<a id="test" href=".target"></a>', '<div class="target"></div>' @@ -46,9 +46,9 @@ describe('Util', () => { expect(Util.getSelectorFromElement(testEl)).toEqual('.target') }) - it('should get selector from href if data-target equal to #', () => { + it('should get selector from href if data-bs-target equal to #', () => { fixtureEl.innerHTML = [ - '<a id="test" data-target="#" href=".target"></a>', + '<a id="test" data-bs-target="#" href=".target"></a>', '<div class="target"></div>' ].join('') @@ -75,9 +75,9 @@ describe('Util', () => { }) describe('getElementFromSelector', () => { - it('should get element from data-target', () => { + it('should get element from data-bs-target', () => { fixtureEl.innerHTML = [ - '<div id="test" data-target=".target"></div>', + '<div id="test" data-bs-target=".target"></div>', '<div class="target"></div>' ].join('') @@ -86,7 +86,7 @@ describe('Util', () => { expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) }) - it('should get element from href if no data-target set', () => { + it('should get element from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '<a id="test" href=".target"></a>', '<div class="target"></div>' @@ -380,13 +380,13 @@ describe('Util', () => { expect(Util.getjQuery()).toEqual(fakejQuery) }) - it('should not return jQuery object when present if data-no-jquery', () => { - document.body.setAttribute('data-no-jquery', '') + it('should not return jQuery object when present if data-bs-no-jquery', () => { + document.body.setAttribute('data-bs-no-jquery', '') expect(window.jQuery).toEqual(fakejQuery) expect(Util.getjQuery()).toEqual(null) - document.body.removeAttribute('data-no-jquery') + document.body.removeAttribute('data-bs-no-jquery') }) it('should not return jQuery if not present', () => { diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index f94d86d95e..f51fe80447 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -11,14 +11,14 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1> <div class="alert alert-warning alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p> @@ -31,7 +31,7 @@ </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p> @@ -44,7 +44,7 @@ </div> <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> This alert will take 5 seconds to fade out. diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 14cc208704..75ad132099 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -10,14 +10,14 @@ <div class="container"> <h1>Button <small>Bootstrap Visual Test</small></h1> - <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> + <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button> <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p> <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p> - <div class="btn-group" data-toggle="buttons"> + <div class="btn-group" data-bs-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) </label> @@ -31,7 +31,7 @@ <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p> - <div class="btn-group" data-toggle="buttons"> + <div class="btn-group" data-bs-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 44fdff8184..51f58e417e 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -17,11 +17,11 @@ <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> - <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> + <div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> - <li data-target="#carousel-example-generic" data-slide-to="1"></li> - <li data-target="#carousel-example-generic" data-slide-to="2"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -34,11 +34,11 @@ <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide"> </div> </div> - <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index f36f73f7e6..3f38ec747e 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -14,13 +14,13 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> - <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> - <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> + <div id="collapseOne" class="collapse show" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -29,12 +29,12 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> - <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> + <div id="collapseTwo" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -43,12 +43,12 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> - <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> + <div id="collapseThree" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -57,12 +57,12 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingFour"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> - Collapsible Group Item with XSS in data-parent + <a class="collapsed" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> + Collapsible Group Item with XSS in data-bs-parent </a> </h5> </div> - <div id="collapseFour" class="collapse" data-parent="<img src=1 onerror=alert(123)>" role="tabpanel" aria-labelledby="headingFour"> + <div id="collapseFour" class="collapse" data-bs-parent="<img src=1 onerror=alert(123)>" role="tabpanel" aria-labelledby="headingFour"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 0816683be4..5dc757197c 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -12,7 +12,7 @@ <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -28,7 +28,7 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -50,7 +50,7 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -62,14 +62,14 @@ <div class="row"> <div class="col-sm-12 mt-4"> <div class="dropdown"> - <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <input id="textField" type="text"> </div> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary">Dropup split</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Dropup split</span> </button> <ul class="dropdown-menu"> @@ -80,7 +80,7 @@ </div> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -89,7 +89,7 @@ </div> <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> This dropdown's menu is right-aligned </button> <div class="dropdown-menu dropdown-menu-right"> @@ -103,7 +103,7 @@ <div class="col-sm-12 mt-4"> <div class="btn-group dropup" role="group"> <a href="#" class="btn btn-secondary">Dropup split align right</a> - <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu dropdown-menu-right"> @@ -113,7 +113,7 @@ </div> </div> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup align right</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align right</button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> @@ -125,7 +125,7 @@ <div class="col-sm-12 mt-4"> <div class="btn-group dropright" role="group"> <a href="#" class="btn btn-secondary">Dropright split</a> - <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu"> @@ -135,7 +135,7 @@ </div> </div> <div class="btn-group dropright"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false"> Dropright </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuRight"> @@ -147,7 +147,7 @@ <!-- dropleft --> <div class="btn-group dropleft" role="group"> <a href="#" class="btn btn-secondary">Dropleft split</a> - <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu"> @@ -157,7 +157,7 @@ </div> </div> <div class="btn-group dropleft"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropleft </button> <div class="dropdown-menu" aria-labelledby="dropleftMenu"> @@ -172,7 +172,7 @@ <div class="row"> <div class="col-sm-3 mt-4"> <div class="btn-group dropdown"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown offset</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="10,20">Dropdown offset</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -183,7 +183,7 @@ <div class="col-sm-3 mt-4"> <div class="btn-group dropdown"> <button type="button" class="btn btn-secondary">Dropdown reference</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <span class="visually-hidden">Dropdown split</span> </button> <ul class="dropdown-menu"> @@ -195,7 +195,7 @@ </div> <div class="col-sm-3 mt-4"> <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Dropdown menu without Popper.js </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 3c1e37cfda..79d815d3ca 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -14,7 +14,7 @@ </head> <body> <nav class="navbar navbar-full navbar-dark bg-dark"> - <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> + <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> <div class="collapse navbar-expand-md" id="navbarResponsive"> <a class="navbar-brand" href="#">This shouldn't jump!</a> <ul class="navbar-nav"> @@ -39,7 +39,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Modal title</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -48,23 +48,23 @@ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <h4>Popover in a modal</h4> - <p>This <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p> + <p>This <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> - <p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p> + <p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p> <div id="accordion" role="tablist"> <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> - <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> - <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> + <div id="collapseOne" class="collapse show" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -73,12 +73,12 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> - <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> + <div id="collapseTwo" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -87,12 +87,12 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> - <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> + <div id="collapseThree" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -114,7 +114,7 @@ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -126,7 +126,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -140,7 +140,7 @@ <p>Test result: <strong id="ff-bug-test-result"></strong></p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -152,7 +152,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -160,14 +160,14 @@ <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> - <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> + <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal"> Launch demo modal </button> @@ -177,14 +177,14 @@ <br><br> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#firefoxModal"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="#firefoxModal"> Launch Firefox bug test modal </button> (<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>) <br><br> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#slowModal"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="#slowModal"> Launch modal with slow transition </button> @@ -194,8 +194,8 @@ Tall body content to force the page to have a scrollbar. </div> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>"> - Modal with an XSS inside the data-target + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> + Modal with an XSS inside the data-bs-target </button> <br><br> @@ -225,12 +225,12 @@ } } - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) .forEach(function (popover) { new Popover(popover) }) - var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + var tooltipList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipList.forEach(function (tooltip) { new Tooltip(tooltip) }) diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index b6ca7dc248..e33de5f0bd 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -10,23 +10,23 @@ <div class="container"> <h1>Popover <small>Bootstrap Visual Test</small></h1> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on auto </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place"> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place"> Popover on top </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> </div> @@ -39,7 +39,7 @@ <script src="../../dist/tooltip.js"></script> <script src="../../dist/popover.js"></script> <script> - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) .forEach(function (popover) { new Popover(popover) }) diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 6da8a51bf1..c86927d991 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -9,10 +9,10 @@ body { padding-top: 70px; } </style> </head> - <body data-spy="scroll" data-target=".navbar" data-offset="70"> + <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Scrollspy test</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarSupportedContent"> @@ -24,7 +24,7 @@ <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown"> <li><a class="dropdown-item" href="#one">One</a></li> <li><a class="dropdown-item" href="#two">Two</a></li> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index a221f971e6..0f7b734e76 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -19,16 +19,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> + <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> + <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a> + <a class="nav-link" data-bs-toggle="tab" href="#fat" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a> + <a class="nav-link" data-bs-toggle="tab" href="#mdo" role="tab">@mdo</a> </li> </ul> @@ -55,16 +55,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a> + <a class="nav-link active" data-bs-toggle="tab" href="#home2" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a> + <a class="nav-link" data-bs-toggle="tab" href="#profile2" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a> + <a class="nav-link" data-bs-toggle="tab" href="#fat2" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a> + <a class="nav-link" data-bs-toggle="tab" href="#mdo2" role="tab">@mdo</a> </li> </ul> @@ -91,16 +91,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a> + <a class="nav-link" data-bs-toggle="tab" href="#home3" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a> + <a class="nav-link" data-bs-toggle="tab" href="#profile3" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a> + <a class="nav-link" data-bs-toggle="tab" href="#fat3" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a> + <a class="nav-link" data-bs-toggle="tab" href="#mdo3" role="tab">@mdo</a> </li> </ul> @@ -127,16 +127,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a> + <a class="nav-link" data-bs-toggle="tab" href="#home4" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a> + <a class="nav-link" data-bs-toggle="tab" href="#profile4" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a> + <a class="nav-link" data-bs-toggle="tab" href="#fat4" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a> + <a class="nav-link" data-bs-toggle="tab" href="#mdo4" role="tab">@mdo</a> </li> </ul> @@ -161,13 +161,13 @@ <h4>Tabs with nav (with fade)</h4> <nav class="nav nav-pills"> - <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a> - <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a> + <a class="nav-link nav-item active" data-bs-toggle="tab" href="#home5">Home</a> + <a class="nav-link nav-item" data-bs-toggle="tab" href="#profile5">Profile</a> <div class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown5"> - <li><a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a></li> - <li><a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a></li> + <li><a class="dropdown-item" data-bs-toggle="tab" href="#fat5">@fat</a></li> + <li><a class="dropdown-item" data-bs-toggle="tab" href="#mdo5">@mdo</a></li> </ul> </div> <a class="nav-link nav-item disabled" href="#">Disabled</a> @@ -196,10 +196,10 @@ <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> + <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> + <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> + <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> + <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index 046c4345c0..bee3f6729e 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -26,7 +26,7 @@ </div> <div class="notifications"> - <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"> + <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000"> <div class="toast-header"> <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span> <strong class="mr-auto">Bootstrap</strong> @@ -37,12 +37,12 @@ </div> </div> - <div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> + <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 14f704b934..93536a0443 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -21,41 +21,41 @@ <div class="container"> <h1>Tooltip <small>Bootstrap Visual Test</small></h1> - <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> + <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> <hr> <div class="row"> <p> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" title="Tooltip on auto"> Tooltip on auto </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button> </p> </div> <div class="row"> <p> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with XSS" data-container="<img src=1 onerror=alert(123)>"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>"> Tooltip with XSS </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with container (selector)" data-container="#customContainer"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer"> Tooltip with container (selector) </button> - <button id="tooltipElement" type="button" class="btn btn-secondary" data-placement="left" title="Tooltip with container (element)"> + <button id="tooltipElement" type="button" class="btn btn-secondary" data-bs-placement="left" title="Tooltip with container (element)"> Tooltip with container (element) </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> </p> @@ -79,10 +79,10 @@ if (typeof document.body.attachShadow === 'function') { var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) shadowRoot.innerHTML = - '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' + + '<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' + ' Tooltip on top in a shadow dom' + '</button>' + - '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' + + '<button id="secondTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' + ' Tooltip on top in a shadow dom' + '</button>' @@ -92,7 +92,7 @@ }) } - [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) .forEach(function (tooltip) { new Tooltip(tooltip) }) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index f64297bb3c..1448eaa324 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -149,13 +149,13 @@ p { // Abbreviations // -// 1. Duplicate behavior to the data-* attribute for our tooltip plugin +// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. // 3. Add explicit cursor to indicate changed behavior. // 4. Prevent the text-decoration to be skipped. abbr[title], -abbr[data-original-title] { // 1 +abbr[data-bs-original-title] { // 1 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 998fac0149..58f4e23bf2 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -19,11 +19,11 @@ document.querySelectorAll('.tooltip-demo') .forEach(function (tooltip) { new bootstrap.Tooltip(tooltip, { - selector: '[data-toggle="tooltip"]' + selector: '[data-bs-toggle="tooltip"]' }) }) - document.querySelectorAll('[data-toggle="popover"]') + document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(function (popover) { new bootstrap.Popover(popover) }) @@ -68,8 +68,8 @@ exampleModal.addEventListener('show.bs.modal', function (event) { // Button that triggered the modal var button = event.relatedTarget - // Extract info from data-* attributes - var recipient = button.getAttribute('data-whatever') + // Extract info from data-bs-* attributes + var recipient = button.getAttribute('data-bs-whatever') // Update the modal's content. var modalTitle = exampleModal.querySelector('.modal-title') @@ -119,10 +119,10 @@ clipboard.on('success', function (e) { var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger) - e.trigger.setAttribute('data-original-title', 'Copied!') + e.trigger.setAttribute('data-bs-original-title', 'Copied!') tooltipBtn.show() - e.trigger.setAttribute('data-original-title', 'Copy to clipboard') + e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard') e.clearSelection() }) @@ -131,10 +131,10 @@ var fallbackMsg = 'Press ' + modifierKey + 'C to copy' var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger) - e.trigger.setAttribute('data-original-title', fallbackMsg) + e.trigger.setAttribute('data-bs-original-title', fallbackMsg) tooltipBtn.show() - e.trigger.setAttribute('data-original-title', 'Copy to clipboard') + e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard') }) anchors.options = { diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 14c138fa5b..bb88659cd2 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -11,7 +11,7 @@ return } - var siteDocsVersion = inputElement.getAttribute('data-docs-version') + var siteDocsVersion = inputElement.getAttribute('data-bs-docs-version') document.addEventListener('keydown', function (event) { if (event.ctrlKey && event.key === '/') { diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 5c68a3d4c9..f35a044ae5 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -55,7 +55,7 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. - Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button. -- On the close button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. +- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes. You can see this in action with a live demo: @@ -63,7 +63,7 @@ You can see this in action with a live demo: {{< example >}} <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. - <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> {{< /example >}} @@ -87,7 +87,7 @@ alertList.forEach(function (alert) { Or with `data` attributes on a button **within the alert**, as demonstrated above: ```html -<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> +<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> ``` Note that closing an alert will remove it from the DOM. @@ -101,7 +101,7 @@ var myAlert = document.getElementById('myAlert') var bsAlert = new bootstrap.Alert(myAlert) ``` -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.) +This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md index b7f700c05f..64373bd94b 100644 --- a/site/content/docs/5.0/components/button-group.md +++ b/site/content/docs/5.0/components/button-group.md @@ -179,7 +179,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi <button type="button" class="btn btn-primary">2</button> <div class="btn-group" role="group"> - <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> @@ -210,7 +210,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> @@ -221,7 +221,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> @@ -230,7 +230,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> @@ -239,7 +239,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index 624fcfc1ee..fb065bb803 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -146,18 +146,18 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ ### Toggle states -Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. +Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. {{< example >}} -<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button> -<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button> -<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Disabled toggle button</button> +<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button> +<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button> +<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button> {{< /example >}} {{< example >}} -<a href="#" class="btn btn-primary" role="button" data-toggle="button">Toggle link</a> -<a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Active toggle link</a> -<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-toggle="button">Disabled toggle link</a> +<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a> +<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a> +<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a> {{< /example >}} ### Methods diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index fbfbff4d5d..bb704fbec6 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -22,14 +22,14 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the id of the `.carousel` element. ### Slides only Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment. {{< example >}} -<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> +<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} @@ -49,7 +49,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- Adding in the previous and next controls: {{< example >}} -<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> +<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} @@ -61,11 +61,11 @@ Adding in the previous and next controls: {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> @@ -77,11 +77,11 @@ Adding in the previous and next controls: You can also add the indicators to the carousel, alongside the controls, too. {{< example >}} -<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> +<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> - <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> - <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> + <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> + <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -94,11 +94,11 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> @@ -110,11 +110,11 @@ You can also add the indicators to the carousel, alongside the controls, too. Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. {{< example >}} -<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> +<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -139,11 +139,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> @@ -155,7 +155,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. {{< example >}} -<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"> +<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} @@ -167,11 +167,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> @@ -180,26 +180,26 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i ### Individual `.carousel-item` interval -Add `data-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item. +Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item. {{< example >}} -<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> +<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> - <div class="carousel-item active" data-interval="10000"> + <div class="carousel-item active" data-bs-interval="10000"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} </div> - <div class="carousel-item" data-interval="2000"> + <div class="carousel-item" data-bs-interval="2000"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}} </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> @@ -255,9 +255,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap ### Via data attributes -Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`. +Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`. -The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.** +The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.** ### Via JavaScript @@ -270,7 +270,7 @@ var carousel = new bootstrap.Carousel(myCarousel) ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`. <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 076c172894..0c23133b61 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -22,15 +22,15 @@ Click the buttons below to show and hide another element via class changes: - `.collapsing` is applied during transitions - `.collapse.show` shows content -You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required. +You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> - <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> + <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> - Button with data-target + <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> + Button with data-bs-target </button> </p> <div class="collapse" id="collapseExample"> @@ -42,14 +42,14 @@ You can use a link with the `href` attribute, or a button with the `data-target` ## Multiple targets -A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-target` attribute. -Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute +A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. +Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute {{< example >}} <p> - <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> + <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> + <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> + <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> <div class="col"> @@ -73,7 +73,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element. -If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself. +If your control element is targeting a single collapsible element – i.e. the `data-bs-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself. Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript. @@ -89,9 +89,9 @@ These classes can be found in `_transitions.scss`. ### Via data attributes -Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of one or more collapsible elements. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`. +Just add `data-bs-toggle="collapse"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`. -To add accordion-like group management to a collapsible area, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action. +To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the demo to see this in action. ### Via JavaScript @@ -106,7 +106,7 @@ var collapseList = collapseElementList.map(function (collapseEl) { ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`. <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index b83e2c54ca..921315e226 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -30,7 +30,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> @@ -45,7 +45,7 @@ And with `<a>` elements: {{< example >}} <div class="dropdown"> - <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false"> + <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </a> @@ -61,7 +61,7 @@ The best part is you can do this with any button variant, too: <div class="bd-example"> <div class="btn-group"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -71,7 +71,7 @@ The best part is you can do this with any button variant, too: </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -81,7 +81,7 @@ The best part is you can do this with any button variant, too: </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button> + <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -91,7 +91,7 @@ The best part is you can do this with any button variant, too: </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button> + <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -101,7 +101,7 @@ The best part is you can do this with any button variant, too: </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button> + <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -111,7 +111,7 @@ The best part is you can do this with any button variant, too: </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button> + <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -125,7 +125,7 @@ The best part is you can do this with any button variant, too: ```html <!-- Example single danger button --> <div class="btn-group"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> @@ -147,7 +147,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the <div class="bd-example"> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -160,7 +160,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-secondary">Secondary</button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -173,7 +173,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -186,7 +186,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -199,7 +199,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -212,7 +212,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -229,7 +229,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the <!-- Example split danger button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -248,7 +248,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <div class="bd-example"> <div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Large button </button> <ul class="dropdown-menu"> @@ -261,7 +261,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> <div class="btn-group"> <button type="button" class="btn btn-lg btn-secondary">Large split button</button> - <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -277,7 +277,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro ```html <!-- Large button groups (default and split) --> <div class="btn-group"> - <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Large button </button> <ul class="dropdown-menu"> @@ -288,7 +288,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <button class="btn btn-secondary btn-lg" type="button"> Large split button </button> - <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -299,7 +299,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <div class="bd-example"> <div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Small button </button> <ul class="dropdown-menu"> @@ -312,7 +312,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div> <div class="btn-group"> <button type="button" class="btn btn-sm btn-secondary">Small split button</button> - <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -327,7 +327,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro ```html <div class="btn-group"> - <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Small button </button> <ul class="dropdown-menu"> @@ -338,7 +338,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <button class="btn btn-secondary btn-sm" type="button"> Small split button </button> - <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -353,7 +353,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> @@ -372,13 +372,13 @@ And putting it to use in a navbar: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> @@ -401,7 +401,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <div class="bd-example"> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropup </button> <ul class="dropdown-menu"> @@ -416,7 +416,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <button type="button" class="btn btn-secondary"> Split dropup </button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -432,7 +432,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. ```html <!-- Default dropup button --> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropup </button> <ul class="dropdown-menu"> @@ -445,7 +445,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <button type="button" class="btn btn-secondary"> Split dropup </button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -460,7 +460,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <div class="bd-example"> <div class="btn-group dropright"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropright </button> <ul class="dropdown-menu"> @@ -475,7 +475,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <button type="button" class="btn btn-secondary"> Split dropright </button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropright</span> </button> <ul class="dropdown-menu"> @@ -491,7 +491,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th ```html <!-- Default dropright button --> <div class="btn-group dropright"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropright </button> <ul class="dropdown-menu"> @@ -504,7 +504,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <button type="button" class="btn btn-secondary"> Split dropright </button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropright</span> </button> <ul class="dropdown-menu"> @@ -519,7 +519,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the <div class="bd-example"> <div class="btn-group dropleft"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropleft </button> <ul class="dropdown-menu"> @@ -532,7 +532,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the </div> <div class="btn-group"> <div class="btn-group dropleft" role="group"> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropleft</span> </button> <ul class="dropdown-menu"> @@ -552,7 +552,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the ```html <!-- Default dropleft button --> <div class="btn-group dropleft"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropleft </button> <ul class="dropdown-menu"> @@ -563,7 +563,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the <!-- Split dropleft button --> <div class="btn-group"> <div class="btn-group dropleft" role="group"> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropleft</span> </button> <ul class="dropdown-menu"> @@ -582,7 +582,7 @@ Historically dropdown menu contents *had* to be links, but that's no longer the {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> @@ -638,7 +638,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al {{< example >}} <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Right-aligned menu </button> <ul class="dropdown-menu dropdown-menu-right"> @@ -651,13 +651,13 @@ By default, a dropdown menu is automatically positioned 100% from the top and al ### Responsive alignment -If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes. +If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes. To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`. {{< example >}} <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Left-aligned but right aligned when large screen </button> <ul class="dropdown-menu dropdown-menu-lg-right"> @@ -672,7 +672,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d {{< example >}} <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Right-aligned but left aligned when large screen </button> <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left"> @@ -683,7 +683,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-bs-display="static"` attribute to dropdown buttons in navbars, since Popper.js isn't used in navbars. ## Menu content @@ -783,12 +783,12 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar ## Dropdown options -Use `data-offset` or `data-reference` to change the location of the dropdown. +Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. {{< example >}} <div class="d-flex"> <div class="dropdown mr-1"> - <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20"> + <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20"> Offset </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> @@ -799,7 +799,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. </div> <div class="btn-group"> <button type="button" class="btn btn-secondary">Reference</button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference"> @@ -815,7 +815,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. ## Usage -Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. +Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. {{< callout info >}} On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. @@ -823,11 +823,11 @@ On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to ### Via data attributes -Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. +Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ```html <div class="dropdown"> - <button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false"> + <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown trigger </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> @@ -848,14 +848,14 @@ var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { ``` {{< callout info >}} -##### `data-toggle="dropdown"` still required +##### `data-bs-toggle="dropdown"` still required -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. +Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. {{< /callout >}} ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index e7c5d33fb1..d52cd1f691 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -263,10 +263,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> + <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> + <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> + <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> + <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> @@ -292,10 +292,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> + <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> + <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> + <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> + <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> @@ -311,16 +311,16 @@ Use the tab JavaScript plugin—include it individually or through the compiled ### 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`. +You can activate a list group navigation without writing any JavaScript by simply specifying `data-bs-toggle="list"` or on an element. Use these data attributes on `.list-group-item`. ```html <div role="tabpanel"> <!-- List group --> <div class="list-group" id="myList" role="tablist"> - <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> + <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a> </div> <!-- Tab panes --> @@ -376,14 +376,14 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane #### constructor -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. +Activates a list item element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. ```html <div class="list-group" id="myList" role="tablist"> - <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> - <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> + <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a> + <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a> </div> <div class="tab-content"> @@ -464,7 +464,7 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will </table> ```js -var tabEl = document.querySelector('a[data-toggle="list"]') +var tabEl = document.querySelector('a[data-bs-toggle="list"]') tabEl.addEventListener('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 542f535bc2..55e9f83022 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -44,13 +44,13 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -64,13 +64,13 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -87,13 +87,13 @@ Toggle a working modal demo by clicking the button below. It will slide down and <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Woohoo, you're reading this text in a modal!</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -101,14 +101,14 @@ Toggle a working modal demo by clicking the button below. It will slide down and </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive"> Launch demo modal </button> </div> ```html <!-- Button trigger modal --> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> @@ -118,13 +118,13 @@ Toggle a working modal demo by clicking the button below. It will slide down and <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -136,18 +136,18 @@ Toggle a working modal demo by clicking the button below. It will slide down and When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. -<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> +<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>I will not close if you click outside me. Don't even try to press escape key.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> @@ -155,30 +155,30 @@ When backdrop is set to static, the modal will not close when clicking outside i </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdropLive"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> Launch static backdrop modal </button> </div> ```html <!-- Button trigger modal --> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop"> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Launch static backdrop modal </button> <!-- Modal --> -<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> +<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> @@ -196,7 +196,7 @@ When modals become too long for the user's viewport or device, they scroll indep <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> @@ -219,7 +219,7 @@ When modals become too long for the user's viewport or device, they scroll indep <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -227,7 +227,7 @@ When modals become too long for the user's viewport or device, they scroll indep </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong"> Launch demo modal </button> </div> @@ -239,7 +239,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> @@ -262,7 +262,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -270,7 +270,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable"> Launch demo modal </button> </div> @@ -291,13 +291,13 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -309,7 +309,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> @@ -319,7 +319,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -327,10 +327,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"> Vertically centered modal </button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenteredScrollable"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable"> Vertically centered scrollable modal </button> </div> @@ -356,17 +356,17 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <h5>Popover in a modal</h5> - <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> + <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> <hr> <h5>Tooltips in a modal</h5> - <p><a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> + <p><a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -374,7 +374,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. </div> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalPopovers"> Launch demo modal </button> </div> @@ -382,7 +382,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html <div class="modal-body"> <h5>Popover in a modal</h5> - <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> + <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> <hr> <h5>Tooltips in a modal</h5> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p> @@ -398,7 +398,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="container-fluid bd-example-row"> @@ -429,7 +429,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w </div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -437,7 +437,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w </div> <div class="bd-example"> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal"> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#gridSystemModal"> Launch demo modal </button> </div> @@ -475,21 +475,21 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w ### Varying modal content -Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked. +Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-bs-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked. Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. {{< example >}} -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button> +<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New message</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form> @@ -504,7 +504,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati </form> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> @@ -517,8 +517,8 @@ var exampleModal = document.getElementById('exampleModal') exampleModal.addEventListener('show.bs.modal', function (event) { // Button that triggered the modal var button = event.relatedTarget - // Extract info from data-* attributes - var recipient = button.getAttribute('data-whatever') + // Extract info from data-bs-* attributes + var recipient = button.getAttribute('data-bs-whatever') // If necessary, you could initiate an AJAX request here // and then do the updating in a callback. // @@ -598,9 +598,9 @@ Modals have three optional sizes, available via modifier classes to be placed on Our default modal without modifier class constitutes the "medium" size modal. <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalXl">Extra large modal</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLg">Large modal</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXl">Extra large modal</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">Large modal</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSm">Small modal</button> </div> ```html @@ -614,7 +614,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... @@ -628,7 +628,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... @@ -642,7 +642,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... @@ -691,12 +691,12 @@ Another override is the option to pop up a modal that covers the user viewport, </table> <div class="bd-example"> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreen">Full screen</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenSm">Full screen below sm</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenMd">Full screen below md</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenLg">Full screen below lg</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXl">Full screen below xl</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXxl">Full screen below xxl</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button> </div> ```html @@ -711,7 +711,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> @@ -734,7 +734,7 @@ Another override is the option to pop up a modal that covers the user viewport, <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -745,13 +745,13 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -762,13 +762,13 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -779,13 +779,13 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -796,13 +796,13 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -813,13 +813,13 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5> - <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -831,10 +831,10 @@ The modal plugin toggles your hidden content on demand, via data attributes or J ### Via data attributes -Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle. +Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle. ```html -<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> +<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button> ``` ### Via JavaScript @@ -847,7 +847,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. <table class="table"> <thead> @@ -981,7 +981,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit </tr> <tr> <td><code>hidePrevented.bs.modal</code></td> - <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-keyboard</code> set to <code>false</code>.</td> + <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-bs-keyboard</code> set to <code>false</code>.</td> </tr> </tbody> </table> diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index f5f4269570..da231888fb 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -38,7 +38,7 @@ Here's an example of all the sub-components included in a responsive light-theme <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> @@ -50,7 +50,7 @@ Here's an example of all the sub-components included in a responsive light-theme <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> @@ -132,7 +132,7 @@ Please note that you should also add the `aria-current` attribute on the `.nav-l <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> @@ -161,7 +161,7 @@ And because we use classes for our navs, you can avoid the list-based approach e <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> @@ -182,7 +182,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> @@ -197,7 +197,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> @@ -285,7 +285,7 @@ Mix and match with other components and utilities as needed. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> @@ -316,7 +316,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> @@ -345,7 +345,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor02"> @@ -374,7 +374,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor03"> @@ -492,7 +492,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: {{< example >}} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> @@ -523,7 +523,7 @@ With a brand name shown on the left and toggler on the right: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> @@ -552,7 +552,7 @@ With a toggler on the left and brand name on the right: {{< example >}} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> @@ -579,7 +579,7 @@ With a toggler on the left and brand name on the right: ### External content -Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-target` matching, that's easily done! +Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done! {{< example >}} <div class="collapse" id="navbarToggleExternalContent"> @@ -590,7 +590,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for </div> <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index d21837e251..9a47693825 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -260,7 +260,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -286,7 +286,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -315,13 +315,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, <div class="bd-example"> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -340,13 +340,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, ```html <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -361,9 +361,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or <div class="bd-example"> <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -382,9 +382,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or ```html <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -399,13 +399,13 @@ The tabs plugin also works with pills. <div class="bd-example"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -424,13 +424,13 @@ The tabs plugin also works with pills. ```html <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -445,10 +445,10 @@ And with vertical pills. <div class="bd-example"> <div class="d-flex align-items-start"> <div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> @@ -470,10 +470,10 @@ And with vertical pills. ```html <div class="d-flex align-items-start"> <div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> + <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> + <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> @@ -486,22 +486,22 @@ And with vertical pills. ### Using data attributes -You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`. +You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-bs-toggle="tab"` or `data-bs-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`. ```html <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> @@ -561,21 +561,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a #### constructor -Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. +Activates a tab element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. ```html <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> @@ -657,7 +657,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events </table> ```js -var tabEl = document.querySelector('a[data-toggle="tab"]') +var tabEl = document.querySelector('a[data-bs-toggle="tab"]') tabEl.addEventListener('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index cd5e607c5d..173bc5a261 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -29,10 +29,10 @@ Keep reading to see how popovers work with some examples. ## Example: Enable popovers everywhere -One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute: +One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute: ```js -var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) +var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) @@ -51,7 +51,7 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'), ## Example {{< example >}} -<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> +<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> {{< /example >}} ### Four directions @@ -60,36 +60,36 @@ Four options are available: top, right, bottom, and left aligned. <div class="bd-example popover-demo"> <div class="bd-example-popovers"> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> </div> </div> ```html -<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> -<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> -<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> -<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> ``` @@ -105,7 +105,7 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag {{< /callout >}} {{< example >}} -<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> +<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> {{< /example >}} ```js @@ -118,10 +118,10 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element. -For disabled popover triggers, you may also prefer `data-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. +For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. {{< example >}} -<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover"> +<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover"> <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button> </span> {{< /example >}} @@ -147,7 +147,7 @@ Additionally, while it is possible to also include interactive controls (such as ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. @@ -182,7 +182,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td>string | element | function</td> <td><code>''</code></td> <td> - <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>Default content value if <code>data-bs-content</code> attribute isn't present.</p> <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> </td> </tr> diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md index 21e6074d0d..92834bebf3 100644 --- a/site/content/docs/5.0/components/progress.md +++ b/site/content/docs/5.0/components/progress.md @@ -127,7 +127,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> - <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off"> + <button type="button" class="btn btn-secondary mt-3" data-bs-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off"> Toggle animation </button> </div> diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 5579786370..5606860d3a 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -37,7 +37,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#one">one</a></li> <li><a class="dropdown-item" href="#two">two</a></li> @@ -47,7 +47,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown </li> </ul> </nav> - <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example" tabindex="0"> + <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="fat">@fat</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <h4 id="mdo">@mdo</h4> @@ -74,7 +74,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="dropdown-item" href="#one">one</a></li> <li><a class="dropdown-item" href="#two">two</a></li> @@ -84,7 +84,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown </li> </ul> </nav> -<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" tabindex="0"> +<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0"> <h4 id="fat">@fat</h4> <p>...</p> <h4 id="mdo">@mdo</h4> @@ -123,7 +123,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p </nav> </div> <div class="col-8"> - <div data-spy="scroll" data-target="#navbar-example3" data-offset="0" class="scrollspy-example-2" tabindex="0"> + <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0"> <h4 id="item-1">Item 1</h4> <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> <h5 id="item-1-1">Item 1-1</h5> @@ -161,7 +161,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p </nav> </nav> -<div data-spy="scroll" data-target="#navbar-example3" data-offset="0" tabindex="0"> +<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0"> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> @@ -194,7 +194,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group </div> </div> <div class="col-8"> - <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" tabindex="0"> + <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="list-item-1">Item 1</h4> <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> <h4 id="list-item-2">Item 2</h4> @@ -215,7 +215,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> </div> -<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" tabindex="0"> +<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="list-item-1">Item 1</h4> <p>...</p> <h4 id="list-item-2">Item 2</h4> @@ -232,7 +232,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group ### Via data attributes -To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component. +To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-bs-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component. ```css body { @@ -241,7 +241,7 @@ body { ``` ```html -<body data-spy="scroll" data-target="#navbar-example"> +<body data-bs-spy="scroll" data-bs-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> @@ -281,7 +281,7 @@ Target elements that are not visible will be ignored and their corresponding nav When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so: ```js -var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]')) +var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]')) dataSpyList.forEach(function (dataSpyEl) { bootstrap.ScrollSpy.getInstance(dataSpyEl) .refresh() @@ -303,7 +303,7 @@ var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. <table class="table"> <thead> @@ -354,7 +354,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </table> ```js -var firstScrollSpyEl = document.querySelector('[data-spy="scroll"]') +var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]') firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () { // do something... }) diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index b9b0229326..48c68b60be 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -34,7 +34,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -52,7 +52,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -70,7 +70,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> See? Just like this. @@ -82,7 +82,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Heads up, toasts will stack automatically @@ -99,7 +99,7 @@ Customize your toasts by removing sub-components, tweaking with [utilities]({{< <div class="toast-body"> Hello, world! This is a toast message. </div> - <button type="button" class="btn-close ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -111,7 +111,7 @@ Alternatively, you can also add additional controls and components to toasts. Hello, world! This is a toast message. <div class="mt-2 pt-2 border-top"> <button type="button" class="btn btn-primary btn-sm">Take action</button> - <button type="button" class="btn btn-secondary btn-sm" data-dismiss="toast">Close</button> + <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button> </div> </div> </div> @@ -126,7 +126,7 @@ Building on the above example, you can create different toast color schemes with <div class="toast-body"> Hello, world! This is a toast message. </div> - <button type="button" class="btn-close btn-close-white ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close btn-close-white ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -141,7 +141,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -163,7 +163,7 @@ For systems that generate more notifications, consider using a wrapping element {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> See? Just like this. @@ -175,7 +175,7 @@ For systems that generate more notifications, consider using a wrapping element {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Heads up, toasts will stack automatically @@ -197,7 +197,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -217,7 +217,7 @@ You also need to adapt the `role` and `aria-live` level depending on the content As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast. ```html -<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000"> +<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000"> <div role="alert" aria-live="assertive" aria-atomic="true">...</div> </div> ``` @@ -225,12 +225,12 @@ As the content you're displaying changes, be sure to update the [`delay` timeout When using `autohide: false`, you must add a close button to allow users to dismiss the toast. {{< example class="bg-light" >}} -<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> +<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false"> <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -253,7 +253,7 @@ var toastList = toastElList.map(function (toastEl) { ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index ddc1a70c70..e3ac87ffe7 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -1,7 +1,7 @@ --- layout: docs title: Tooltips -description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. +description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. group: components toc: true --- @@ -28,10 +28,10 @@ Got all that? Great, let's see how they work with some examples. ## Example: Enable tooltips everywhere -One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute: +One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute: ```js -var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) +var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) @@ -42,7 +42,7 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { Hover over the links below to see tooltips: <div class="bd-example tooltip-demo"> - <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. + <p class="muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> @@ -50,25 +50,25 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo <div class="bd-example tooltip-demo"> <div class="bd-example-tooltips"> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button> </div> </div> ```html -<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> +<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> -<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> +<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> -<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> +<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> -<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> +<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button> ``` @@ -76,7 +76,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo And with custom HTML added: ```html -<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> +<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> ``` @@ -84,7 +84,7 @@ And with custom HTML added: With an SVG: <div class="bd-example tooltip-demo"> - <a href="#" data-toggle="tooltip" title="Default tooltip"> + <a href="#" data-bs-toggle="tooltip" title="Default tooltip"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"> <rect width="100%" height="100%" fill="#563d7c"/> <circle cx="50" cy="50" r="30" fill="#007bff"/> @@ -128,7 +128,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo ```html <!-- HTML to write --> -<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a> +<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a> <!-- Generated markup by the plugin --> <div class="tooltip bs-tooltip-top" role="tooltip"> @@ -145,7 +145,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot <div class="tooltip-demo"> {{< example >}} -<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip"> +<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip"> <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button> </span> {{< /example >}} @@ -153,7 +153,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. diff --git a/site/content/docs/5.0/examples/album/index.html b/site/content/docs/5.0/examples/album/index.html index b33ded4123..b00119b1fd 100644 --- a/site/content/docs/5.0/examples/album/index.html +++ b/site/content/docs/5.0/examples/album/index.html @@ -28,7 +28,7 @@ title: Album example <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> <strong>Album</strong> </a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index d95f35d28c..412e893389 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -9,7 +9,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Carousel</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> @@ -35,11 +35,11 @@ extra_css: <main> - <div id="myCarousel" class="carousel slide" data-ride="carousel"> + <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#myCarousel" data-slide-to="0" class="active"></li> - <li data-target="#myCarousel" data-slide-to="1"></li> - <li data-target="#myCarousel" data-slide-to="2"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -73,11 +73,11 @@ extra_css: </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> + <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> diff --git a/site/content/docs/5.0/examples/dashboard/index.html b/site/content/docs/5.0/examples/dashboard/index.html index 0f0db30576..dbba41f51a 100644 --- a/site/content/docs/5.0/examples/dashboard/index.html +++ b/site/content/docs/5.0/examples/dashboard/index.html @@ -13,7 +13,7 @@ extra_js: <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> diff --git a/site/content/docs/5.0/examples/navbar-bottom/index.html b/site/content/docs/5.0/examples/navbar-bottom/index.html index 49833a6867..8f4e2635c7 100644 --- a/site/content/docs/5.0/examples/navbar-bottom/index.html +++ b/site/content/docs/5.0/examples/navbar-bottom/index.html @@ -13,7 +13,7 @@ title: Bottom navbar example <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Bottom navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> @@ -28,7 +28,7 @@ title: Bottom navbar example <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropup"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropup</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a> <ul class="dropdown-menu" aria-labelledby="dropdown10"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.0/examples/navbar-fixed/index.html b/site/content/docs/5.0/examples/navbar-fixed/index.html index d6404f2932..29c401af9b 100644 --- a/site/content/docs/5.0/examples/navbar-fixed/index.html +++ b/site/content/docs/5.0/examples/navbar-fixed/index.html @@ -8,7 +8,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> diff --git a/site/content/docs/5.0/examples/navbar-static/index.html b/site/content/docs/5.0/examples/navbar-static/index.html index 0b6c4d273d..6b6895d9f2 100644 --- a/site/content/docs/5.0/examples/navbar-static/index.html +++ b/site/content/docs/5.0/examples/navbar-static/index.html @@ -8,7 +8,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Top navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.0/examples/navbars/index.html index aa63f5ba39..2f32cd0ab2 100644 --- a/site/content/docs/5.0/examples/navbars/index.html +++ b/site/content/docs/5.0/examples/navbars/index.html @@ -9,7 +9,7 @@ extra_css: <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Never expand</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -25,7 +25,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown01"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -43,7 +43,7 @@ extra_css: <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Always expand</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -66,7 +66,7 @@ extra_css: <nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Expand at sm</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -82,7 +82,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown03"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -100,7 +100,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Expand at md</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -116,7 +116,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown04"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -134,7 +134,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Expand at lg</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -150,7 +150,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown05"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -168,7 +168,7 @@ extra_css: <nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Expand at xl</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -184,7 +184,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown06"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -202,7 +202,7 @@ extra_css: <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Expand at xxl</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -218,7 +218,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdownXxl"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -236,7 +236,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example"> <div class="container"> <a class="navbar-brand" href="#">Container</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -252,7 +252,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown07"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -270,7 +270,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example"> <div class="container-xl"> <a class="navbar-brand" href="#">Container XL</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -286,7 +286,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown07XL"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -307,7 +307,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example"> <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -323,7 +323,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown08"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -339,7 +339,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -355,7 +355,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown09"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -372,7 +372,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example"> <div class="container-fluid"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -388,7 +388,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown10"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas/index.html index 1861b64967..0e7ca4b897 100644 --- a/site/content/docs/5.0/examples/offcanvas/index.html +++ b/site/content/docs/5.0/examples/offcanvas/index.html @@ -11,7 +11,7 @@ body_class: "bg-light" <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> - <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" aria-label="Toggle navigation"> + <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -30,7 +30,7 @@ body_class: "bg-light" <a class="nav-link" href="#">Switch account</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Settings</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> <ul class="dropdown-menu" aria-labelledby="dropdown01"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.0/examples/offcanvas/offcanvas.js index 242849afd8..793ea86cd3 100644 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js +++ b/site/content/docs/5.0/examples/offcanvas/offcanvas.js @@ -1,7 +1,7 @@ (function () { 'use strict' - document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () { + document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () { document.querySelector('.offcanvas-collapse').classList.toggle('open') }) })() diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index d2869091e3..26de65d508 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -8,7 +8,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -24,7 +24,7 @@ extra_css: <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown01"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html index 4203772d73..83f4221997 100644 --- a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html @@ -12,7 +12,7 @@ body_class: "d-flex flex-column h-100" <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md index 3b883f29c3..908e3d453b 100644 --- a/site/content/docs/5.0/forms/input-group.md +++ b/site/content/docs/5.0/forms/input-group.md @@ -159,7 +159,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -172,7 +172,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -183,7 +183,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve </div> <div class="input-group"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action before</a></li> <li><a class="dropdown-item" href="#">Another action before</a></li> @@ -192,7 +192,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"> - <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -208,7 +208,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}} <div class="input-group mb-3"> <button type="button" class="btn btn-outline-secondary">Action</button> - <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @@ -224,7 +224,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <button type="button" class="btn btn-outline-secondary">Action</button> - <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-right"> diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.0/getting-started/javascript.md index 1b896103b3..2235ec67ec 100644 --- a/site/content/docs/5.0/getting-started/javascript.md +++ b/site/content/docs/5.0/getting-started/javascript.md @@ -39,7 +39,7 @@ Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.j ## Still want to use jQuery? It's possible! -Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. **If Bootstrap detects `jQuery` in the `window` object** it'll add all of our components in jQuery's plugin system; this means you'll be able to do `$('[data-toggle="tooltip"]').tooltip()` to enable tooltips. The same goes for our other components. +Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. **If Bootstrap detects `jQuery` in the `window` object** it'll add all of our components in jQuery's plugin system; this means you'll be able to do `$('[data-bs-toggle="tooltip"]').tooltip()` to enable tooltips. The same goes for our other components. ## Data attributes @@ -71,7 +71,7 @@ myModal.addEventListener('show.bs.modal', function (e) { {{< callout warning >}} ## jQuery events -Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`. +Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`. ```js $('#myTab a').on('shown.bs.tab', function () { @@ -208,8 +208,8 @@ var myDefaultAllowList = bootstrap.Tooltip.Default.allowList // To allow table elements myDefaultAllowList.table = [] -// To allow td elements and data-option attributes on td elements -myDefaultAllowList.td = ['data-option'] +// To allow td elements and data-bs-option attributes on td elements +myDefaultAllowList.td = ['data-bs-option'] // You can push your custom regex to validate your attributes. // Be careful about your regular expressions being too lax diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 46e43b81e1..3722d51427 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -4,7 +4,7 @@ {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }} </a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> <svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> </svg> diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 6a39f5bc03..06900cb231 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -16,7 +16,7 @@ {{- $is_active_group := eq $.Page.Params.group $group_slug }} <li class="mb-1{{ if $is_active_group }} active{{ end }}"> - <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}> + <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}> {{ $group.title }} </a> diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html index e036d83652..31f133c7bb 100644 --- a/site/layouts/partials/docs-subnav.html +++ b/site/layouts/partials/docs-subnav.html @@ -1,12 +1,12 @@ <nav class="bd-subnavbar py-2" aria-label="Secondary navigation"> <div class="container-xxl d-flex align-items-md-center"> <form class="bd-search position-relative mr-auto"> - <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}"> + <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bs-docs-version="{{ .Site.Params.docs_version }}"> </form> {{ partial "docs-versions" . }} - <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ml-3 order-3 collapsed" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ml-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> {{ partial "icons/expand.svg" (dict "class" "bi bi-expand" "width" "24" "height" "24") }} {{ partial "icons/collapse.svg" (dict "class" "bi bi-collapse" "width" "24" "height" "24") }} </button> diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 905840f7f7..2416b19cfc 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -1,5 +1,5 @@ <div class="dropdown ml-3"> - <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-toggle="dropdown" aria-expanded="false" data-display="static"> + <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> <span class="d-none d-lg-inline">Bootstrap</span> v{{ .Site.Params.docs_version }} </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> |