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

Bootstrap tabulky

❮ Předchozí Další ❯

Základní tabulka bootstrapu

Základní Bootstrap stůl má lehké polstrování a pouze horizontální přepážky.

Třída .tablepřidává základní styl do tabulky:

Příklad

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

Pruhované řádky

Třída .table-stripedpřidá pruhy zebry do tabulky:

Příklad

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

Ohraničený stůl

Třída .table-borderedpřidá ohraničení na všechny strany tabulky a buňky:

Příklad

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

Přesuňte řádky

Třída .table-hoverpřidává efekt přechodu (šedá barva pozadí) na řádky tabulky:

Příklad

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

Zhuštěná tabulka

Tato .table-condensedtřída činí stůl kompaktnějším tím, že zkrátí výplň buněk na polovinu:

Příklad

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

Kontextové třídy

Kontextové třídy lze použít k obarvení řádků tabulky ( <tr>) nebo buněk tabulky ( <td>):

Příklad

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]

Kontextové třídy, které lze použít, jsou:

Třída Popis
.active Použije barvu kurzoru na řádek tabulky nebo buňku tabulky
.success Označuje úspěšnou nebo pozitivní akci
.info Označuje neutrální informativní změnu nebo akci
.warning Označuje varování, které může vyžadovat pozornost
.danger Označuje nebezpečnou nebo potenciálně negativní akci

Responzivní tabulky

Třída .table-responsivevytvoří responzivní tabulku. Na malých zařízeních (do 768 pixelů) se pak tabulka bude posouvat vodorovně. Při prohlížení na cokoli větším než 768 pixelů na šířku není žádný rozdíl:

Příklad

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

Otestujte se pomocí cvičení

Cvičení:

Přidáním atributu třídy vytvoříte styl tabulky jako základní tabulky 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>

Kompletní referenční tabulka bootstrap

Úplnou referenci o všech třídách tabulek naleznete v naší úplné Referenční příručce tabulek Bootstrap .


❮ Předchozí Další ❯