Source

Mga lamesa

Dokumentasyon ug mga pananglitan alang sa pag-opt-in nga estilo sa mga lamesa (gihatag sa ilang kaylap nga paggamit sa JavaScript plugins) uban sa Bootstrap.

Mga pananglitan

Tungod sa kaylap nga paggamit sa mga lamesa sa mga third-party nga widgets sama sa mga kalendaryo ug mga tigpili sa petsa, among gidesinyo ang among mga lamesa nga mahimong opt-in . Idugang lang ang base nga klase .tablesa bisan unsang <table>, unya i-extend gamit ang custom nga mga estilo o among lain-laing gilakip nga modifier classes.

Gamit ang labing sukaranan nga marka sa lamesa, ania kung giunsa ang .tablepagtan-aw sa mga lamesa nga nakabase sa Bootstrap. Ang tanan nga mga istilo sa lamesa napanunod sa Bootstrap 4 , nagpasabut nga bisan unsang mga nested nga mga lamesa i-istilo sa parehas nga paagi sa ginikanan.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Mahimo usab nimo nga balit-aron ang mga kolor—nga adunay gaan nga teksto sa ngitngit nga background—nga adunay .table-dark.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Mga kapilian sa ulo sa lamesa

Susama sa mga lamesa ug ngitngit nga mga lamesa, gamita ang mga klase sa modifier .thead-lighto .thead-darkaron <thead>makita ang mga s nga kahayag o itom nga gray.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Mga guhit nga laray

Gamita .table-stripedaron idugang ang zebra-striping sa bisan unsang laray sa lamesa sulod sa <tbody>.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Bordered nga lamesa

Idugang .table-borderedang mga utlanan sa tanang kilid sa lamesa ug mga selula.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>

Lamesa nga walay utlanan

Idugang .table-borderlessalang sa usa ka lamesa nga walay mga utlanan.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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-borderlessmahimo usab nga gamiton sa mangitngit nga mga lamesa.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>

Mapalupad nga mga laray

Idugang .table-hoveraron mahimo ang usa ka hover state sa mga laray sa lamesa sulod sa usa ka <tbody>.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>

Gamay nga lamesa

Idugang .table-smaron mahimong mas compact ang mga lamesa pinaagi sa pagputol sa cell padding sa tunga.

# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @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>

Mga klase sa konteksto

Gamita ang mga klase sa konteksto sa pagkolor sa mga laray sa lamesa o indibidwal nga mga selula.

Klase Ulohan Ulohan
Aktibo Cell Cell
Default Cell Cell
Primary Cell Cell
Ikaduha Cell Cell
Kalampusan Cell Cell
Kuyaw Cell Cell
Pasidaan Cell Cell
Impormasyon Cell Cell
Kahayag Cell Cell
Ngitngit Cell Cell 
<!-- 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>

Ang regular nga mga variant sa background sa lamesa dili magamit sa ngitngit nga lamesa, bisan pa, mahimo nimong gamiton ang mga gamit sa teksto o background aron makab-ot ang parehas nga mga istilo.

# Ulohan Ulohan
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- 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>
Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.

Paghimo mga responsive nga mga lamesa pinaagi sa pagputos sa bisan unsa .tablenga adunay .table-responsive{-sm|-md|-lg|-xl}, paghimo sa lamesa nga mag-scroll nga pinahigda sa matag max-widthbreakpoint hangtod sa (apan dili apil) 576px, 768px, 992px, ug 1120px, matag usa.

Timan-i nga tungod kay ang mga browser wala karon nagsuporta sa mga pangutana sa konteksto sa range , nagtrabaho kami sa palibot sa mga limitasyon min-ug mga max-prefix ug viewport nga adunay fractional widths (nga mahimong mahitabo ubos sa pipila ka mga kondisyon sa high-dpi nga mga himan, pananglitan) pinaagi sa paggamit sa mga bili nga mas tukma alang niini nga mga pagtandi. .

Mga kapsyon

Ang usa ka <caption>gimbuhaton sama sa usa ka ulohan alang sa usa ka lamesa. Nakatabang kini sa mga tiggamit nga adunay mga screen reader nga makit-an ang usa ka lamesa ug masabtan kung unsa kini ug magdesisyon kung gusto nila basahon kini.

Listahan sa mga tiggamit
# Una Katapusan Paggunit
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @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>

Responsive nga mga lamesa

Ang mga responsive nga mga lamesa nagtugot sa mga lamesa nga ma-scroll nga pinahigda nga dali. Himoa ang bisan unsang lamesa nga motubag sa tanan nga mga viewport pinaagi sa pagputos sa usa .tableka .table-responsive. O, pagpili og usa ka maximum breakpoint diin adunay usa ka responsive table hangtod sa pinaagi sa paggamit sa .table-responsive{-sm|-md|-lg|-xl}.

Vertikal nga pagputol/pagputol

Ang mga responsive nga mga lamesa naggamit sa overflow-y: hidden, nga nagputol sa bisan unsang sulod nga labaw pa sa ubos o ibabaw nga mga kilid sa lamesa. Sa partikular, mahimo kining putlon ang mga dropdown menu ug uban pang mga widget sa ikatulo nga partido.

Kanunay nga motubag

Sa matag breakpoint, gamita .table-responsivepara sa horizontal scrolling tables.

# Ulohan Ulohan Ulohan Ulohan Ulohan Ulohan Ulohan Ulohan Ulohan
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Espesyal nga breakpoint

Gamita .table-responsive{-sm|-md|-lg|-xl}kung gikinahanglan aron makahimo og mga responsive nga mga lamesa hangtod sa usa ka partikular nga breakpoint. Gikan sa kana nga breakpoint ug pataas, ang lamesa maggawi nga normal ug dili mag-scroll nga pinahigda.

Kini nga mga lamesa mahimong makita nga nabuak hangtod ang ilang mga istilo sa pagtubag magamit sa piho nga gilapdon sa viewport.

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