Navbar toggler icon не работает

Выпадающее меню Bootstrap 5 не работает

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

1. Код меню был скопирован из документации GetBootstrap.com. Посмотрел на других сайтах, где может быть проблема, пробовал альтернативы, но безуспешно.
2. bootstrap.min.css и bootstrap.bundle.min.js, обе версии 5, были связаны с кодом. Пробовали эти файлы прямо на сайте и по ссылкам. Также пробовал popper.js плюс bootstrap.min.js; тот же результат.
3. Прямые ссылки работают, а раскрывающаяся часть — нет. Щелчок по раскрывающемуся элементу ничего не дает. Было бы здорово, если бы он отображался при наведении курсора и оставался на месте, чтобы можно было нажимать подпункты.
4. Меню должно быть в правой части экрана; глядя на ответы, ms-auto должен это сделать. Это не.
5. Когда экран свернут до размера планшета или телефона, меню переходит к ожидаемому сжатому символу, но не работает вообще; при нажатии ничего не будет отображаться.

3 ответа

Использование CDN для интеграции ресурсов Bootstrap 5.0.0-beta3 должно работать.

Надеюсь, это вам поможет!

Не стесняйтесь проголосовать за ответ

dropdown должен быть классом .. а не атрибутом:

Спасибо вам обоим Manifest Man и Зиму. Я использовал более раннюю версию bootstrap 5, и когда использовались последние версии bootstrap.min.css и bootstrap.bundle.min.js, он начал работать.

Кроме того, да, раскрывающийся список — это класс, а не атрибут.

Источник

Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Навигационная панель

Навигационная панель — это оболочка, которая позиционирует брендинг, навигацию и другие элементы в хедере. Он легко расширяется и, благодаря нашему плагину Collapse, может легко интегрировать адаптивное поведение.

Содержание

Как это работает

Вот что вам необходимо знать перед началом работы с навигационной панелью:

• Навигационная панель требует обертывания .navbar с .navbar-toggleable-* for responsive collapsing и классов цветовой схемы.
• Навигационные панели и их контент по умолчанию подвижные. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
• Навигационные панели и их содержимое построены с помощью flexbox, что обеспечивает легкость выравнивания через классы утилиты.
• Навигационные панели по умолчанию адаптивны, но вы можете легко модифицировать их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
• Обеспечьте доступность с помощью элемента

Brand

.navbar-brand может быть применена к большинству элементов, но якорь лучше всего работает, поскольку некоторым элементам могут потребоваться классы утилит или пользовательские стили.

Добавление изображений в .navbar-brand вероятно, всегда требует пользовательские стили или утилиты для правильного размера. Ниже представлены несколько примеров для демонстрации.

Навигация

Навигационные ссылки навигационной панели строятся на наших опциях .nav со своим собственным классом-модификатором и требуют использования toggler классов для правильного адаптивного дизайна. Навигация в навигационной панели также будет расти, чтобы занять как можно больше горизонтального пространства, чтобы обеспечить безопасное выравнивание содержимого навигационной панели.

Активные состояния — с .active — для указания текущей страницы могут быть применены напрямую к .nav-link или их непосредственным родительским .nav-item .

И поскольку мы используем классы для наших навигаций, вы можете полностью избежать использования подхода, основанного на списках, если хотите.

Вы также можете использовать выпадающие списки в вашей навигации навигационной панели. Для раскрывающихся меню требуется обернуть элемент для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link , как показано ниже.

Формы

Разместите различные элементы управления формы и компоненты в навигационную панель с помощью .form-inline .

При необходимости совместите содержимое своих встроенных форм с утилитами.

Группы входных данных также работают:

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

Текст

Навигационная панель может содержать биты текста с помощью .navbar-text . Этот класс регулирует вертикальное выравнивание и горизонтальное расстояние для строк текста.

При необходимости совместите их с другими компонентами и утилитами.

Цветовые схемы

Theming для навигационной панели никогда не была проще, благодаря сочетанию тематических классов и утилит background-color . Выберайте из .navbar-light для использования со светлыми цветами фона, или .navbar-inverse для темных цветов фона. Затем, настройте с помощью .bg-* утилиты.

