Source

Tablisa

Bootstrap bilen tablisalary optiki düzmek üçin resminamalar we mysallar (JavaScript plaginlerinde giňden ulanylyşyny göz öňünde tutup).

Mysallar

Senenamalar we senäni saýlaýjylar ýaly üçünji tarap widjetlerinde tablisalaryň giňden ulanylmagy sebäpli, tablisalarymyzy saýlamak üçin taýýarladyk . Diňe esasy synpy .tableislendik birine goşuň <table>, soňra adaty stil ýa-da dürli üýtgediji synplarymyz bilen giňeldiň.

Iň esasy tablisa belligini ulanyp, “ .tableBootstrap” -da esasly tablisalaryň görnüşi. Stol stilleriniň hemmesi Bootstrap 4-de miras galypdyr , ýagny islendik höwürtgelenen tablisalar ene-atalar ýaly tertipleşdiriler.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Şeýle hem, reňkleri garaňky fonda açyk tekst bilen öwürip bilersiňiz .table-dark.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Stoluň baş görnüşleri

Stollara we gara stollara meňzeş ýaly, üýtgediji synplary ulanyň .thead-lightýa-da .thead-darkaçyk <thead>ýa-da goýy çal reňkde boluň.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Zolakly hatarlar

.table-stripedIçindäki islendik stol hataryna zebra-zolak goşmak üçin ulanyň <tbody>.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Serhet stoly

.table-borderedStoluň we öýjükleriň hemme tarapyna serhetler goşuň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Hereketli hatarlar

.table-hoverA içindäki stol hatarlarynda aýlaw ýagdaýyny açmak üçin goşuň <tbody>.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Kiçi stol

.table-smÖýjük örtüklerini ýarym kesip, tablisalary has ykjam etmek üçin goşuň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Kontekst sapaklary

Stol hatarlaryny ýa-da aýry öýjükleri reňklemek üçin kontekst sapaklaryny ulanyň.

Synp	Sözbaşy	Sözbaşy
Işjeň	Öýjük	Öýjük
Bellenen	Öýjük	Öýjük
Başlangyç	Öýjük	Öýjük
Ikinji	Öýjük	Öýjük
Üstünlik	Öýjük	Öýjük
Howp	Öýjük	Öýjük
Duýduryş	Öýjük	Öýjük
Maglumat	Öýjük	Öýjük
Lightagtylyk	Öýjük	Öýjük
Garaňky	Öýjük	Öýjük

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

Garaňky stol bilen yzygiderli stoluň fon görnüşleri elýeterli däl, ýöne şuňa meňzeş stillere ýetmek üçin tekst ýa-da fon enjamlaryny ulanyp bilersiňiz.

#	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük
2	Öýjük	Öýjük
3	Öýjük	Öýjük
4	Öýjük	Öýjük
5	Öýjük	Öýjük
6	Öýjük	Öýjük
7	Öýjük	Öýjük
8	Öýjük	Öýjük
9	Öýjük	Öýjük

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

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Islän zadyňyzy örtüp, tablisa .tabledegişlilikde 576px, 768px, 992px we 1120px çenli .table-responsive{-sm|-md|-lg|-xl}her nokatda keseligine aýlaň .max-width

Brauzerleriň häzirki wagtda aralyk kontekst talaplaryny goldamaýandygy sebäpli, bu deňeşdirmeler üçin has takyklyk bilen bahalary ulanyp, fraksiýa giňligi (meselem, ýokary dpi enjamlarynda käbir şertlerde bolup biler) çäklendirmeleriniň min-we max-prefiksleriniň we görnüşleriniň üstünde işleýäris. .

Tionsazgylar

Tablisa sözbaşy ýaly <caption>funksiýalar. Ekran okyjylary bolan ulanyjylara tablisa tapmaga we onuň nämedigine düşünmäge we ony okamak isleýändiklerine karar bermäge kömek edýär.

Ulanyjylaryň sanawy
#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Jogap beriji tablisalar

Jogap beriji tablisalar tablisalary aňsatlyk bilen keseligine aýlamaga mümkinçilik berýär. Viewhli görnüşdäki tablisa bilen .tablegaplaň .table-responsive. Ora-da ulanyp, jogap beriji tablisa eýe boljak iň ýokary nokady saýlaň .table-responsive{-sm|-md|-lg|-xl}.

Dik kesmek / kesmek

Jogap beriji tablisalar, overflow-y: hiddentablisanyň aşaky ýa-da ýokarky gyralaryndan çykýan islendik mazmuny kesýär. Hususan-da, bu açylýan menýulary we beýleki üçünji tarap widjetlerini kesip biler.

Elmydama jogap beriň

Her nokadyň üstünden .table-responsivekeseligine aýlamak tablisalaryny ulanyň.

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

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

Bölüniş nokady

.table-responsive{-sm|-md|-lg|-xl}Belli bir nokada çenli täsirli tablisalary döretmek üçin zerur bolanda ulanyň . Şol nokatdan ýokaryk, tablisa kadaly hereket eder we keseligine aýlanmaz.

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

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