autor: Robert
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.
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
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
.
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">
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
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
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:
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; }
A czy zaimportowałeś wszystkie pliki Bootstrapa? -> http://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Odpowiedz