Контейнеры

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

Когда контейнер находится в вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже указанного вами класса .navbar-toggleable-* . Это гарантирует, что мы не дублируем излишнее заполнение на небольших экранах, когда ваша навигационная панель свернута.

Размещение

Используйте наши утилиты для размещения навигационных панелей в нестатических позициях. Выберите один из следующих вариантов: фиксированная сверху, фиксированная снизу или прикрепленная к верхней части. Обратите внимание, что position: sticky , используемый для .sticky-top , поддерживается не в каждом браузере.

Источник

Навигационная панель

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

Как это работает

Вот что вам надо знать перед использованием навбара:

• Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
• Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
• Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
• Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
• Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar . Смотри класс отображения.
• Придайте им доступность использованием элемента

В этом примере использованы классы цвета bg-light и спейсинга my-2 , my-lg-0 , mr-sm-0 , my-sm-0 .

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

Навбар

Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

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

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline .

Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

Работают и формы ввода, также:

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

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).

Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.

Источник

Навигационная панель

Документация и примеры адаптивной панели навигации. Включает поддержку брендинга, навигации с поддержкой нашего плагина для свертывания.

Как это работает

Вот что вам надо знать перед использованием навбара:

• Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl|-xxl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
• Навбары и их содержимое по умолчанию гибкие. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
• Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
• Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
• Придайте им доступность использованием элемента

В этом примере использованы классы цвета ( bg-light ) и отступов ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

Бренд

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

Текст

Добавьте свой текст в элемент с помощью класса .navbar-brand .

Изображение

Вы можете заменить текст внутри .navbar-brand на .

Изображение и текст

Вы также можете использовать некоторые дополнительные утилиты для одновременного добавления изображения и текста. Обратите внимание на добавление .d-inline-block и .align-text-top в .

Навбар

Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .

Обратите внимание, что вам также следует добавить атрибут aria-current в сам .nav-link .

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке при необходимости.

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

Формы

Размещайте различные элементы управления и компоненты формы на панели навигации:

Непосредственные дочерние элементы в .navbar используют гибкую компоновку и по умолчанию имеют значение justify-content: between . Используйте дополнительные гибкие утилиты, необходимые для настройки их поведения.

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

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

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

Цветовые схемы

Создание тем для панели навигации никогда не было таким простым благодаря сочетанию классов тем и утилит настройки цвета фона background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”. Обратите внимание, что внутренний контейнер по-прежнему требуется.

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

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).

Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.

Прокрутка

Добавьте .navbar-nav-scroll в .navbar-nav (или другой субкомпонент навигационной панели), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой навигационной панели. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но Вы можете переопределить это с помощью локального настраиваемого свойства CSS —bs-navbar-height или настраиваемых стилей. В больших окнах просмотра, когда панель навигации развернута, содержимое будет отображаться так же, как и на панели навигации по умолчанию.

Обратите внимание, что такое поведение имеет потенциальный недостаток overflow —при установке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto , который обрезает некоторые горизонтальное содержание.

Вот пример навигационной панели, использующей .navbar-nav-scroll с style=»—bs-scroll-height: 100px;» , с некоторыми дополнительными утилитами полей для оптимального интервала.

Отзывчивое поведение

Навбары могут использовать классы .navbar-toggler , .navbar-collapse и .navbar-expand <-sm|-md|-lg|-xl|-xxl>для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand . Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand , на самых маленьких брейкпойнтах:

С названием бренда слева и переключателем справа:

С переключателем слева и названием бренда справа:

Внешнее содержимое

Иногдатребуется использовать плагин сворачивания для запуска элемента контейнера для контента, который структурно находится за пределами .navbar . Поскольку наш плагин работает с сопоставлением id и data-bs-target , то это легко сделать!

Collapsed content

При этом мы рекомендуем включить дополнительный JavaScript для программного перемещения фокуса на контейнер при его открытии. В противном случае при использовании клавиатуры и вспомогательными технологиями, вероятно, будет сложно найти вновь обнаруженный контент, особенно если открытый контейнер находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть атрибут aria-controls , указывающий на идентификатор контейнера содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, который он контролирует, но в настоящее время эта технология поддерживается не полностью.

Источник