bootstrap tutorials kurs

Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery

Czas czytania: 2 minut

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”.

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


Przykładowe Pills


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:


To jednak również nie działa. W celu uruchomienia skryptu należy jeszcze dopisać pola z tekstem np.
DEMO

Vertical Pills

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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: