Jedną z ciekawszych funkcji bootstrap są zakładki (angielskie tabs lub pills). Jest to funkcjonalność dość powszechnie stosowana na strona internetowych.
Dużą jej zaletą jest pokazywanie innej treści w zależności od aktywnej „karty” przy czym adres strony pozostaje ten sam, lub zawiera „#”+nazwa „karty”.
Jak działają Tabs i Pills
Nazwa zakładki wzięła się prawdopodobnie z podobieństwa do książki gdzie można używać zakładki do zaznaczenia określonej strony. Niestety w moim szablonie bootstrap nie działa prawidłowo dlatego gotowe demo znajduje się w osobnym pliku.
Różnice między tabs i pills w bootstrap jest widoczna na pierwszy rzut oka
Przykładowe Tabs
<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>
Przykładowe Pills
<ul style="margin: 19px 0px 15px;" class="test2 nav nav-pills">
<li class="active"><a data-toggle="pill" href="#">Home</a></li>
<li><a data-toggle="pill" href="#">Menu 1</a></li>
<li><a data-toggle="pill" href="#">Menu 2</a></li>
<li><a data-toggle="pill" href="#">Menu 3</a></li>
</ul>
Powyższe przykłady nie stanowią działającego skryptu a jedynie wstęp, podstawę do uzyskania określonego sposobu działania.
Jak wspomniałam zakładki często występują na stronach internetowych. Jeśli chodzi o ich funkcje to już zależy od inwencji autora strony np.:
<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>
To jednak również nie działa. W celu uruchomienia skryptu należy jeszcze dopisać pola z tekstem np.
DEMO
Kod z pliku:
<div class="container"> <h3>Vertical Pills - DEMO</h3> <div class="row"> <div class="tab-content col-md-8"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <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> <li><a data-toggle="pill" href="#menu3">Menu 3</a></li> </ul> </div> <div class="clearfix visible-lg"></div> </div> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#homes">Home</a></li> <li><a data-toggle="tab" href="#menus1">Menu 1</a></li> <li><a data-toggle="tab" href="#menus2">Menu 2</a></li> <li><a data-toggle="tab" href="#menus3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="homes" class="tab-pane fade in active"> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menus1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menus2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menus3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div>
By skrypt działał prawidłowo należy na stronie umieścić odnośnik do skryptów. Muszą się one znajdować pomiędzy znacznikami head head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.