Tworzenie tabeli
Przedstawienie niektórych danych wymaga użycia tabeli. Z pozoru łatwy komponent, ale potrafią niektórym narobić problemów z racji specyficznych zasad obsługi w CSS. Nie bez powodu omawiam tabele w tym rozdziale. Bootstrap jest w stanie nam pomóc ze swoimi rozwiązaniami dotyczącymi tabel. W materiale wcześniejszym, dotyczącym podstaw html, omawiałem strukturę oraz budowę tabel. W obecnym materiale zobaczycie możliwości klas pomocniczych Bootstrapa. Klasatable-striped nazywamy pomocniczą. Sprawia że co drugi wiersz kolumny będzie miał inny kolor. Spójrz na efekt w poniższym przykładzie: Efekt hover i obramowanie
Mamy za sobą stworzenie struktury tabeli i dodanie do niej klasy pomocniczej Bootstrapa. Teraz zajmiemy się stylowaniem tego elementu.
Aby tabela miała obramowanie, należy dodać kolejną klasę pomocniczą – table-bordered. Dzięki niej w łatwy sposób wyróżnisz tabelę i oddzielisz kolumny od siebie.
Mając plany stworzenia dużej tabeli, warto użyć dodatkowej klasy table-hover. Po jej dodaniu do elementu tabeli, to po najechaniu na poszczególny wiersz podświetli go, co poprawi przejrzystość danych.
Oczywiście wszystkie szczegóły znajdziecie w oficjalnej dokumentacji Bootstrapa.
Dodajmy do naszego poprzedniego przykładu kilka przykładowych danych. Następnie użyjmy nowo poznanych klas pomocniczych:
Kolorowe wiersze i komórki
Zobaczcie jak wyróżniać dane w wierszach i komórkach tabeli. Bootstrap oferuję zmianę kolorów dla tych elementów, co pomoże wyróżnić niektóre istotne informację.
Podobnie jak w przypadku przycisków, wystarczy odpowiednio użyć klasy pomocniczej do odpowiednich elementów – tr bądź td.
Chciałbyś np. wyróżnić ujemną wartość? Do tego należy użyć klasy warning. Natomiast, jeżeli chcesz o czymś poinformować, pomocna będzie klasa info.
Spójrz na poniższy przykład. Użyłem w nim trzy nowe klasy pomocnicze: active, warning, success:
Tabela responsywna
Podczas przeglądania strony internetowej na mniejszych rozdzielczościach tabela może nieestetycznie wyglądać, będzie mocno ścięta, a niekiedy nawet będzie rozpychać stronę po za okno przeglądarki. Na szczęście lekiem na taką dolegliwość jest Bootstrap. Framework oferuje responsywną tabele.
Aby uzyskać responsywną tabele, należy dodać element div z klasą table-responsive, wewnątrz którego umieszczamy naszą tabelę.
Powyższe zmiany widać jedynie przy rozdzielczości poniżej 768px.
Tak jak ostatnio, polecam poczytać więcej o responsywności tabeli na oficjalnej stronie dokumentacji Bootstrapa.
Powyższy materiał powinien rozwiać większość wątpliwości odnośnie tabel w Bootstrapie. Podstawowe klasy pomocnicze starałem się przedstawić w jak najbardziej przejrzysty sposób.
W kolejnym materiale skupie się na tworzeniu formularza za pomocą Bootstrapa.
Dzięki za obecność i naukę razem ze mną. Kolejny materiał jak zawsze w kolejną środę!
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