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>

Ääristeta laud

Lisa .table-borderlessääristeta tabeli jaoks.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

<table class="table table-borderless">
  <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>

.table-borderlesssaab kasutada ka tumedatel laudadel.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

<table class="table table-borderless 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
Teisene	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 pole tumeda tabeli puhul 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. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Looge automaatselt kohanduvad tabelid, mähkides kõik .tabletähega .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 laiusega eesliidete min-jamax- vaateavade piirangute (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.

Need tabelid võivad tunduda katkised, kuni nende reageerivad stiilid rakenduvad teatud vaateava laiustele.

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

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

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

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

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

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

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

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