HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Stoły Bootstrap

❮ Poprzedni Następny ❯

Podstawowy stół Bootstrap

Podstawowy stół Bootstrap ma lekką wyściółkę i tylko poziome przegrody.

Klasa .tabledodaje podstawową stylizację do tabeli:

Przykład

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Pasiaste rzędy

Klasa .table-stripeddodaje do tabeli paski zebry:

Przykład

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Stół z obramowaniem

Klasa .table-bordereddodaje obramowania ze wszystkich stron tabeli i komórek:

Przykład

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Wskaż wiersze

Klasa .table-hoverdodaje efekt najechania (szare tło) w wierszach tabeli:

Przykład

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Skondensowana tabela

Klasa .table-condensedsprawia, że ​​stół jest bardziej zwarty, przecinając wypełnienie komórek o połowę:

Przykład

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Klasy kontekstowe

Klasy kontekstowe mogą służyć do kolorowania wierszy tabeli ( <tr>) lub komórek tabeli ( <td>):

Przykład

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Klasy kontekstowe, których można użyć to:

Klasa Opis
.active Stosuje kolor najechania na wiersz tabeli lub komórkę tabeli
.success Wskazuje na udane lub pozytywne działanie
.info Wskazuje neutralną zmianę informacyjną lub działanie
.warning Wskazuje ostrzeżenie, które może wymagać uwagi
.danger Wskazuje na niebezpieczne lub potencjalnie negatywne działanie

Responsywne tabele

Klasa .table-responsivetworzy responsywną tabelę. Tabela będzie następnie przewijana w poziomie na małych urządzeniach (poniżej 768px). Podczas oglądania na dowolnych obrazach o szerokości większej niż 768px nie ma różnicy:

Przykład

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Dodaj atrybut class, aby stylizować tabelę jako podstawową tabelę Bootstrap.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Kompletny opis tabeli Bootstrap

Aby uzyskać pełne informacje o wszystkich klasach stołów, przejdź do naszego kompletnego podręcznika Bootstrap Tables Reference .


❮ Poprzedni Następny ❯