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
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.
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">
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
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
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:
Post się przydał? Oceń go proszę.
(3 głosów, średnia: 5,00 na 5)
Loading...Komentarze: 6 komentarzy
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; }
Robert 18 maja 2015 o 14:03
A czy zaimportowałeś wszystkie pliki Bootstrapa? -> http://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Odpowiedz