Source

Dagiti Lamisaan

Dokumentasion ken dagiti pagarigan para iti opt-in nga estilo dagiti lamisaan (no maited ti nasaknap a panagusar kadagitoy kadagiti plugin ti JavaScript) babaen ti Bootstrap.

Dagiti pagarigan

Gapu ti nasaknap a panagusar kadagiti lamisaan iti ballasiw dagiti maikatlo a partido a widget a kas dagiti kalendario ken dagiti agpili ti petsa, diniseniomi dagiti lamisaanmi tapno agbalin nga opt-in . Inayon laeng ti batayan a klase .tableiti ania man <table>, kalpasanna palawaen babaen dagiti kostumbre nga estilo wenno dagiti nadumaduma a nairaman a klase ti mangbalbaliwtayo.

Babaen ti panagusar ti kaaduan a batayan a marka ti lamisaan, ditoy no kasano .tableti langa dagiti -based a lamisaan iti Bootstrap. Amin nga estilo ti lamisaan ket natawid iti Bootstrap 4 , a ti kayatna a sawen ket ania man a naisanglad a lamisaan ket ma-estilo iti isu met laeng a wagas a kas ti nagannak.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Mabalinmo met nga ibaliktad dagiti kolor—nga addaan iti nalawag a teksto kadagiti nasipnget a background—babaen ti .table-dark.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Dagiti pagpilian iti ulo ti lamisaan

Kasla dagiti lamisaan ken natayengteng a lamisaan, usaren dagiti klase ti mangbalbaliw .thead-lightwenno .thead-darktapno ti <thead>s ket agparang a nalawag wenno natayengteng nga abuabu.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Dagiti garitgaritan a hilera

Usaren .table-stripeda manginayon ti zebra-striping iti ania man a hilera ti lamisaan iti uneg ti <tbody>.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Nabeddengan ti lamisaan

Inayon .table-borderedpara kadagiti beddeng iti amin a sikigan ti lamisaan ken selula.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti hoverable a hilera

Inayon .table-hovertapno mapalubosan ti estado ti hover kadagiti hilera ti lamisaan iti uneg ti maysa a <tbody>.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Bassit a lamisaan

Inayon .table-smtapno ad-adda a kompakto dagiti lamisaan babaen ti panangputed iti cell padding iti kagudua.

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti klase ti konteksto

Usaren dagiti klase ti konteksto tapno mangkolor kadagiti hilera ti lamisaan wenno dagiti indibidual a selula.

Klase	Paulo	Paulo
Aktibo	Sellula	Sellula
Default	Sellula	Sellula
Kangrunaan	Sellula	Sellula
Sekondaria	Sellula	Sellula
Balligi	Sellula	Sellula
Peggad	Sellula	Sellula
Pakdaar	Sellula	Sellula
Info nga	Sellula	Sellula
Silaw	Sellula	Sellula
Nasipnget	Sellula	Sellula

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

Dagiti regular a variante ti likudan ti lamisaan ket saan a magun-od iti nasipnget a lamisaan, nupay kasta, mabalinmo nga usaren dagiti teksto wenno dagiti utilidad ti likudan tapno makagun-od kadagiti kapada nga estilo.

#	Paulo	Paulo
1 nga	Sellula	Sellula
2. 2	Sellula	Sellula
3.	Sellula	Sellula
4.	Sellula	Sellula
5.	Sellula	Sellula
6.	Sellula	Sellula
7 nga	Sellula	Sellula
8 nga	Sellula	Sellula
9 nga	Sellula	Sellula

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Mangpartuat kadagiti sumungbat a lamisaan babaen ti panangbalkot ti ania man .tablenga addaan iti .table-responsive{-sm|-md|-lg|-xl}, a mangaramid ti lamisaan nga ag-scroll a paidasig iti tunggal maysa max-widtha breakpoint nga aginggana ti (ngem saan a mairaman) 576px, 768px, 992px, ken 1120px, a nagsasaruno.

Imutektekanyo a gapu ta dagiti browser ket saan nga agdama a mangsuporta kadagiti panagsaludsod ti konteksto ti sakop , agtrabahokami iti aglawlaw dagiti limitasion ti min-ken dagiti max-pangrugian ken dagiti viewport nga addaan kadagiti fraksional a kalawa (a mabalin a mapasamak iti sidong dagiti sumagmamano a kasasaad kadagiti nangato-dpi nga alikamen, kas pagarigan) babaen ti panagusar kadagiti pateg nga addaan iti nangatngato a kinaeksakto para kadagitoy a panagidilig .

Dagiti Kapsion

Ti A <caption>ket agtignay a kas ti paulo para iti maysa a lamisaan. Tulonganna dagiti agus-usar nga addaan kadagiti screen reader a mangbirok iti lamisaan ken maawatanda no ania ti maipapan iti dayta ken mangikeddeng no kayatda a basaen dayta.

Listaan dagiti agar-aramat
#	Umuna	Napalabas	Kutingen
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Dagiti sumungsungbat a lamisaan

Dagiti makasungbat a lamisaan ket mangipalubos kadagiti lamisaan a mai-scroll a paidasig a nalaka. Pagbalinen ti ania man a lamisaan a makasungbat iti ballasiw dagiti amin a viewport babaen ti panangbalkot ti maysa .tablenga addaan .table-responsive. Wenno, mangpili ti kangatuan a breakpoint a pakaaddaan iti makasungbat a lamisaan aginggana babaen ti panangusar iti .table-responsive{-sm|-md|-lg|-xl}.

Bertikal a panagputed/pannakaputed

Dagiti makasungbat a lamisaan ket agus-usar ti overflow-y: hidden, a mang-clip off ti ania man a linaon a lumablabas iti baba wenno ngato nga igid ti lamisaan. Nangnangruna, daytoy ket mabalinna nga i-clip off dagiti dropdown a menu ken dagiti dadduma pay a third-party a widget.

Kanayon a makasungbat

Iti ballasiw ti tunggal breakpoint, usaren .table-responsivepara kadagiti horizontal a panag-scroll kadagiti lamisaan.

#	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula	Sellula

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

Breakpoint nga espesipiko

Usaren .table-responsive{-sm|-md|-lg|-xl}no kasapulan tapno mangpartuat kadagiti sumungbat a lamisaan aginggana ti partikular a breakpoint. Manipud iti dayta a breakpoint ken agpangato, normal ti panagtignay ti lamisaan ken saan nga ag-scroll a horizontal.

#	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula

#	Paulo	Paulo	Paulo	Paulo	Paulo
1 nga	Sellula	Sellula	Sellula	Sellula	Sellula
2. 2	Sellula	Sellula	Sellula	Sellula	Sellula
3.	Sellula	Sellula	Sellula	Sellula	Sellula

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