Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Навигация доступна в 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 плагин—включите его самостоятельно или через скомпилированный 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Вы можете активировать вкладку, или таблетку навигации без написания какого-либо 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>
Включить 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>
Выбирает вкладку и показывает связанные области. Любой другой вкладке, что ранее был выбран снимается и связанные с панель скрыта. Возвращает абоненту до панели вкладки фактически доказано (т. е. shown.bs.tab
события).
$('#someTab').tab('show')
При показе новой вкладке, события возникают в следующем порядке:
hide.bs.tab
(текущей активной вкладки)show.bs.tab
(В К-быть-показано вкладке)hidden.bs.tab
(на предыдущей активной вкладки, тот же, что для hide.bs.tab
событие)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 предыдущая активированная вкладка
})