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

• 1 zakładka
• 2 zakładka
• 3 zakładka
• 4 zakładka

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.

• 1 przycisk
• 2 przycisk
• 3 przycisk
• 4 przycisk

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

• 1 karta
• 2 karta
• 3 karta
• 4 karta

• 1 przycisk
• 2 przycisk
• 3 przycisk
• 4 przycisk

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

• 1 przycisk
• 2 przycisk
• 3 przycisk
• 4 przycisk

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

• 1 zakładka
• 2 zakładka
• 3 zakładka
• Rozwijana zakladka
  • 1 opcja
  • 2 opcja

No i stronka z przykładem:

Strona z przykładami

---

Post się przydał? Oceń go proszę.

(4 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Responsywny iframe oraz embed
Nowszy post →
Klasy pomocnicze / Helper classes

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

Robert 18 maja 2015 o 14:03

A czy zaimportowałeś wszystkie pliki Bootstrapa? -> http://kursbootstrap.pl/wprowadzenie-do-bootstrap/

Odpowiedz

Przemek 28 maja 2015 o 19:21

Witam. Dzieki za szybka odpowiedz. Niestety w Bootstrap zawiera js.
Nie masz moze czegos podobnego ale w HTML+CSS?
Z gory dziekuje

Odpowiedz

Robert 29 maja 2015 o 08:16

http://codepen.io/wallaceerick/pen/ojtal

Odpowiedz