Содержание
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.
Содержание
Примеры
Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown , или другой элемент, который заявляет, position: relative; . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.
Одиночная кнопка выпадающего меню
Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:
Самое приятное, что вы можете сделать это с любым вариантом кнопки:
Split кнопка с выпадающим меню
Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.
Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.
Изменение размера
Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.
Вариант списка сверху
Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.
Пункты меню
Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.
Выравнивание меню
По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.
Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.
Заголовки меню
Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.
Dropdown header
Делители меню
Отдельные группы связанных элементов меню с делителем.
Заблокированы части меню
Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.
Использование
Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.
На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.
Примечание: data-toggle="dropdown" атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.
С помощью данных атрибутов
Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.
Через JavaScript
Вызвать меню через JavaScript:
data-toggle="dropdown" еще требуется
Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle="dropdown" всегда должно присутствовать на спусковом элементе раскрывающегося меню.
Варианты
Методы
| Способ | Описание |
|---|---|
| $().dropdown(‘toggle’) | Переключает меню данной панели навигации и вкладок навигации. |
События
Все выпадающие события обстреляли .dropdown-menu ’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.
| Событие | Описание |
|---|---|
| show.bs.dropdown | Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется. |
| shown.bs.dropdown | Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения). |
| hide.bs.dropdown | Это событие немедленно уволили, когда скрывать метод экземпляра называется. |
| hidden.bs.dropdown | Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения). |
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
На этом уроке мы познакомимся с расширением Jasny Bootstrap, которое будем использовать для создания нестандартного навигационного меню.
Назначение расширения Jansy Bootstrap
Jansy Bootstrap – это расширение для платформы Twitter Bootstrap 3, которое предлагает веб-разработчикам дополнительные компоненты и плагины:
-
Кнопки с метками;
Плагин "fileinput.js", предназначенный для создания визуального привлекательных виджетов для отображения выбранных файлов или изображений.
Подключение расширения Jansy Bootstrap
Для подключения к веб-странице расширения Jansy Bootstrap у Вас должны быть предварительно загружены архивы Twitter Bootstrap 3, jQuery и, конечно же, Jansy Bootstrap. После распаковки данных архивов, их необходимо подключить к веб-странице.
Вертикальное навигационное меню
Создать вертикальное навигационное меню в Twitter Bootstrap 3 можно с помощью компонента navmenu. По умолчанию данное меню имеет ширину, равную 300px. Изменить ширину данного меню можно посредством установления необходимой ширины для .navmenu в вашем CSS или с помощью настройки переменной @navmenu-width во время создания пользовательской сборки.
Код HTML:
Код CSS:
Меню, прикреплённое к левой или правой части экрана
Для создания навигационного меню, прикреплённого к левой ( .navmenu-fixed-left ) или правой ( .navmenu-fixed-right ) границе экрана, необходимо добавить один из выше представленных классов к элементу nav. При этом необходимо помнить, что меню может наложиться на другое содержимое веб-страницы, которое тоже расположено в этой части экрана. Чтобы этого не допустить, необходимо установить дополнительные отступы padding слева или справа (в зависимости от расположения меню) для тега body. Величина отступа должна быть больше или равной ширине навигационного меню. Также необходимо помнить, что Ваш файл CSS, необходимо подключить после подключения CSS файла Jansy Bootstrap.
Код HTML:
Код CSS:
Скрывающееся навигационное меню
Скрывающееся навигационное меню работает на основе плагина offcanvas, который позволяет скрыть navmenu с холста. Это особенно полезно для экранов с небольшим размером диагонали.
Рассмотрим следующие примеры navmenu с плагином offcanvas:
-
Навигационное меню с эффектом толкания (push). Принцип работы данного меню заключается в толкании всей веб-страницы ( .
Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.
Обзор
Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.
Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js.
Если вы компилируете наши JS файлы, необходим util.js .
Доступность
Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов ( role и aria- ), необходимых для меню согласно стандарту ARIA .
Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC .
Примеры
Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative; . При необходимости выпадающие элементы можно запускать из элементов или .
Выпадающие элементы одинарных кнопок
Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытияскрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :
Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного спейсинга вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
«Выпадающий вверх»
Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.
«Выпадающий вправо»
Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.
«Выпадающий влево»
Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.
Пункты меню
Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов , а не только .
Выравнивание меню
По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.
Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).
Заголовки меню
Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.
Dropdown header
Разделители меню
Разделяйте группы родственных элементов меню разделителем.
Формы меню
Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.
Активные элементы меню
Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».
Неактивные элементы меню
Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».
Использование
Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.
На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ( $.noop ) mouseover к непосредственным «детям» элемента . Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.
Через атрибуты
Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытияпоказа выпадающего элемента.
Через JS
Управляйте выпадающими элементами с помощью JavaScript:
data-toggle="dropdown" still required
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="" .
| Название | Тип | По умолч. | Описание |
|---|---|---|---|
| offset | number | string | function | Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js | |
| flip | boolean | true | Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs. |
| boundary | string | element | ‘scrollParent’ | Граница ограничения переполнения выпадающего меню. Принимает значения ‘viewport’ , ‘window’ , ‘scrollParent’ или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js. |
Обратите внимание, что если для boundary установлено значение, отличное от ‘scrollParent’ , позиция position: static применяется к контейнеру .dropdown .
Методы
| Метод | Описание |
|---|---|
| $().dropdown(‘toggle’) | Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом. |
| $().dropdown(‘update’) | Обновляет позицию «выпадения» элемента. |
| $().dropdown(‘dispose’) | Уничтожает выпадающий элемент. |
События
Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget , значение которого равно элементу «якоря» (ссылка, т.е. ), запускающего функциональность toggle.