Bootstrap Tabs i pigułki
Menu
Większość stron internetowych posiada swego rodzaju menu.
W HTML menu jest często definiowane na nieuporządkowanej liście <ul>(i później stylizowane), tak jak to:
<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ć poziome menu z powyższej listy, dodaj
.list-inlineklasę do <ul>:
<ul class="list-inline">
Możesz też wyświetlić powyższe menu z zakładkami i pigułkami Bootstraps (patrz poniżej).
Uwaga: Zobacz ostatni przykład na tej stronie, aby dowiedzieć się, jak włączyć/dynamicznie przełączać karty i pigułki.
Karty
Zakładki są tworzone za pomocą <ul class="nav nav-tabs">:
Wskazówka: oznacz także bieżącą stronę za pomocą <li class="active">.
Poniższy przykład tworzy zakładki nawigacyjne:
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>
Karty z menu rozwijanym
Karty mogą również zawierać menu rozwijane.
Poniższy przykład dodaje menu rozwijane do „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>
Pigułki
Pigułki są tworzone za pomocą <ul class="nav nav-pills">. Oznacz także bieżącą stronę za pomocą
<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>
Pigułki pionowe
Pigułki można również wyświetlać w pionie. Wystarczy dodać .nav-stackedklasę:
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>
Pionowe pigułki z rzędu
Tekst...
Tekst...
Tekst...
Poniższy przykład umieszcza pionowe menu pigułki w ostatniej kolumnie. Tak więc na dużym ekranie menu będzie wyświetlane po prawej stronie. Ale na małym ekranie treść automatycznie dostosuje się do układu jednokolumnowego:
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>
Pigułki z rozwijanym menu
Pigułki mogą również zawierać rozwijane menu.
Poniższy przykład dodaje menu rozwijane do „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>
Wyśrodkowane karty i pigułki
Aby wyśrodkować/wyjustować tabulatory i pigułki, użyj .nav-justifiedklasy.
Zwróć uwagę, że na ekranach mniejszych niż 768 pikseli elementy listy są ułożone w stos (zawartość pozostanie wyśrodkowana):
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>
Przełączalne/dynamiczne karty
DOM
Ból sam w sobie jest ważny, ale ból jest wzmacniany przez proces adipisacyjny, ale daję mu czas na jego zmniejszenie, aby wykonać świetną pracę i ból.
Aby umożliwić przełączanie kart, dodaj data-toggle="tab"atrybut do każdego łącza. Następnie dodaj .tab-paneklasę z unikalnym identyfikatorem dla każdej zakładki i zapakuj ją w
<div>element z klasą .tab-content.
Jeśli chcesz, aby karty pojawiały się i znikały po ich kliknięciu, dodaj
.fadeklasę do .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>
Przełączalne/dynamiczne pigułki
Ten sam kod dotyczy pigułek; zmień tylko atrybut data-toggle na 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>
Kompletna instrukcja nawigacji Bootstrap
Aby uzyskać pełne informacje o wszystkich klasach nawigacji, przejdź do naszego pełnego podręcznika Bootstrap Navigation Reference .
Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach zakładek, przejdź do naszego podręcznika Bootstrap JS Tab Reference .