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>

Serhetsiz stol

.table-borderlessSerhetsiz stol üç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-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-borderlessgaraňky stollarda hem ulanylyp bilner.

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

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.

Bu tablisalar, duýgur görnüşleri belli bir görnüş giňliginde ulanylýança döwülen ýaly bolup biler.

# 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
2 Öý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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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
2 Öý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 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 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
2 Öý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 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 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
2 Öý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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>