dietetyczne
Większość stron internetowych ma jakieś menu.
W HTML, menu jest często definiowana w liście nieuporządkowanej <ul> (oraz stylizowany potem), na przykład:
<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> Jeśli chcesz utworzyć poziomą menu z powyższej listy, dodać .list-inline klasę <ul> :
<ul class="list-inline"> Spróbuj sam " Można też wyświetlić menu powyżej Bootstraps' Tabs and Pills (patrz niżej).
Uwaga: Zobacz ostatni przykład na tej stronie, aby dowiedzieć się, jak sprawić, by zaczepy i pigułki toggleable / dynamiczny.
Tabs
Zakładki są tworzone z <ul class="nav nav-tabs"> :
Wskazówka: oznaczyć także bieżącą stronę z <li class="active"> .
Poniższy przykład tworzy zakładki nawigacji:
Przykład
<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>
Spróbuj sam " Zakładki z menu rozwijanym
Tabs może również posiadać rozwijanych menu.
Poniższy przykład dodaje rozwijane menu "Menu 1":
Przykład
<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>
Spróbuj sam " Pills
Pigułki są tworzone z <ul class="nav nav-pills"> . Również zaznaczyć aktualną stronę z <li class="active"> :
Przykład
<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> Spróbuj sam " Pionowe Pills
Pills mogą być również wyświetlane pionowo. Wystarczy dodać .nav-stacked klasę:
Przykład
<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>
Spróbuj sam " Pionowe Pills w wierszu
Tekst...
Tekst...
Tekst...
Poniższy przykład umieszcza pionowego menu pigułka wewnątrz ostatniej kolumnie. Tak więc, na dużym ekranie menu zostanie wyświetlona po prawej stronie. Ale na małym ekranie, zawartość będzie automatycznie dostosowuje się do układu jednej kolumny:
Przykład
<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> Spróbuj sam " Pills Z menu rozwijanym
Pills mogą również posiadać rozwijanych menu.
Poniższy przykład dodaje rozwijane menu "Menu 1":
Przykład
<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>
Spróbuj sam " Centered Tabs and Pills
Do centrum / uzasadnić kart i pills , użyj .nav-justified klasę.
Zauważ, że na ekranach, które są mniejsze niż 768px, elementy listy są ułożone (zawartość pozostanie na środku):
Przykład
<!-- 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>
Spróbuj sam " Toggleable / Dynamiczne Tabs
DOM
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aby dokonać toggleable kartami, dodaj data-toggle="tab" atrybut każdego łącza. Następnie dodać .tab-pane klasy z unikalnym identyfikatorem każdej karcie i owinąć je wewnątrz <div> elementu z klasą .tab-content .
Jeśli chcesz wypustki zanikać i obecnie po kliknięciu na nich, dodać .fade klasę .tab-pane :
Przykład
<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>
Spróbuj sam " Toggleable / Dynamiczne Pills
To samo odnosi się do kodu pills ; tylko zmienić atrybut danych przełącz do data-toggle="pill" :
Przykład
<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>
Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»
Wypełnij Bootstrap nawigacji Reference
Pełną odniesienia wszystkich klas nawigacji, przejdź do naszej pełnej Bootstrap Nawigacji Reference .
Pełną odniesienia wszystkich zakładkę Opcje, metod i zdarzeń, przejdź do naszej Bootstrap JS Tab Reference .