Bootstrap символы. Компоненты · Bootstrap на русском. Доступность навигационных панелей

Навигационная панель по умолчанию

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

Переполнение контента

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

  1. Уменьшите количество или ширину NavBar пунктов.
  2. Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит .
  3. Измените точку, в которой ваши NavBar переключается между свернутым и горизонтальной режимом. Настройте переменную @grid-float-breakpoint или добавmnt свой собственный медиа-запрос.

Необходимость в JavaScript

Если JavaScript отключен и ширина окна станет достаточно узкой, для чтобы навигационная панель свернулась, то тогда не будет возможности развернуть навигационную панель и просмотреть ее содержимое с классом.navbar-collapse .

Доступность навигационных панелей

Формы

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

Как ведущий, класс.navbar-form имеет большинство своего кода совместно с.form-inline через mixin. Некоторые элементы управления форм, таких как группы ввода, могут потребовать фиксированной для правильного отображения в navbar.

Предостережения для мобильных устройств

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

Всегда добавляйте ярлыки

Программы чтения экрана (screen readers) будут иметь проблемы с вашими формами, если вы не будете добавлять ярлыки для каждого поля ввода. Для данных встроенных форм навигационных панелей, вы можете скрыть ярлыки используя класс.sr-only .

Кнопки

Добавьте класс.navbar-btn к элементам <и> , которые не находятся в для вертикального их центрирование в навигационных панелях.

Специфическая особенность использования

Как и стандартные классы кнопок , .navbar-btn может использоваться в элементах и . Тем не менее, ни один.navbar-btn или же стандартные классы кнопки не должны использоваться в элементах внутри.navbar-nav .

Текст

Заключите строку текста в элемент с классом.navbar-text , обычно с тегом

Для правильного выравнивания и цвета.

Не контекстные ссылки

Компонент выравнивания

Выравнивайте навигационные ссылки, формы, кнопки, текст, используя вспомогательные классы.navbar-left или.navbar-right . Оба классы добавляют CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, вложите их в отдельный

    с соответствующим вспомогательным классом.

    Эти классы являются смешанной версией классов.pull-left и.pull-right , но они предназначены для медиа запросов, чтобы упростить обработку компонентов навигационных панелей для различных размеров устройств.

    Фиксация вверху

    Добавьте.navbar-fixed-top и подключите.container или.container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

    Фиксированная навигационная панель будет налагаться на остальные вашего содержимого, пока вы не добавите padding в верхней части

    body { padding-top : 70 px ; }

    Убедитесь, что это включено основного Bootstrap CSS.

    Фиксация внизу

    Добавьте.navbar-fixed-bottom и подключите.container или.container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

    Необходимость установления padding для body

    Фиксированная навигационная панель будет налагаться на остальные вашего содержимого, пока вы не добавите padding в нижней части . Попробуйте установить свои собственные значения, или используйте фрагмент кода ниже. Справка: По умолчанию, навигационная панель имеет высоту 50px.

    body { padding-bottom : 70 px ; }

    Убедитесь, что это включено основного Bootstrap CSS.

    Статический верх

    Создайте навигационную панель на полную ширину, которая будет прокручиваться вместе со страницей, добавив.navbar-static-top и включите.container или.container-fluid , для центровки и внутренних отступлений содержимого навигационной панели.

    В отличие от классов.navbar-fixed-* , вам не нужно изменять любой padding и body .

    Инвертированная навигационная панель

    Изменить внешний вид панели навигации, добавив.navbar-inverse .

    Навигационная панель по умолчанию

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

    В настоящее время обосновано навигации навигация ссылки не поддерживаются.

    Переполнение контента

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

    1. Уменьшите количество или ширину NavBar пунктов.
    2. Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит .
    3. Измените точку, в которой navbar переключается между сворачиванием и горизонтальным режимом. Настройте, изменив @grid-float-breakpoint или добавьте свои настройки для медиа запросов.

    Требуется JavaScript плагин

    Если JavaScript отключен и ширина окна станет достаточно узкой, для чтобы навигационная панель свернулась, то тогда не будет возможности развернуть навигационную панель и просмотреть ее содержимое с классом.navbar-collapse .

    Адаптивная навигационная панель в вашей версии Bootstrap требует плагина collapse .

    Изменение сворачивания мобильных navbar

    NavBar коллапсирует в вертикальной мобильного зрения если видовой экран уже, чем @grid-float-breakpoint , и расширяется в горизонтальной немобильного зрения если видовой экран, по крайней мере @grid-float-breakpoint в ширину. Эта переменная в менее источника контролировать, когда NavBar разрушается /расширяется. Значение по умолчанию 768px (the smallest "small" or "tablet" screen).

    Доступность навигационных панелей

    Будьте уверены, чтобы использовать

Статьи по теме: