Source

Mga mesa

Dokumentasyon at mga halimbawa para sa pag-opt-in na pag-istilo ng mga talahanayan (ibinigay ang kanilang laganap na paggamit sa mga plugin ng JavaScript) gamit ang Bootstrap.

Mga halimbawa

Dahil sa malawakang paggamit ng mga talahanayan sa mga third-party na widget tulad ng mga kalendaryo at tagapili ng petsa, idinisenyo namin ang aming mga talahanayan upang maging opt-in . Idagdag lang ang base class .tablesa alinmang <table>, pagkatapos ay i-extend gamit ang mga custom na istilo o ang aming iba't ibang kasamang modifier classes.

Gamit ang pinakapangunahing markup ng talahanayan, narito ang .tablehitsura ng mga nakabatay sa talahanayan sa Bootstrap. Ang lahat ng estilo ng talahanayan ay minana sa Bootstrap 4 , ibig sabihin, ang anumang nested na talahanayan ay iistilo sa parehong paraan tulad ng magulang.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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>

Maaari mo ring baligtarin ang mga kulay—na may maliwanag na teksto sa madilim na background—na may .table-dark.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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 pagpipilian sa ulo ng mesa

Katulad ng mga talahanayan at madilim na talahanayan, gamitin ang mga klase ng modifier .thead-lighto .thead-darkupang gawing <thead>maliwanag o madilim na kulay abo ang mga s.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @twitter
# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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 na hilera

Gamitin .table-stripedupang magdagdag ng zebra-striping sa anumang hilera ng talahanayan sa loob ng <tbody>.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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 Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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 table

Idagdag .table-borderedpara sa mga hangganan sa lahat ng panig ng talahanayan at mga cell.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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 Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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>

Mesa na walang hangganan

Magdagdag .table-borderlesspara sa isang talahanayan na walang mga hangganan.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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-borderlessmaaari ding gamitin sa madilim na mesa.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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>

Hoverable na mga hilera

Idagdag .table-hoverupang paganahin ang isang hover state sa mga hilera ng talahanayan sa loob ng isang <tbody>.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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 Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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>

Maliit na mesa

Idagdag .table-smupang gawing mas compact ang mga talahanayan sa pamamagitan ng pagputol ng cell padding sa kalahati.

# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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 Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @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

Gumamit ng mga klase sa konteksto upang kulayan ang mga hilera ng talahanayan o indibidwal na mga cell.

Klase Heading Heading
Aktibo Cell Cell
Default Cell Cell
Pangunahin Cell Cell
Pangalawa Cell Cell
Tagumpay Cell Cell
Panganib Cell Cell
Babala Cell Cell
Impormasyon Cell Cell
Liwanag Cell Cell
Madilim 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 mga regular na variant ng background ng talahanayan ay hindi magagamit sa madilim na talahanayan, gayunpaman, maaari kang gumamit ng mga kagamitan sa teksto o background upang makamit ang mga katulad na istilo.

# Heading Heading
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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.

Lumikha ng mga tumutugong talahanayan sa pamamagitan ng pagbabalot ng anuman .tablesa .table-responsive{-sm|-md|-lg|-xl}, na ginagawang pahalang ang pag-scroll ng talahanayan sa bawat max-widthbreakpoint na hanggang (ngunit hindi kasama) 576px, 768px, 992px, at 1120px, ayon sa pagkakabanggit.

Tandaan na dahil kasalukuyang hindi sinusuportahan ng mga browser ang mga query sa konteksto ng saklaw , ginagawa namin ang mga limitasyon ng min-at mga max-prefix at viewport na may mga fractional na lapad (na maaaring mangyari sa ilalim ng ilang partikular na kundisyon sa mga high-dpi na device, halimbawa) sa pamamagitan ng paggamit ng mga value na may mas mataas na katumpakan para sa mga paghahambing na ito .

Mga caption

Ang isang <caption>function ay tulad ng isang heading para sa isang table. Nakakatulong ito sa mga user na may mga screen reader na makahanap ng talahanayan at maunawaan kung tungkol saan ito at magpasya kung gusto nila itong basahin.

Listahan ng mga gumagamit
# Una Huling Hawakan
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @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>

Mga tumutugon na talahanayan

Ang mga tumutugon na talahanayan ay nagbibigay-daan sa mga talahanayan na mai-scroll nang pahalang nang madali. Gawing tumutugon ang anumang talahanayan sa lahat ng viewport sa pamamagitan ng pagbabalot ng isang .tablemay .table-responsive. O kaya, pumili ng maximum na breakpoint kung saan magkakaroon ng tumutugon na talahanayan hanggang sa sa pamamagitan ng paggamit ng .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Gumagamit ang mga tumutugong talahanayan ng overflow-y: hidden, na kumukuha ng anumang nilalaman na lampas sa ibaba o itaas na mga gilid ng talahanayan. Sa partikular, maaari nitong i-clip off ang mga dropdown na menu at iba pang mga widget ng third-party.

Laging tumutugon

Sa bawat breakpoint, gamitin .table-responsivepara sa pahalang na pag-scroll ng mga talahanayan.

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

Tukoy sa breakpoint

Gamitin .table-responsive{-sm|-md|-lg|-xl}kung kinakailangan upang lumikha ng mga tumutugon na talahanayan hanggang sa isang partikular na breakpoint. Mula sa breakpoint na iyon at pataas, ang talahanayan ay kumikilos nang normal at hindi mag-scroll nang pahalang.

Maaaring magmukhang sira ang mga talahanayang ito hanggang sa mailapat ang mga istilong tumutugon sa mga partikular na lapad ng viewport.

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