autor: Robert
Jak wiemy tabele znajdują swoje zastosowanie bardzo często. Bootstrap posiada kilka klas które umożliwiają ich dostosowywanie a także zapewniają estetyczny wygląd.
Tabele tworzymy poprzez HTMLowy znacznik <table>...</table>
ale wystarczy dodać do niego klasę .table
by uzyskać w niej dopełnienie oraz poziome linie oddzielające poszczególne wiersze.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
Do klasy .table
możemy dołączyć kilka opcjonalnych klas zmieniających sposób wyświetlania tabeli.
Klasa .table-striped
powoduje dodanie ciemniejszego tła do co drugiego wiersza tabeli.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
Klasa .table-bordered
automatycznie dodaje obramowanie tabeli.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
Klasa .table-hover
powoduje podświetlenie wiersza nad którym znajdzie się kursor myszy.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
Klasa .table-condensed
zmniejsza dopełnienie wewnątrz tabeli.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
Dzięki zastosowaniu klas .active
.success
.danger
.warning
oraz .info
możliwe jest nadawanie kolorów poszczególnym wierszom w tabeli.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
2 | Szymon | Winiewski |
2 | John | Doe |
Oczywiście możliwe jest stosowanie wielu klas dla tabeli by dostosować jej wygląd do naszych oczekiwań.
# | Imię | Nazwisko |
---|---|---|
1 | Jan | Kowalski |
2 | Jakub | Nowak |
2 | Szymon | Winiewski |
2 | John | Doe |
Jak zauważycie przy tworzeniu tabeli, jeśli jest ona szersza od diva w którym się zawiera zaczyna ona wychodzić poza kontener co jest nieestetyczne.
Aby temu zapobiedz musimy tabelę otoczyć divem z klasą .table-responsive
. Dzięki temu tabela zamknie się w kontenerze z poziomym paskiem przewijania nie psując nam wyglądu strony.
Tabele mają do to siebie, że na smartfonach jest z nimi problem. Bootstrap poprzez dodanie klasy .table-responsive
powoduje zamknięcie jej w divie z przewijaniem w poziomie co na komórkach faktycznie jest nieintuicyjne. Pod hasłem „responsive tables” można znaleźć wiele sposobów rozwiązania tego problemu. Ja sam korzystam z FooTable -> http://fooplugins.com/footable-demos/ i mogę polecić ten plugin:)
Przecież Bootstrap jest zbiorem reguł CSS a ten kurs o nim opowiada:) Zachęcam do zapoznania się z postem -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/
OdpowiedzJest taki pseudoselektor css jak .nth-child()
, który pozwala wybrać dowolnego potomka, potomków parzystych czy nieparzystych itp. Przykład masz tutaj: http://www.w3schools.com/cssref/sel_nth-child.asp