Taby – tworzenie
Czasami chciałbyś dodać treść na stronie i zmieniać jej treść bez przeładowania strony? Do tego służą taby – zakładki, dzięki którym w prosty sposób będziesz mógł dotrzeć z materiałem do czytelnika.
Framework Bootstrap umożliwia dodanie tabów. Wystarczy, że dodasz nieuporządkowaną listę ul wraz z odpowiednimi atrybutami do elementów a, które są zagnieżdzone w elementach listy (po jednym do każdego li).
Kolejno należy ustawić odpowiednie ścieżki odnośników do identyfikatorów tabów. Treść w zakładce tworzona jest poprzez elementy div z klasami pomocniczymi określonymi przez Bootstrap.
Przykładowym zastosowaniem tabów jest opis umiejętności czy najważniejszych informacji o autorze strony.
Poniżej spójrz na przykład z zastosowaniem tabów:
Wizualny Fade
W powyższym przykładzie zobaczyliście jak dodać taby na stronę internetową. Teraz zrobimy tak, aby treść zmieniała się “ładniej”.
Aby tak się stało, należy do elementów z klasą tab-pane dodać nową klasę pomocniczą fade. Tym sposobem tekst płynnie się zmienia. Należy pamiętać, że do pierwszego elementu z klasą tab-pane oprócz wymienionej klasy należy dodać jeszcze klasę in, która pokaże początkowy tekst.
Poniżej zobaczysz przykład taki sam jak ostatnio – tylko z jedną różnicą (wizualną). Efekt “fade” to tylko upiększenie strony – żadnych funkcjonalnych zmian ona nie wprowadza.
A więc jak – taby nie takie trudne? Ciekawy i przydatny sposób prezentowania dynamicznego tekstu. Każda strona z tzn. “pomysłem” może zawierać elementy tab.
W kolejną środę zobaczysz jak dodać na stronę internetową tzw. tooltipy (pomocnicze teksty na stronie).
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA