Tablisa
Bootstrap bilen tablisalary optiki düzmek üçin resminamalar we mysallar (JavaScript plaginlerinde giňden ulanylyşyny göz öňünde tutup).
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 .table
islendik birine goşuň <table>
, soňra adaty stil ýa-da dürli üýtgediji synplarymyz bilen giňeldiň.
Iň esasy tablisa belligini ulanyp, “ .table
Bootstrap” -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ş |
<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ş |
<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>
Stollara we gara stollara meňzeş ýaly, üýtgediji synplary ulanyň .thead-light
ýa-da .thead-dark
aç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ş |
# | Ilki bilen | Iň soňky | Işlediň |
---|---|---|---|
1 | Bellik | Otto | @mdo |
2 | Jacobakup | Thornton | @fat |
3 | Larry | guş |
<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>
.table-striped
Iç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ş |
<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ş |
<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>
.table-bordered
Stoluň 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ş |
<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ş |
<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>
.table-borderless
Serhetsiz stol üçin goşuň .
# | Ilki bilen | Iň soňky | Işlediň |
---|---|---|---|
1 | Bellik | Otto | @mdo |
2 | Jacobakup | Thornton | @fat |
3 | Larry the guş |
<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-borderless
garaňky stollarda hem ulanylyp bilner.
# | Ilki bilen | Iň soňky | Işlediň |
---|---|---|---|
1 | Bellik | Otto | @mdo |
2 | Jacobakup | Thornton | @fat |
3 | Larry the guş |
<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>
.table-hover
A 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ş |
<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ş |
<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>
.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ş |
<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ş |
<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>
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-only
synp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Islän zadyňyzy örtüp, tablisa .table
degiş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. .
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.
# | Ilki bilen | Iň soňky | Işlediň |
---|---|---|---|
1 | Bellik | Otto | @mdo |
2 | Jacobakup | Thornton | @fat |
3 | Larry | guş |
<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 tablisalary aňsatlyk bilen keseligine aýlamaga mümkinçilik berýär. Viewhli görnüşdäki tablisa bilen .table
gaplaň .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: hidden
tablisanyň 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.
Her nokadyň üstünden .table-responsive
keseligine 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>
.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>