Skip to main content

Компоненты

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

Навигации

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

Содержание

Относительно доступности

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

База навигации

Свернуть свой собственный стиль навигации за счет расширения базы .nav компонента. Всего Bootstrap компоненты навигация построена на вершине этого указать дополнительные стили. Включает стили для гостей с ограниченными физическими состояние, Но не активна состояние.

<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>, как выше, или свернуть свой собственный с сказать <nav> элемент. Изменение отображения элементов навигации ниже это умышленное Как <li>s имеют по умолчанию display не обычных <a> элементов.

<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>

Рядный

Пространство сча в одной горизонтальной полосы с .nav-inline. Больше одной серии переносится на новую строку.

<nav class="nav nav-inline">
  <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>

Так же работает навигация строящаяся со списками.

<ul class="nav nav-inline">
  <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-tabs класс для создания интерфейс с вкладками. Используйте их для создания tabbable регионов с вкладку 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 вместо #1#:

<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-stacked на .nav.nav-pills укладывать их вертикально. Каждый .nav-link будет на уровне блоков, что позволяет на больших площадях нажмите с помощью мыши или коснитесь.

<ul class="nav nav-pills nav-stacked">
  <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>ы.

<nav class="nav nav-pills nav-stacked">
  <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>

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

Создавайте выпадающее меню с небольшим добавлением 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 поведение

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

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.

<!-- Навигация вкладки -->
<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>

<!-- Вкладка панели -->
<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

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

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

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

$('#myTab a[href="#profile"]').tab('show') // Выбрать вкладку по имени
$('#myTab a:first').tab('show') // Выбрать первую вкладку
$('#myTab a:last').tab('show') // Выбрать последнюю вкладку
$('#myTab li:eq(2) a').tab('show') //Выбрать третью вкладку (в 0-indexed)

Эффект затухания

Чтобы сделать вкладки исчезают, добавьте .fade друг .tab-pane. Первые панели вкладки также должен быть .in, чтобы сделать первоначальный контент виден.

<div class="tab-content">
  <div class="tab-pane fade in 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>

Методы

$().вкладка

Активирует вкладку элемент и содержимого контейнера. Вкладка должна иметь либо data-target или 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’)

Выбирает вкладку и показывает связанные области. Любой другой вкладке, что ранее был выбран снимается и связанные с панель скрыта. Возвращает абоненту до панели вкладки фактически доказано (т. е. shown.bs.tab события).

$('#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 // новая активированная вкладка
  e.relatedTarget предыдущая активированная вкладка
})