Bootstrap DropDowns и адаптивные вкладки
- Введение и установка
- Сеточная система
- Кнопки, Глификоны, Таблицы
- Вертикальные формы, горизонтальные формы, встроенные формы
- Индикатор прогресса и Джамботрон
Выпадающее меню с использованием Bootstrap:
В начальной загрузке выпадающие списки создаются с использованием class="dropdown". Что мы сделаем, так это создадим кнопку, а затем превратим ее в раскрывающийся список.
Как уже говорилось в нескольких последних руководствах, кнопки можно создавать с помощью тега <button>. Но в этой кнопке мы хотим создать раскрывающийся список, поэтому мы добавим class="btn dropdown-toggle" и data-toggle="dropdown".
В принципе, это будет выглядеть примерно так.
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Мой раскрывающийся список </button>
Теперь мы хотим преобразовать эту кнопку в раскрывающийся список. Итак, мы создадим неупорядоченный список, используя тег <ul> с class=”dropdown-menu” и добавим элементы, используя тег <li>.
Пример:
Выход:
Вы можете улучшить раскрывающийся список, используя классы в теге <li>. Чтобы добавить заголовок в раскрывающийся список, добавьте class="dropdown-header", чтобы добавить разделитель между элементами, используйте class="divider", а чтобы отключить элемент в списке, используйте class="disabled".
Пример:
Выход:
Вкладки навигации с использованием Bootstrap:
Чтобы создать меню навигации с вкладками, нам нужно создать неупорядоченный список с помощью тега <ul>, а затем добавить class=”nav nav-tabs”. Теперь мы можем добавить наши вкладки с помощью тега <li>. Не забудьте назначить одну вкладку с class="active", чтобы она отображалась как активная вкладка по умолчанию. Теперь нам нужно написать содержимое каждой вкладки, используя class="tab-pane" внутри class="tab-content". Обратите внимание, что вы должны назначить идентификаторы для соответствующей панели вкладок.
Добавление class="fade" добавляет эффект затухания при переключении вкладок.
Пример:
Выход:
Вы можете изменить внешний вид вкладок, изменив class="navbar-nav" на "nav-pills" или "nav-stacked", и если вы хотите, чтобы ваши вкладки покрывали весь экран, попробуйте добавить class= «нав-оправданный»
Как и в случае с выпадающими списками, мы можем отключить любую вкладку, используя class="disabled".
Выход:
Примечание. Будьте осторожны при использовании навигационной панели, она будет изменять свой размер в зависимости от размера экрана.