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>

Awan beddengna a lamisaan

Inayon .table-borderlesspara iti lamisaan nga awanan kadagiti beddeng.

# 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-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-borderlessmabalin met nga usaren kadagiti nasipnget a lamisaan.

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

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.

Dagitoy a lamisaan ket mabalin nga agparang a nadadael aginggana dagiti sumungbat nga estiloda ket agaplikar kadagiti espesipiko a kalawa ti viewport.

# Paulo Paulo Paulo Paulo Paulo Paulo Paulo Paulo
1 nga Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
2. 2 Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
3. Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Paulo Paulo Paulo Paulo Paulo Paulo Paulo Paulo
1 nga Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
2. 2 Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
3. Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Paulo Paulo Paulo Paulo Paulo Paulo Paulo Paulo
1 nga Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
2. 2 Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
3. Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Paulo Paulo Paulo Paulo Paulo Paulo Paulo Paulo
1 nga Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
2. 2 Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula
3. Sellula Sellula Sellula Sellula Sellula Sellula Sellula Sellula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>