Source

Tablo

Dokimantasyon ak egzanp pou patisipe nan manier tab yo (bay itilizasyon yo répandus nan grefon JavaScript) ak Bootstrap.

Egzanp yo

Akòz itilizasyon tab yo toupatou nan widgets twazyèm pati yo tankou kalandriye ak chwazi dat, nou te fèt tab nou yo pou yo patisipe . Jis ajoute klas debaz la .tablenan nenpòt ki <table>, Lè sa a, pwolonje ak estil koutim oswa divès klas modifikatè enkli nou yo.

Sèvi ak makè tab ki pi fondamantal la, men ki jan .tabletab ki baze sou yo gade nan Bootstrap. Tout estil tab yo eritye nan Bootstrap 4 , sa vle di nenpòt tab enbrike yo pral style nan menm fason ak paran an.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Ou kapab tou envèse koulè yo—ak tèks limyè sou orijin nwa—ak .table-dark.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Opsyon tèt tab la

Menm jan ak tab ak tab nwa, sèvi ak klas modifye yo .thead-lightoswa .thead-darkpou fè <thead>s parèt limyè oswa gri fonse.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Ranje trase

Sèvi ak .table-stripedpou ajoute zebra-striping nan nenpòt ranje tab nan <tbody>.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Borded tab

Ajoute .table-borderedpou fwontyè sou tout kote tab la ak selil yo.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Ranje hoverable

Ajoute .table-hoverpou pèmèt yon eta hover sou ranje tab nan yon <tbody>.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Ti tab

Ajoute .table-smpou fè tab yo plis kontra enfòmèl ant pa koupe selil padding an mwatye.

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@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>

Klas kontèks

Sèvi ak klas kontèks pou koulè ranje tab oswa selil endividyèl yo.

Klas	Tit	Tit
Aktif	Selil	Selil
Default	Selil	Selil
Prensipal	Selil	Selil
Segondè	Selil	Selil
Siksè	Selil	Selil
Danje	Selil	Selil
Avètisman	Selil	Selil
Info	Selil	Selil
Limyè	Selil	Selil
Fè nwa	Selil	Selil

<!-- 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>

Variant background tab regilye yo pa disponib ak tab nwa a, sepandan, ou ka itilize tèks oswa sèvis piblik background pou reyalize estil menm jan an.

#	Tit	Tit
1	Selil	Selil
2	Selil	Selil
3	Selil	Selil
4	Selil	Selil
5	Selil	Selil
6	Selil	Selil
7	Selil	Selil
8	Selil	Selil
9	Selil	Selil

<!-- 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>

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Kreye tab ki reponn lè w vlope nenpòt ki .tableak .table-responsive{-sm|-md|-lg|-xl}, fè tab la woule orizontal nan chak max-widthpwen rupture jiska (men pa enkli) 576px, 768px, 992px, ak 1120px, respektivman.

Remake byen ke piske navigatè yo pa sipòte kounye a rechèch kontèks ranje , nou travay sou limit yo min-ak max-prefiks ak fenèt yo ak lajè fraksyon (ki ka rive nan sèten kondisyon sou aparèy ki wo-dpi, pou egzanp) lè nou itilize valè ak pi gwo presizyon pou konparezon sa yo. .

Titre

Yon <caption>fonksyon tankou yon tit pou yon tab. Li ede itilizatè ki gen lektè ekran yo jwenn yon tablo epi konprann ki sa li sou epi deside si yo vle li li.

Lis itilizatè yo
#	Premye	Denye	Manch
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Tab reponn

Tablo ki reponn yo pèmèt tab yo woule orizontal avèk fasilite. Fè nenpòt tab reponn nan tout fenèt yo lè w vlope yon .tableak .table-responsive. Oswa, chwazi yon pwen maksimòm ak ki gen yon tab reponn jiska lè l sèvi avèk .table-responsive{-sm|-md|-lg|-xl}.

Koupe vètikal/tronke

Tablo ki reponn yo sèvi ak overflow-y: hidden, ki koupe nenpòt kontni ki ale pi lwen pase kwen anba oswa anwo tab la. An patikilye, sa a ka koupe meni dropdown ak lòt widgets twazyèm pati.

Toujou reponn

Nan tout pwen breakpoint, itilize .table-responsivepou tab defile orizontal.

#	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil	Selil

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

Breakpoint espesifik

Sèvi ak .table-responsive{-sm|-md|-lg|-xl}jan sa nesesè pou kreye tab ki reponn jiska yon pwen an patikilye. Soti nan pwen sa a ak moute, tab la pral konpòte nòmalman epi yo pa woule orizontal.

#	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil

#	Tit	Tit	Tit	Tit	Tit
1	Selil	Selil	Selil	Selil	Selil
2	Selil	Selil	Selil	Selil	Selil
3	Selil	Selil	Selil	Selil	Selil

<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>