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 asarudze kupinda . 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 rima 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>

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.

#	Heading	Heading	Heading	Heading	Heading
1	Sero	Sero	Sero	Sero	Sero
2	Sero	Sero	Sero	Sero	Sero
3	Sero	Sero	Sero	Sero	Sero

#	Heading	Heading	Heading	Heading	Heading
1	Sero	Sero	Sero	Sero	Sero
2	Sero	Sero	Sero	Sero	Sero
3	Sero	Sero	Sero	Sero	Sero

#	Heading	Heading	Heading	Heading	Heading
1	Sero	Sero	Sero	Sero	Sero
2	Sero	Sero	Sero	Sero	Sero
3	Sero	Sero	Sero	Sero	Sero

#	Heading	Heading	Heading	Heading	Heading
1	Sero	Sero	Sero	Sero	Sero
2	Sero	Sero	Sero	Sero	Sero
3	Sero	Sero	Sero	Sero	Sero

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