Source

Matafura

Zvinyorwa uye mienzaniso yekusarudza-mukati styling yematafura (zvichipiwa kushandiswa kwavo kwakanyanya muJavaScript plugins) neBootstrap.

Mienzaniso

Nekuda kwekushandiswa kwakatekeshera kwematafura pamawijeti ebato rechitatu semakarenda nevanotora mazuva, takagadzira matafura edu kuti asangane . Ingo wedzera base kirasi .tablekune chero <table>, wobva wawedzera nemaitiro etsika kana edu akasiyana anosanganisirwa modifier makirasi.

Uchishandisa yakanyanya kukosha tafura markup, heino maitiro .table-akavakirwa matafura anotarisa muBootstrap. Ese masitayera etafura anogarwa nhaka muBootstrap 4 , zvichireva kuti chero matafura anested achaitwa nenzira yakafanana nemubereki.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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>

Iwe unogona zvakare kushandura mavara-nemavara akajeka pane yakasviba kumashure-ne .table-dark.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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>

Zvisarudzo zvemusoro wetafura

Zvakafanana nematafura nematafura akasviba, shandisa makirasi ekugadzirisa .thead-lightkana .thead-darkkuita kuti <thead>s iite seyakajeka kana yakasviba grey.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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>

Mitsara mitsetse

Shandisa .table-stripedkuwedzera zebra-striping kune chero mutsara wetafura mukati me <tbody>.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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

Wedzera .table-borderedkune miganhu kumativi ese etafura uye maseru.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>

Tafura isina muganhu

Wedzera .table-borderlesskune tafura isina miganhu.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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-borderlessinogonawo kushandiswa pamatafura erima.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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 mitsara

Wedzera .table-hoverkugonesa hover state patafura mitsara mukati me <tbody>.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>

Diki table

Wedzera .table-smkuita kuti matafura awedzere kuwirirana nekucheka cell padding nepakati.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>

Contextual classes

Shandisa makirasi emukati kupenda mitsara yematafura kana maseru ega ega.

Kirasi Heading Heading
Active Sero Sero
Default Sero Sero
Primary Sero Sero
Secondary Sero Sero
Success Sero Sero
Danger Sero Sero
Yambiro Sero Sero
Info Sero Sero
Chiedza Sero Sero
Rima Sero Sero 
<!-- 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>

Yakajairwa tafura yekumashure akasiyana haiwanikwe neiyo rima tafura, zvisinei, unogona kushandisa zvinyorwa kana zvemashure zvishandiso kuti uwane akafanana masitaera.

# Heading Heading
1 Sero Sero
2 Sero Sero
3 Sero Sero
4 Sero Sero
5 Sero Sero
6 Sero Sero
7 Sero Sero
8 Sero Sero
9 Sero Sero 
<!-- 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>
Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .sr-onlynekirasi.

Gadzira matafura anopindura nekupeta chero .tablene .table-responsive{-sm|-md|-lg|-xl}, uchiita kuti tafura ifambe yakatwasuka pane yega yega max-widthkusvika (asi isingasanganisire) 576px, 768px, 992px, uye 1120px, zvichiteerana.

Ziva kuti sezvo mabhurawuza pari zvino asingatsigire mivhunzo yezvimiro , isu tinoshanda zvakatenderedza min-uye max-prefixes uye nzvimbo dzekutarisa dzine hupamhi hwakaganhurwa (izvo zvinogona kuitika mune mamwe mamiriro pamichina yepamusoro-dpi, semuenzaniso) nekushandisa hunhu nehunyanzvi hwepamusoro pakuenzanisa uku. .

Mashoko

A <caption>anoshanda semusoro wetafura. Inobatsira vashandisi vane screen readers kuti vawane tafura uye vanzwisise kuti ndeyei uye vosarudza kana vachida kuiverenga.

Rondedzero yevashandisi
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @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>

Matafura anopindura

Matafura anopindura anobvumira matafura kuti atenderedzwe akachinjika zviri nyore. Ita chero tafura ipindure pamativi ese ekuona nekuputira .tablene .table-responsive. Kana, tora nzvimbo yakakura yekutyora iyo yekuve netafura inopindura kusvika nekushandisa .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Matafura anopindura anoshandisa overflow-y: hidden, ayo anobvisa chero zvirimo zvinodarika kuzasi kana kumucheto kwetafura. Kunyanya, izvi zvinogona kudimbura mamenu ekudonha uye mamwe echitatu-bato majeti.

Nguva dzose inopindura

Pakati pese pese pese, shandisa .table-responsivekune yakachinjika kupuruzira matafura.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero Sero 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint chaiyo

Shandisa .table-responsive{-sm|-md|-lg|-xl}sezvinodiwa kugadzira matafura anopindura kusvika kune imwe nzvimbo yekutyora. Kubva pane iyo breakpoint uye kumusoro, tafura ichaita zvakajairwa uye kwete kupururudza yakatwasuka.

Aya matafura anogona kuita seakatyoka kudzamara masitayipi avo ekupindura ashanda pane yakatarwa viewport wides.

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