Компоненты

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

Навигация

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

Содержание

Базовый nav

Основной компонент .nav построен с использованием flexbox и обеспечивает прочную основу для создания всех типов навигационных компонентов. Он включает в себя некоторые переопределения стиля (для работы со списками), некоторые дополнения ссылок для более крупных областей хита и базовый отключенный стиль. Активные состояния не включены в базовый nav.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Классы используются повсюду, поэтому ваша разметка может быть очень гибкой. Используйте <ul>s как указано выше, или сверните свой собственный с помощью элемента <nav> element. Поскольку .nav использует display: flex, ссылки nav ведут себя так же, как элементы nav, но без дополнительной разметки.

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Доступные стили

Измените стиль вашего компонента .navs с помощью модификаторов и утилит. По мере необходимости смешивайте и сопоставляйте или создавайте свои собственные.

Горизонтальное выравнивание

Измените горизонтальное выравнивание вашего компонента с помощью flexbox utilities. По умолчанию навигаторы выравниваются по левому краю, но вы можете легко выровнять их по центру или по правому краю.

Расположите по центру с помощью .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Выровняйте по правому краю с помощью .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Вертикальное

Загрузите навигацию, изменив направление гибкого элемента с помощью утилиты .flex-column. Нужно расположить их на некоторых экранах, но не на всех? Используйте адаптивные версии (например, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Как всегда, вертикальная навигация возможна и без <ul>s.

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Вкладки

Принимает базовый класс nav и добавляет класс .nav-tabs для создания интерфейса с вкладками.class to generate a tabbed interface. Используйте их для создания областей с вкладками с помощью нашего JavaScript-плагина для вкладок.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Навигационные кнопки

Возьмите тот же HTML, но используйте .nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Заполнить и выровнять

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

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Работа с утилитами flex

Если вам нужны адаптивные варианты nav, рассмотрите возможность использования ряда утилит flexbox. Эти утилиты предлагают большую настройку в разных точках прерывания. В приведенном ниже примере наш nav будет уложен на самую низкую точку останова, затем адаптируется к горизонтальной компоновке, которая заполняет всю доступную ширину, начиная с небольшой точки останова.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>

Что касается доступности

Если вы используете навигаторы для обеспечения навигационной панели, обязательно добавьте role="navigation" в самый логичный родительский контейнер <ul>, или оберните элемент <nav> во всей навигации. Не добавляйте роль к самому <ul>.

Использование выпадающих списков

Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.

Вкладки с выпадающими списками

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Навигационные кнопки с выпадающими списками

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

JavaScript behavior

Используйте JavaScript плагин для вкладок - включите его отдельно или через скомпилированный файл bootstrap.js — чтобы расширить наши навигационные вкладки и кнопки чтобы создать панели с вкладками местного контента, даже через выпадающие меню.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Использование атрибутов данных

Вы можете активировать вкладки или навигационные кнопки без написания JavaScript, просто указав data-toggle="tab" или data-toggle="pill" для элемента. Используйте эти атрибуты данных на .nav-tabs или .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Через JavaScript

Включите вкладки через JavaScript (каждая вкладка должна быть активирована индивидуально):

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельные вкладки несколькими способами:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Эффект исчезновения

Чтобы сделать вкладки постепенно появляющимися, добавьте .fade в каждую .tab-pane. Первая панель вкладок также должна иметь .show, чтобы сделать видимым исходный контент.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Методы

$().tab

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо data-target, либо an href, направленную на контейнерный узел в DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

.tab(‘show’)

Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).

$('#someTab').tab('show')

События

При показе новой вкладки события срабатывают в следующем порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке, которая должна быть показана)
  3. hidden.bs.tab (на предыдущей активной вкладке, то же самое, что и для события hide.bs.tab)
  4. shown.bs.tab (на недавно активированной показанной вкладке, то же самое, что и для события show.bs.tab)

Если ни одна вкладка не была активна, то события hide.bs.tab и hidden.bs.tab не будут запущены.

Тип события Описание
show.bs.tab Это событие срабатывает во время показа на вкладке, но до показа новой вкладки. Используйте event.target и event.relatedTarget для направления активной вкладки и предыдущей активной вкладки (если доступно) соответственно.
shown.bs.tab Это событие срабатывает во вкладке после того, как была показана вкладка. Используйте event.target и event.relatedTarget для направления активной вкладки и предыдущей активной вкладки (если доступно) соответственно.
hide.bs.tab Это событие срабатывает, когда новая вкладка должна быть показана (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для направления на текущую активную вкладку и новую вкладку, которая скоро будет активной, соответственно.
hidden.bs.tab Это событие срабатывает после показа новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйтеevent.target и event.relatedTarget для направления на предыдущую активную вкладку и новую активную вкладку, соответственно.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x