Tabele w Bootstrap

tabele w Bootstrap

Kategoria wpisu Bootstrap 3, Kurs Bootstrap, Table Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Mimo iż za często się ich nie stosuje (a przynajmniej nie powinno się) w bootstrapie zdefiniowane zostały tabele.

Działają one tak jak normalne tabele z tym, że posiadają one już domyślne ustawienia np:

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Bootstrap przewiduje dla swoich tabel kilka opcji wyglądu takich jak:

Tabela z co drugim wierszem pokolorowanym

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Dodajemy do tabeli klasę

Tabela z obramowaniem

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Tabela z podświetlonym wierszem, na którym aktualnie znajduje się kursor

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Tabela pokolorowana na różne kolory:

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content

Responsywna wersja tabeli:

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell

Powyższe tabele to tylko przykłady – to jak będzie ona wyglądać ostatecznie zależy od twórcy.

http://getbootstrap.com/css/#tables

Dodatkowe tagi:
tabelki Twitter Bootstrap
budowa tabel
bootstrap tabela
table in bootstrap
responsywne tabele
RWD, dopasowujące do szerokości strony
tabela na urządzenie przenośne

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *