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.
.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
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-bordered table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-borderless table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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 --><trclass="table-active">...</tr><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="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
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
<tableclass="table"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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 tablisasyna eýe boljak iň ýokary nokady saýlaň .table-responsive{-sm|-md|-lg|-xl}.
Dik kesmek / kesmek
Jogapkärçilikli tablisalar ulanylýar, 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ň.
.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.