Source

Tabelid

Dokumentatsioon ja näited tabelite stiili valimiseks (arvestades nende levinud kasutamist JavaScripti pistikprogrammides) Bootstrapiga.

Näited

Tabelite laialdase kasutamise tõttu kolmandate osapoolte vidinates, nagu kalendrid ja kuupäevavalijad, oleme kujundanud oma tabelid nii, et need oleksid lubatud . Lihtsalt lisage põhiklass .tablesuvalisele <table>, seejärel laiendage kohandatud stiilide või meie erinevate kaasatud modifikaatoriklassidega.

Kasutades kõige elementaarsemat tabelimärgistust, .tablenäeme Bootstrapis välja -põhised tabelid. Kõik tabelistiilid on Bootstrap 4-s päritud , mis tähendab, et kõik pesastatud tabelid kujundatakse samamoodi nagu ülem.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Võite ka värve ümber pöörata – heleda tekstiga tumedal taustal – kasutades .table-dark.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Lauapea valikud

Sarnaselt tabelitele ja tumedatele tabelitele kasutage muuteklasse .thead-lightvõi .thead-darkselleks, et muuta <thead>need heledaks või tumehalliks.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Triibulised read

Kasutage .table-stripedsebraribade lisamiseks mis tahes tabelireale <tbody>.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Äärisega tabel

.table-borderedTabeli ja lahtrite kõikide külgede ääriste lisamine .

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hõljutavad read

Lisa .table-hover, et lubada hõljutusoleku tabeliridadel <tbody>.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Väike laud

Lisage .table-sm, et muuta lauad kompaktsemaks, lõigates lahtri polsterduse pooleks.

# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kontekstuaalsed klassid

Kasutage tabeli ridade või üksikute lahtrite värvimiseks kontekstuaalseid klasse.

Klass Pealkiri Pealkiri
Aktiivne Kamber Kamber
Vaikimisi Kamber Kamber
Esmane Kamber Kamber
Sekundaarne Kamber Kamber
Edu Kamber Kamber
Oht Kamber Kamber
Hoiatus Kamber Kamber
Info Kamber Kamber
Valgus Kamber Kamber
Tume Kamber Kamber 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Tavalised tabeli taustavariandid ei ole tumeda tabeliga saadaval, kuid sarnaste stiilide saavutamiseks võite kasutada teksti- või taustautiliite.

# Pealkiri Pealkiri
1 Kamber Kamber
2 Kamber Kamber
3 Kamber Kamber
4 Kamber Kamber
5 Kamber Kamber
6 Kamber Kamber
7 Kamber Kamber
8 Kamber Kamber
9 Kamber Kamber 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. Veenduge, et värviga tähistatud teave oleks sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks .sr-onlyklassiga peidetud lisatekst.

Looge automaatselt kohanduvad tabelid, mähkides mis tahes .tabletähisega .table-responsive{-sm|-md|-lg|-xl}, pannes tabeli horisontaalselt kerima igas katkestuspunktis (kuid mitte kaasa arvatud) vastavalt 576 pikslit, 768 pikslit, 992 pikslit ja 1120 pikslit.max-width

Pange tähele, et kuna brauserid ei toeta praegu vahemiku kontekstipäringuid , töötame ümber murdosa laiuste piirangute, min-eesliidete max-ja vaateavade (mis võivad teatud tingimustel esineda näiteks suure eraldusvõimega seadmetes), kasutades nende võrdluste jaoks suurema täpsusega väärtusi. .

Subtiitrid

Funktsioon <caption>toimib nagu tabeli pealkiri. See aitab ekraanilugejatega kasutajatel tabelit leida ja aru saada, millest see räägib, ning otsustada, kas nad soovivad seda lugeda.

Kasutajate loend
# Esiteks Viimane Käepide
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Vastuvõtlikud tabelid

Tundlikud tabelid võimaldavad tabeleid hõlpsalt horisontaalselt kerida. Muutke mis tahes tabel kõigis vaateavades tundlikuks, mähkides .tabletähega .table-responsive. Või valige maksimaalne katkestuspunkt, millega kohanemisvõimeline tabel saavutada, kasutades .table-responsive{-sm|-md|-lg|-xl}.

Vertikaalne lõikamine/kärpimine

Tundlikud tabelid kasutavad funktsiooni overflow-y: hidden, mis lõikab ära igasuguse sisu, mis ulatub tabeli alumisest või ülemisest servast kaugemale. Eelkõige võib see välja lõigata rippmenüüd ja muud kolmanda osapoole vidinad.

Alati vastutulelik

.table-responsiveKasutage horisontaalselt kerivate tabelite jaoks igal murdepunktil .

# Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri
1 Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber
2 Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber
3 Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber Kamber 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Katkestuspunkti spetsiifiline

Kasutage .table-responsive{-sm|-md|-lg|-xl}vastavalt vajadusele tundlike tabelite loomiseks kuni konkreetse katkestuspunktini. Alates sellest katkestuspunktist ja ülespoole hakkab tabel käituma tavapäraselt ja ei keri horisontaalselt.

# Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri
1 Kamber Kamber Kamber Kamber Kamber
2 Kamber Kamber Kamber Kamber Kamber
3 Kamber Kamber Kamber Kamber Kamber
# Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri
1 Kamber Kamber Kamber Kamber Kamber
2 Kamber Kamber Kamber Kamber Kamber
3 Kamber Kamber Kamber Kamber Kamber
# Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri
1 Kamber Kamber Kamber Kamber Kamber
2 Kamber Kamber Kamber Kamber Kamber
3 Kamber Kamber Kamber Kamber Kamber
# Pealkiri Pealkiri Pealkiri Pealkiri Pealkiri
1 Kamber Kamber Kamber Kamber Kamber
2 Kamber Kamber Kamber Kamber Kamber
3 Kamber Kamber Kamber Kamber Kamber 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

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

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

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