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 mga klase sa modifier.

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>

Mga lumbay nga 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 lang 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 klaro 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 makadesisyon 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 nga lamesa 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 molihok nga normal ug dili mag-scroll nga pinahigda.

#	Ulohan	Ulohan	Ulohan	Ulohan	Ulohan
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Ulohan	Ulohan	Ulohan	Ulohan	Ulohan
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Ulohan	Ulohan	Ulohan	Ulohan	Ulohan
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Ulohan	Ulohan	Ulohan	Ulohan	Ulohan
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

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