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 <table>, Lè sa a, pwolonje ak estil koutim oswa divès kalite klas modifye 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>

Tab san fwontyè

Ajoute .table-borderlesspou yon tab san fwontyè.

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

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

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 yo

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 ye 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 chak pwen, 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 reponn jiska yon pwen an patikilye. Soti nan pwen rupture sa a ak moute, tab la pral konpòte nòmalman epi yo pa woule orizontal.

Tablo sa yo ka parèt kase jiskaske estil reponn yo aplike nan lajè vi yo espesifik.

# Tit Tit Tit Tit Tit Tit Tit Tit
1 Selil Selil Selil Selil Selil Selil Selil Selil
2 Selil Selil Selil Selil Selil Selil Selil Selil
3 Selil Selil Selil Selil Selil Selil Selil Selil 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Tit Tit Tit Tit Tit Tit Tit Tit
1 Selil Selil Selil Selil Selil Selil Selil Selil
2 Selil Selil Selil Selil Selil Selil Selil Selil
3 Selil Selil Selil Selil Selil Selil Selil Selil 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Tit Tit Tit Tit Tit Tit Tit Tit
1 Selil Selil Selil Selil Selil Selil Selil Selil
2 Selil Selil Selil Selil Selil Selil Selil Selil
3 Selil Selil Selil Selil Selil Selil Selil Selil 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Tit Tit Tit Tit Tit Tit Tit Tit
1 Selil Selil Selil Selil Selil Selil Selil Selil
2 Selil Selil Selil Selil Selil Selil Selil Selil
3 Selil Selil Selil Selil Selil Selil Selil Selil 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>