Bootstrap tutorial logo

Zakładki / Nav tabs

autor: Robert

30 lipca 2014

W tym wpisie pokażę jak stworzyć „zakładki/karty” czyli element w którym widzimy jeden tekst/obrazek/cokolwiek i możemy przełączać się pomiędzy innymi bez przeładowywania strony. Najlepiej pokaże to przykład.

Podstawowy przykład

Zawartość pierwszej zakładki
Zawartość drugiej zakładki
Zawartość trzeciej zakładki
Zawartość czwartej zakładki

Zakładki składają się z dwóch elementów, pierwszym z nich jest generowanie widoku kart a drugim ich zawartość

Zaczynamy od stworzenia listy <ul class="nav nav-tabs" role="tablist">. Wewnątrz umieszczamy kolejne „widoki” kart <li><a href="#2zakladka" role="tab" data-toggle="tab">2 zakładka</a></li>. Aby któraś karta była widoczna zaraz po wczytaniu strony, należy do elementu listy dodać klasę .active. Element <a href="#zakladka"> jest adresem do diva z zawartością. Na koniec zamykamy listę

Kolejnym zadaniem jest stworzenie divów z zawartością dla naszych kart. Zaczynamy od otwarcia diva z klasą .tab-content, który będzie kontenerem. Wewnątrz tworzymy divy z klasą .tab-pane w ilości odpowiadającej ilości kart. Div ten musi zawierać również identyfikator odpowiadający adresowi karty. Jeśli stworzyliście kartę z <a href="1zakladka"> to div z jej zawartością musi mieć identyfikator id="1zakladka". Tutaj również by element był widoczny po załadowaniu strony nadajemy klasę .active

Pills Czyli karty w kształcie przycisków

Jeśli ktoś preferuje inny sposób wyświetlania kart, istnieje predefiniowany styl, dzięki któremu wyglądają one jak przyciski. Jedyna różnica w kodzie polega na zamianie klasy listy .nav-tabs na .nav-pills.

Zawartość pierwszego przycisku
Zawartość drugiego przycisku
Zawartość trzeciego przycisku
Zawartość czwartego przycisku

Przyciski ułożone w pionie

Istnieje możliwość ułożenia przycisków „jeden pod drugim”. W takim przypadku do listy, prócz klasy .nav-pills dopisujemy .nav-stacked. Kolejną rzeczą do zrobienia jest dodanie szerokości elementowi odpowiadającemu za wyświetlanie kart czyli przykładowo <ul class="nav nav-pills nav-stacked col-md-2" role="tablist">, na koniec trzeba podać szerokość elementu z zawartością kart czyli przykładowo: <div class="tab-content col-md-10">

Zawartość pierwszego przycisku
Zawartość drugiego przycisku
Zawartość trzeciego przycisku
Zawartość czwartego przycisku

Wyjustowane karty

Gdy chcemy by nasze karty „rozciągnęły” się na całą szerokość diva w którym są zawarte, do listy odpowiadającej za wyświetlanie kart dodajemy klasę .nav-justified

Zawartość pierwszej karty
Zawartość drugiej karty
Zawartość trzeciej karty
Zawartość czwartej karty

Zawartość pierwszego przycisku
Zawartość drugiego przycisku
Zawartość trzeciego przycisku
Zawartość czwartego przycisku

Blokowanie karty

Gdy chcemy aby nie było możliwości kliknięcia w którąś kartę to w elemencie listy odpowiadającej za wyświetlanie zakładek dodajemy klasę .disabled

Zawartość pierwszego przycisku
Zawartość drugiego przycisku
Zawartość trzeciego przycisku
Zawartość czwartego przycisku

Karty z rozwijaną listą

Prócz standardowych kart możemy zrobić również takie, które posiadają rozwijaną listę. Przydaje się to przykładowo wtedy gry mamy dość dużo zakładek i przestają się one mieścić w kontenerze.

Cała filozofia w tym przypadku polega na stworzeniu jednej karty, która jest listą rozwijaną czyli nadać jej klasę .dropdown a następnie wypełnić jak w tym poście

Zawartość pierwszej zakładki

Zawartość drugiej zakładki

Zawartość trzeciej zakładki

Zawartość pierwszej opcji z rozwijanej zakładki

Zawartość drugiej opcji z rozwijanej zakładki

No i stronka z przykładem:

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (3 głosów, średnia: 5,00 na 5)
Loading...

Natalia 4 grudnia 2014 o 11:16

Witam. Czy istnieje możliwość zmiany koloru pills z niebieskiego na jakiś inny? Albo czy można ustawić inny kolor dla każdej zakładki?

Odpowiedz
    Robert 4 grudnia 2014 o 11:56

    możesz zmienić kolor wszystkich pill za pomocą CSS: .nav-pills > .active > a, .nav-pills > .active > a:hover { background-color: red !important; }
    Albo dopisać klasę np red i za pomocą CSS zmienić kolor pojedynczego pills: .red, .red .active a, .red .active a:hover { background-color: red !important; }

    Odpowiedz
Przemek 17 maja 2015 o 19:17

Witam
Probowalem tego kodu ale nic nie dziala. Z pewnoscia potrzebny jest jeszcze CSS.

Odpowiedz