Не работает accordion bootstrap 5

Кнопка Bootstrap Accordion переключатель «data-parent» не работает

Я пытаюсь создать аккордеон с помощью Bootstrap 3 с помощью кнопки, складывающейся с атрибутом data, без разметки аккордеона. Просто мне так кажется чище.

однако я не могу сделать data-parent атрибут для работы. Я хочу, чтобы при открытии вопроса все остальные закрылись. Я читаю документы (http://getbootstrap.com/javascript/#collapse-usage), но все еще не может заставить его работать.

Я использую следующие код:

Я буду очень рад, если кто-то укажет мне, где я делаю ошибку :

7 ответов

Bootstrap 4

использовать data-parent=»» атрибут элемента collapse (вместо элемента триггера)

Bootstrap 3

существует «ошибка», которая делает аккордеон зависимым от .panel класс при использовании . Чтобы обойти это, вы можете обернуть каждый аккордеон группа в «панели» div..

редактировать

как упоминалось в комментариях, каждый раздел не должен быть .panel . Однако.

• .panel должен быть прямым дочерним элементом элемента, используемого как data-parent=
• каждая секция гармошки ( data-toggle= ) должен быть прямым потомком элемента .panel (http://www.bootply.com/AbiRW7BdD6#)

обратите внимание, не только есть зависимость .панель также имеет зависимость от структуры DOM.

убедитесь, что ваши элементы структурированы следующим образом:

это в основном то, что сказал @Blazemonger, но я думаю, что иерархия целевого элемента тоже имеет значение. Я не закончил пробовать все возможности, но в основном это должно сработать, если вы будете следовать этой иерархии.

FYI, у меня было больше слоев между элементом управления div & content div, и это не работа.

попробуйте это. Простое решение без зависимостей.

Как сказал Blazemonger, # parent, .панель и. коллапс должен быть прямым потомством. Однако, если вы не можете изменить свой html, вы можете сделать обходной путь, используя события и методы bootstrap со следующим кодом:

Если найдено это изменение в Krzysztof ответ помог мой вопрос

если у вас есть вложенные панели, вам также может потребоваться указать, какие из них, добавив другое имя класса, чтобы различать их и добавить это в селектор a в приведенном выше JavaScript

вот (надеюсь) универсальный патч, который я разработал, чтобы исправить эту проблему для BootStrap V3. Никаких особых требований, кроме подключения скрипта.

EDIT: Ниже приведен упрощенный ответ, который по-прежнему отвечает моим потребностям, и теперь я использую делегированный обработчик кликов:

У меня такая же проблема при переключении на гармони. Но когда я пытаюсь поместить блок скрипта в блок заголовка, он работает для моего случая!!

Источник

Bootstrap Accordion Expand / Collapse Все не работает должным образом

Вот процесс, чтобы сломать это:

1. нажмите Музыка
2. нажмите Развернуть / Свернуть все
3. нажмите Музыка
4. нажмите Развернуть / Свернуть все
5. нажмите Развернуть / Свернуть все снова

Обратите внимание, что Music Notation НЕ будет открываться снова, хотя вы должны видеть в функции, что логика говорит, что ВСЕ панели закрыты и должны открываться. ЗАЧЕМ? Что я делаю не так?

2 ответа

Проблема заключается в том, что состояние всех панелей отличается от состояния любой отдельной панели из-за того, как аккордеон работает с data-parent . Ваш обработчик кнопки «Развернуть / свернуть все» должен полностью переопределить это нормальное поведение аккордеона.

Обработчик развертывания всех кликов должен отслеживать последнее состояние (развернуть все или свернуть все ), потому что компонент Bootstrap Collapse отдельно обрабатывает состояние каждой отдельной панели (только одно открытое одновременно). В противном случае невозможно было бы узнать, открывать или закрывать отдельные переключаемые панели.

OFC, другой способ — просто удалить атрибуты data-parent= и полностью отключить поведение аккордеона.

Если вы можете позволить удалить атрибут data-parent data-parent=»#accordionFormat» из всех элементов, где он существует, это решит вашу проблему.

Зачем? Я не уверен, но кажется, что атрибут запускает некоторую логику, которая путается с функциональностью свертывания.

Источник

Почему мой аккордеон Bootstrap не работает должным образом?

Я создаю сайт с помощью Bootstrap 4, и у меня есть 3

Мой код здесь. (Нажмите кнопки «Sobre Paygol», «Vendedores» и «Compradores»).

Я не могу зафиксировать ошибку в своем коде. Единственное, что кажется странным, это то, что когда я открываю консоль, я получаю следующую ошибку:

popper.min.js.map:1 Uncaught SyntaxError: Unexpected token ‘:’

Поскольку у меня нет знаний JS, я не знаю, может ли это быть причиной проблемы. Я всегда использовал Bootstrap 4 и впервые вижу эту ошибку.

Мои скрипты загружаются как таковые:

Обратите внимание, что во второй строке я добавил файл popper.min.js.map , который я скачал с Github.

2 ответа

Я не думаю, что ваши проблемы как-то связаны с ошибкой исходной карты. У вас есть несколько ошибок в вашем HTML:

1. Неверный родительский ID
2. Дополнительный класс .hide, который предотвращает отображение складных
3. Несколько элементов с одинаковым идентификатором, например #accordion

На странице http://18.230.62.117/support.html#faqAboutPaygol вы ошиблись родительские идентификаторы в вашем HTML.

См. Идентификатор вашего аккордеона «accordionQuestions», но ваш data-parent=»#accordion» .

На странице http://18.230.62.117/support.html#faqVendedores у вас есть дополнительный .hide класс на первом сворачиваемом элементе:

Вот почему первый складной элемент не откроется даже при нажатии на него.

Также обратите внимание, поскольку вы делаете одностраничное приложение, у вас не может быть нескольких элементов с одним и тем же идентификатором, например,

Источник

Bootstrap 3 — Аккордеон

Сегодня мы познакомимся с возможностями Twitter Bootstrap для создания аккордеона.

Создание аккордеона с помощью Twitter Bootstrap

Аккордеон обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента и навигационные списки. Следующий пример покажет вам, как создать аккордеон, используя компонент collapse (сворачивание):

Разворачивание и сворачивание панелей аккордеона через атрибуты data

Twitter Bootstrap позволяет разворачивать и сворачивать любую панель аккордеона без написания кода на языке JavaScript. Данную возможность Twitter Bootstrap мы уже рассмотрели выше, теперь давайте узнаем какие прикладные интерфейсы API Data за это отвечают. Но перед тем как перейти к рассмотрению атрибутов data , давайте познакомимся поближе с работой компонента аккордеон. Аккордеон состоит из панелей, каждая из которых, в свою очередь, состоит из заголовка и содержимого. В заголовке обычно располагается ссылка или кнопка, при нажатии на которую происходит сворачивание или разворачивание содержимого.

Атрибут data-toggle=»collapse» необходимо добавить к элементу управления (например, кнопка или ссылка, нажав на которую вы хотите свернуть другой элемент, содержащий контент). А также необходимо указать какой именно элемент вы хотите свернуть, для этого необходимо добавить к элементу управления атрибутом data-target (для кнопки) или href (для ссылки) со значением идентификатора того элемента который необходимо свернуть.И ещё Не забудьте добавить класс .collapse к сворачиваемому элементу. Если вы хотите, чтобы элемент с содержимым по умолчанию был открыт, то необходимо дополнительно добавить класс .in .

Разворачивание и сворачивание панелей аккордеона с помощью JavaScript

Вы также можете сворачивать и разворачивать панели аккордеона вручную с помощью кода JavaScript — для этого вызовите метод Bootstrap collapse() и укажите с помощью идентификатора (#id) или класса (.class) тот элемент, который необходимо развернуть и свернуть.

Параметры

Есть определенные параметры, которые могут быть переданы методу Bootstrap collapse() для настройки функциональности сворачиваемого элемента.

Имя	Тип	Описание
parent	selector	Значение по умолчанию: false. В качестве selector используется идентификатор или имя класса управляемого элемента. При открытии панели аккордеона, управляемый элемент, который имеет идентификатор или класс родительского контейнера, закрывает другие панели, находящиеся в этом же родительском контейнере.
toggle	boolean	Значение по умолчанию: true. В зависимости от значения параметра включает или не включает сворачивание и разворачивание элемента аккордеона при вызове метода.

Вы также можете установить эти параметры с помощью атрибутов data для аккордеона. Для этого добавьте имя параметра к атрибуту data- , например: data-parent=»myAccordion» , data-toggle=»false» и т.д., как на примере в самом начале урока.

Методы

Метод	Описание	Пример
.collapse(параметры)	Метод активирует ваш контент как сворачиваемый элемент и применяет к нему параметры, указанные в скобках.	$(‘#id’).collapse(< toggle: false >)
.collapse(‘toggle’)	Метод toogle переключает (показывает или скрывает) сворачиваемый элемент.	$(‘#id’).collapse(‘toggle’)
.collapse(‘show’)	Метод show показывает сворачиваемый элемент.	$(‘#id’).collapse(‘show’)
.collapse(‘hide’)	Метод hide скрывает сворачиваемый элемент.	$(‘#id’).collapse(‘hide’)

На следующим примере продемонстрированы использование различных методов для сворачиваемых элементов:

События

Сворачиваемый элемент Bootstrap имеет несколько событий, которые возникают при наступлении определенных условий и, которые предназначены для расширения его функциональности.

Событие	Описание
show.bs.collapse	Это событие срабатывает сразу после вызова метода show().
shown.bs.collapse	Это событие срабатывает, когда сворачиваемый элемент становится виден для пользователя, т.е. когда будет завершён полностью процесс CSS для сворачиваемого элемента.
hide.bs.collapse	Это событие срабатывает сразу после вызова метода hide.
hidden.bs.collapse	Это событие сработает в тот момент, когда сворачиваемый элемент будет полностью скрыт от пользователя, т.е. событие будет ждать до тех пор, пока процесс CSS для сворачиваемого элемента будет полностью завершён.

В следующем примере продемонстрирована возможность отображения предупреждающего сообщения для пользователя, когда он открывает сворачиваемый элемент, и он полностью завершил своё открытие.

Источник

Переход на v5

Отслеживайте и просматривайте изменения в исходных файлах, документации и компонентах Bootstrap, чтобы помочь Вам перейти с v4 на v5.

Зависимости

• Удален jQuery.
• Обновлен с Popper v1.x до Popper v2.x.
• Заменен Libsass на Dart Sass в качестве нашего компилятора Sass, учитывая, что Libsass устарел.
• Мигрировал с Jekyll на Hugo для создания нашей документации.

Поддержка браузера

• Удален Internet Explorer 10 и 11
• Удален Microsoft Edge

Изменения в документации

• Обновленная домашняя страница, макет документов и нижний колонтитул.
• Добавлено новое руководство по Parcel.
• Добавлен новый раздел настройки, заменяющий страницу темы v4’s, с новыми подробностями о Sass, опциями глобальной конфигурации, цветовыми схемами, переменными CSS и многим другим.
• Реорганизована вся документация по формам в новый раздел форм, разделив содержание на более сфокусированные страницы.
• Аналогичным образом обновлен раздел макетов, чтобы более четко обозначить содержимое сетки.
• Страница компонента “Навигация” переименована в “Навигация и вкладки”.
• Страница “Чекбоксы” переименована в “Чекбоксы и радио”.
• Переработана навигационная панель и добавлена новая поднавигация, чтобы упростить просмотр наших сайтов и версий документации.
• Добавлено новое сочетание клавиш для поля поиска: Ctrl + / .

Мы отказались от слияния карт Sass по умолчанию, чтобы упростить удаление избыточных значений. Имейте в виду, что теперь вам нужно определить все значения в картах Sass, например $theme-colors . Узнайте, как работать с картами Sass.

Breaking Переименована функция color-yiq() и связанные переменные переименованы в color-contrast() , поскольку она больше не связана с цветовым пространством YIQ. Смотрите #30168.

• $yiq-contrasted-threshold переименован в $min-contrast-ratio .
• $yiq-text-dark и $yiq-text-light соответственно переименованы в $color-contrast-dark и $color-contrast-light .

Breaking Параметры миксинов медиа-запросов изменены для более логичного подхода.

• media-breakpoint-down() использует саму контрольную точку вместо следующей контрольной точки (например, media-breakpoint-down(lg) вместо media-breakpoint-down(md) цели области просмотра меньше, чем lg ).
• Точно так же второй параметр в media-breakpoint-between() также использует саму контрольную точку вместо следующей контрольной точки (например, media-between(sm, lg) вместо media-breakpoint-between(sm, md) цели области просмотра между sm и lg ).

Breaking Удалены стили печати и переменная $enable-print-styles . Классы отображения печати все еще существуют. Смотрите #28339.

Breaking Отказ от функций color() , theme-color() и gray() в пользу переменных. Смотрите #29083.

Breaking Функция theme-color-level() переименована в color-level() и теперь принимает любой цвет, который вы хотите, вместо только $theme-color цвета. Смотрите #29083 Остерегайтесь: color-level() позже был удален в v5.0.0-alpha3 .

Breaking Переименованы $enable-prefers-reduced-motion-media-query и $enable-pointer-cursor-for-buttons в $enable-reduced-motion и $enable-button-pointers для краткости.

Breaking Удален миксин bg-gradient-variant() . Используйте класс .bg-gradient для добавления градиентов к элементам вместо сгенерированных классов .bg-gradient-* .

Breaking Удалены ранее устаревшие миксины:

• hover , hover-focus , plain-hover-focus и hover-focus-active
• float()
• form-control-mixin()
• nav-divider()
• retina-img()
• text-hide() (также удален связанный класс утилит, .text-hide )
• visibility()
• form-control-focus()

Breaking Функция scale-color() переименована в shift-color() , чтобы избежать столкновения с собственной функцией масштабирования цвета Sass.

Примеси box-shadow теперь допускают null значения и отбрасывают none из нескольких аргументов. Смотрите #30394.

Примесь border-radius() теперь имеет значение по умолчанию.

Цветовая система

Цветовая система, которая работала с color-level() и $theme-color-interval , была удалена в пользу новой цветовой системы. Все функции lighten() и darken() в нашей кодовой базе заменены на tint-color() и shade-color() . Эти функции будут смешивать цвет с белым или черным вместо изменения его яркости на фиксированную величину. shift-color() будет либо подкрашивать, либо затенять цвет в зависимости от того, является ли его параметр веса положительным или отрицательным. Смотрите #30622 для получения дополнительных сведений.

Добавлены новые оттенки и оттенки для каждого цвета, предоставляя девять отдельных цветов для каждого основного цвета в качестве новых переменных Sass.

Улучшен цветовой контраст. Коэффициент цветовой контрастности увеличен с 3:1 до 4.5:1 и обновлены синий, зеленый, голубой и розовый цвета, чтобы обеспечить контраст WCAG 2.1 AA. Также изменен цвет нашего цветового контраста с $gray-900 на $black .

Для поддержки нашей цветовой системы мы добавили новые пользовательские функции tint-color() и shade-color() для правильного смешивания цвето.

Обновления сетки

Новая контрольная точка! Добавлена новая контрольная точка xxl для 1400px и выше. Никаких изменений для всех остальных контрольных точек.

Улучшенные промежутки. Промежутки теперь устанавливаются в ремах, и они уже, чем v4 ( 1.5rem , или примерно 24px , по сравнению с 30px ). Это выравнивает промежутки нашей сеточной системы с нашими утилитами интервала.

• Добавлен новый класс gutter ( .g-* , .gx-* и .gy-* ) для управления горизонтальным / вертикальные промежутки, горизонтальные промежутки и вертикальные промежутки.
• Breaking .no-gutters переименован в .g-0 , чтобы соответствовать новым утилитам промежутков.

К столбцам больше не применяется position: relative , поэтому вам, возможно, придется добавить .position-relative к некоторым элементам, чтобы восстановить это поведение.

Breaking Удалили несколько классов .order-* , которые часто не использовались. Теперь из коробки мы предоставляем только от .order-1 до .order-5 .

Breaking Отказ от компонента .media , так как его можно легко воспроизвести с помощью утилит. Смотрите #28265 и страница гибких утилит для примера.

Breaking bootstrap-grid.css теперь применяет к столбцу только box-sizing: border-box вместо сброса глобального размера поля. Таким образом, наши стили сетки можно использовать в большем количестве мест без помех.

$enable-grid-classes больше не отключает создание контейнерных классов. Смотрите #29146.

Обновлен миксин make-col по умолчанию для равных столбцов без указанного размера.

Контент, перезагрузка и т. д.

RFS теперь включен по умолчанию. Заголовки, использующие миксин font-size() , автоматически изменят свой font-size масштабировать вместе с окном просмотра. Эта функция ранее была включена в v4.

Breaking Переработана типография дисплея, заменив переменные $display-* на карту Sass $display-font-sizes . Также удалены отдельные переменные $display-*-weight для одного $display-font-weight и скорректированы font-size s.

Добавлены два новых размера заголовков .display-* , .display-5 и .display-6 .

Ссылки по умолчанию подчеркнуты (не только при наведении курсора), если они не являются частью определенных компонентов.

Переработанные таблицы, чтобы обновить их стили и перестроить их с помощью переменных CSS для большего контроля над стилями.

Breaking Вложенные таблицы больше не наследуют стили.

Breaking .thead-light и .thead-dark удаляются в пользу классов-вариантов .table-* , которые могут использоваться для всех элементов таблицы ( thead , tbody , tfoot , tr , th и td ).

Breaking Примесь table-row-variant() переименована в table-variant() и принимает только 2 параметра: $color (название цвета) и $value (цветовой код). Цвет границы и цвета акцента вычисляются автоматически на основе переменных фактора таблицы.

Разделены переменные заполнения ячеек таблицы на -y и -x .

Breaking Удален класс .pre-scrollable . Смотрите #29135

Breaking Утилиты .text-* больше не добавляют к ссылкам состояния наведения и фокуса. Вместо этого можно использовать вспомогательные классы .link-* . Смотрите #29267

Breaking Удален класс .text-justify . Смотрите #29793

Сброшен по умолчанию горизонтальный padding-left для элементов

и
с 40px по умолчанию браузера на 2rem .

Добавлен $enable-smooth-scroll , который применяет scroll-behavior: smooth глобально, за исключением пользователей, запрашивающих уменьшение движения с помощью медиа-запроса prefers-reduced-motion . Смотрите #31877

• Переменные, утилиты и миксины, зависящие от горизонтального направления, были переименованы для использования логических свойств, подобных тем, которые присутствуют в макетах flexbox, например, start и end вместо left и right .

Формы

Добавлены новые плавающие формы! Мы продвинули пример с плавающими метками до полностью поддерживаемых компонентов формы. Смотрите новую страницу «Плавающие метки».

Breaking Объединенные собственные и настраиваемые элементы формы. Флажки, радио, выборки и другие входные данные, которые имели собственные и настраиваемые классы в версии 4, были объединены. Теперь почти все наши элементы формы полностью настраиваемые, для большинства из них не требуется настраиваемый HTML.

• .custom-check теперь называется .form-check .
• .custom-check.custom-switch теперь называется .form-check.form-switch .
• .custom-select теперь называется .form-select .
• .custom-file и .form-file были заменены пользовательскими стилями поверх .form-control .
• .custom-range теперь называется .form-range .
• Удалены нативные .form-control-file и .form-control-range .

Breaking Удалены .input-group-append и .input-group-prepend . Теперь вы можете просто добавить кнопки и .input-group-text в качестве прямых потомков групп ввода.

Давний Отсутствующий радиус границы в группе ввода с ошибкой обратной связи с проверкой, наконец, исправлен путем добавления дополнительного класса .has-validation во входные группы с проверкой.

Breaking Исключены классы макета, специфичные для формы, для нашей системы сеток. Используйте нашу сетку и утилиты вместо .form-group , .form-row или .form-inline .

Breaking Метки форм теперь требуют .form-label .

Breaking .form-text больше не устанавливает display , позволяя вам создавать встроенный или блокировать текст справки по вашему желанию, просто изменяя элемент HTML.

Иконки валидации больше не применяются к элементам с параметром multiple .

Переставлены исходные файлы Sass в scss/forms/ , включая стили группы ввода.

Компоненты

• Унифицированные значения padding для предупреждений, хлебных крошек, карточек, раскрывающихся списков, групп списков, модальных окон, всплывающих окон и всплывающих подсказок должны основываться на нашей переменной $spacer . Смотрите #30564.

Аккордеон

• Добавлен [новый компонент аккордеона](/docs/5.0/components/accordion/!

Оповещения

В оповещениях теперь есть примеры с иконками.

Удалены пользовательские стили для в каждом оповещении, поскольку они уже используют currentColor .

Значки

Breaking Удалены все классы цвета .badge-* для фоновых утилит (например, используйте .bg-primary вместо .badge-primary ).

Breaking Удалено .badge-pill используйте вместо нее утилиту .rounded-pill .

Breaking Удалены стили наведения и фокуса для элементов и .

Увеличено заполнение по умолчанию для значков с .25em / .5em до .35em / .65em .

Хлебные крошки

Упрощен внешний вид хлебных крошек по умолчанию, удалив padding , background-color и border-radius .

Добавлено новое настраиваемое свойство CSS —bs-breadcrumb-divider для легкой настройки без перекомпиляции CSS.

Кнопки

Breaking Кнопки переключения, с флажками или радио, больше не требуют JavaScript и имеют новую разметку. Нам больше не нужен элемент-оболочка, добавьте .btn-check в , и соедините его с любыми классами .btn в . Смотрите #30650. Документация по этому поводу перемещена со страницы «Кнопки» в новый раздел «Формы».

Breaking Удален .btn-block для утилит. Вместо используйте .btn-block в .btn , оберните ваши кнопки с .d-grid и .gap-* утилитами для размещения их по мере необходимости. Переключитесь на отзывчивые классы, чтобы получить еще больший контроль над ними. Прочтите документацию для некоторых примеров.

Обновлены миксины button-variant() и button-outline-variant() для поддержки дополнительных параметров.

Обновлены кнопки для увеличения контраста при наведении и активном состоянии.

Отключенные кнопки теперь имеют pointer-events: none; .

Карточка

Breaking Отказались от .card-deck в пользу нашей сетки. Оберните ваши карты в классы колонок и добавьте родительский контейнер .row-cols-* , чтобы воссоздать колоды карт (но с большим контролем над выравниванием).

Breaking Отказались от .card-columns в пользу Masonry. Смотрите #28922.

Breaking Заменен аккордеон на основе .card на новый компонент Accordion.

Карусель

Добавлен новый вариант .carousel-dark для темного текста, элементов управления и индикаторов (отлично подходит для более светлого фона).

Шевронные иконки для элементов управления каруселью заменены новыми SVG из Bootstrap Icons.

Кнопка закрытия

Breaking .close переименован в .btn-close для менее общего названия.

Кнопки закрытия теперь используют background-image (встроенный SVG) вместо × в HTML, что позволяет упростить настройку без необходимости касаться вашей разметки.

Добавлен новый вариант .btn-close-white , который использует filter: invert(1) для включения более контрастных иконок удаления на более темном фоне.

Сворачиваемое

• Убрана привязка скролла для аккордеонов.

Выпадающие списки

Добавлен новый вариант .dropdown-menu-dark и связанные переменные для темных выпадающих списков по запросу.

Добавлена новая переменная для $dropdown-padding-x .

Затемнен разделитель раскрывающегося списка для улучшения контраста.

Breaking Все события для раскрывающегося списка теперь запускаются на кнопке-переключателе раскрывающегося списка, а затем всплывают до родительского элемента.

Выпадающие меню теперь имеют атрибут data-bs-popper=»static» , установленный, когда положение раскрывающегося списка является статическим, и data-bs-popper=»none» , когда раскрывающийся список находится на панели навигации. Это добавлено нашим JavaScript и помогает нам использовать настраиваемые стили положения, не мешая позиционированию Popper.

Breaking Исключена опция flip для плагина раскрывающегося списка в пользу собственной конфигурации Popper. Теперь вы можете отключить поведение переворачивания, передав пустой массив для параметра fallbackPlacements в flip модификатор.

На раскрывающиеся меню теперь можно щелкнуть с помощью новой опции autoClose для обработки поведения автоматического закрытия. Вы можете использовать этот параметр, чтобы принять щелчок внутри или за пределами раскрывающегося меню, чтобы сделать его интерактивным.

Выпадающие списки теперь поддерживают .dropdown-item , заключенные в
.

Джамботрон

• Breaking Убрали компонент jumbotron, так как его можно повторить с помощью утилит. Смотрите наш новый пример Jumbotron для демонстрации.

Группа списка

• Добавлен новый модификатор .list-group-numbered в список групп.

Навигация и табы

• Добавлены новые переменные null для font-size , font-weight , color и :hover color в класс .nav-link .

Панели навигации

• Breaking Навбарам теперь требуется контейнер внутри (чтобы значительно упростить требования к интервалам и CSS).

Offcanvas

Пагинация

Ссылки на страницы теперь имеют настраиваемое поле margin-left , которое динамически округляется по всем углам, когда они отделены друг от друга.

Добавлен переход transition по ссылкам для пагинации.

Поповеры

Breaking В нашем шаблоне всплывающего окна по умолчанию .arrow переименован в .popover-arrow .

Параметр whiteList переименован в allowList .

Спиннеры

Спиннеры теперь учитывают prefers-reduced-motion: reduce , замедляя анимацию. Смотрите #31882.

Улучшено вертикальное выравнивание спиннера.

Тосты

Теперь тосты можно позиционировать в .toast-container с помощью утилит позиционирования.

Изменена длительность тоста по умолчанию на 5 секунд.

Удалено overflow: hidden из тостов и заменено правильным border-radius с функциями calc() .

Тултипы

Breaking В нашем шаблоне всплывающей подсказки по умолчанию .arrow переименован в .tooltip-arrow .

Breaking Значение по умолчанию для fallbackPlacements изменено на [‘top’, ‘right’, ‘bottom’, ‘left’] для лучшего размещения элементов.

Breaking Параметр whiteList переименован в allowList .

Утилиты

Breaking Переименовано несколько утилит для использования логических имен свойств вместо прямых имен с добавлением поддержки RTL:

• Переименованы .left-* и .right-* в .start-* и .end-* .
• Переименованы .float-left и .float-right в .float-start и .float-end .
• Переименованы .border-left и .border-right в .border-start и .border-end .
• Переименованы .rounded-left и .rounded-right в .rounded-start и .rounded-end .
• Переименованы .ml-* и .mr-* в .ms-* и .me-* .
• Переименованы .pl-* и .pr-* в .ps-* и .pe-* .
• Переименованы .text-left и .text-right в .text-start и .text-end .

Breaking По умолчанию отрицательные поля отключены.

Добавлен новый класс .bg-body для быстрой установки фона для дополнительных элементов.

Добавлены новые утилиты позиционирования для top , right , bottom и left . Значения для каждого свойства включают 0 , 50% и 100% .

Добавлены новые утилиты .translate-middle-x и .translate-middle-y для горизонтального или вертикального центрирования абсолютных / фиксированных элементов.

Breaking .text-monospace переименован в .font-monospace .

Breaking Удален .text-hide , так как это устаревший метод скрытия текста, который больше не следует использовать.

Добавлены утилиты .fs-* для утилит font-size (с включенным RFS). Они используют тот же масштаб, что и заголовки HTML по умолчанию (1-6, от большого к маленькому), и могут быть изменены с помощью карты Sass.

Breaking Утилиты .font-weight-* переименованы в .fw-* для краткости и единообразия.

Breaking Утилиты .font-style-* переименованы в .fst-* для краткости и единообразия.

Добавлен .d-grid для отображения утилит и новые утилиты gap ( .gap ) для макетов CSS Grid и flexbox.

Breaking Удалены .rounded-sm и rounded-lg , а также введена новая шкала классов от .rounded-0 до .rounded-3 . Смотрите #31687.

Добавлены новые утилиты line-height : .lh-1 , .lh-sm , .lh-base и .lh-lg . Смотреть здесь.

Утилита .d-none в нашем CSS перемещена, чтобы придать ей больший вес по сравнению с другими утилитами отображения.

Расширен помощник .visually-hidden-focusable , чтобы он также работал с контейнерами, используя :focus-within .

Помощники

Breaking Адаптивные помощники по внедрению были переименованы в ratio helpers с новыми именами классов и улучшенным поведением, а также полезной переменной CSS.

• Классы были переименованы, чтобы изменить соотношение сторон by на x . Например, .ratio-16by9 теперь .ratio-16×9 .
• Мы отказались от селектора .embed-responsive-item и группы элементов в пользу более простого селектора .ratio > * . Класс больше не нужен, и помощник по соотношению теперь работает с любым элементом HTML.
• Карта Sass $embed-responsive-aspect-ratios была переименована в $aspect-ratios , а ее значения были упрощены и теперь включают имя класса и процентное соотношение в качестве пары key: value .
• Переменные CSS теперь генерируются и включаются для каждого значения в карте Sass. Измените переменную —bs-aspect-ratio в .ratio , чтобы создать любое настраиваемое соотношение сторон.

Breaking Классы программ чтения с экрана теперь классы “визуально скрытые”.

• Изменен файл Sass с scss/helpers/_screenreaders.scss на scss/helpers/_visually-hidden.scss
• .sr-only и .sr-only-focusable переименованы в .visually-hidden и .visually-hidden-focusable
• Переименованы миксины sr-only() и sr-only-focusable() в visually-hidden() и visually-hidden-focusable() .

bootstrap-utilities.css теперь также включает наших помощников. Помощников больше не нужно импортировать в пользовательские сборки.

JavaScript

Отказ от зависимости jQuery и переписаны плагины на обычный JavaScript.

Breaking Атрибуты данных для всех плагинов JavaScript теперь имеют пространство имен, чтобы помочь отличить функциональность Bootstrap от стороннего кода и вашего собственного кода. Например, мы используем data-bs-toggle вместо data-toggle .

Все плагины теперь могут принимать селектор CSS в качестве первого аргумента. Вы можете передать элемент DOM или любой допустимый селектор CSS, чтобы создать новый экземпляр плагина:

popperConfig может быть передан как функция, которая принимает конфигурацию Popper по умолчанию Bootstrap в качестве аргумента, так что вы можете объединить эту конфигурацию по умолчанию по-своему. Применяется к раскрывающимся спискам, всплывающим подсказкам и всплывающим подсказкам.

Значение по умолчанию для fallbackPlacements изменено на [‘top’, ‘right’, ‘bottom’, ‘left’] для лучшего размещения элементов Popper. Применяется к раскрывающимся спискам, всплывающим подсказкам и всплывающим подсказкам.

Удалено подчеркивание из общедоступных статических методов, таких как _getInstance() → getInstance() .

Bootstrap

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.0.2.

Источник