меню
Большинство веб-страниц имеют некоторый вид меню.
В HTML меню часто определяется в неупорядоченном списке <ul> (и стиль впоследствии), как это:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Если вы хотите создать горизонтальное меню из списка выше, добавьте .list-inline класс <ul> :
<ul class="list-inline"> Попробуй сам " Или вы можете отобразить меню выше Bootstraps' Tabs and Pills (смотрите ниже).
Примечание: Смотрите последний пример на этой странице , чтобы узнать, как сделать вкладки и таблетки переключаемой / динамический.
Вкладки
Вкладки создаются с помощью <ul class="nav nav-tabs"> :
Совет: Также отметьте текущую страницу с <li class="active"> .
Следующий пример создает навигационные вкладки:
пример
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Попробуй сам " Язычки с Выпадающее меню
Вкладки также может содержать выпадающие меню.
Следующий пример добавляет выпадающее меню в разделе "Меню 1":
пример
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Попробуй сам " Pills
Таблетки создаются с помощью <ul class="nav nav-pills"> . Также отметьте текущую страницу с <li class="active"> :
пример
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Попробуй сам " Вертикальные Pills
Pills также могут отображаться в вертикальном положении . Просто добавьте .nav-stacked класс:
пример
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Попробуй сам " Вертикальные Pills в ряд
Текст...
Текст...
Текст...
В следующем примере помещает меню по вертикали таблетки внутри последней колонке. Так, на большом экране меню будет отображаться справа. Но на маленьком экране, содержимое будет автоматически подстраиваться в компоновке одного столбца:
пример
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Попробуй сам " Pills С Выпадающее меню
Pills также может содержать выпадающие меню.
Следующий пример добавляет выпадающее меню в разделе "Меню 1":
пример
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Попробуй сам " Центрированные Tabs and Pills
До центра / оправдать вкладки и pills , использовать .nav-justified класс.
Обратите внимание, что на экранах, которые меньше, чем 768px, элементы списка сложены (содержание будет оставаться в центре):
пример
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Попробуй сам " Переключаемой / Динамические Tabs
ГЛАВНАЯ
Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua.
Для того, чтобы сделать вкладки переключаемой, добавить data-toggle="tab" атрибута для каждой ссылки. Затем добавьте .tab-pane класса с уникальным идентификатором для каждой вкладки и обернуть их внутри <div> элемент с классом .tab-content - .tab-content .
Если вы хотите , чтобы вкладки исчезают и появляются при нажатии на них, добавьте .fade класс .tab-pane :
пример
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Попробуй сам " Переключаемой / Динамические Pills
То же самое относится и к код pills ; только изменить атрибут данных для переключения data-toggle="pill" :
пример
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
Полное Bootstrap Navigation Reference
Для полного ведения всех навигационных классов, перейдите на наш полный Bootstrap Navigation Reference .
Для полного ведения всех вкладке Параметры методов и событий, перейдите на наш Bootstrap JS Tab Reference .