Bootstrap bilen tablisalary optiki düzmek üçin resminamalar we mysallar (JavaScript plaginlerinde giňden ulanylyşyny göz öňünde tutup).
Bu sahypada
Gysgaça syn
Senenamalar we senäni saýlaýjylar ýaly üçünji tarap widjetlerinde elementleriň giňden ulanylmagy sebäpli “ Bootstrap” -yň<table> tablisalary açyk . Esasy synpy islendik birine goşuň , soňra goşmaça üýtgediji synplarymyz ýa-da adaty stillerimiz bilen giňeldiň. Stol stilleriniň hemmesi “Bootstrap” -da miras galanok, ýagny islendik höwürtgelenen stollary ene-atadan garaşsyz görnüşde düzüp bolýar..table<table>
Iň esasy tablisa belligini ulanyp, “ .tableBootstrap” -da esasly tablisalaryň görnüşi.
#
Ilki bilen
Iň soňky
Işlediň
1
Bellik
Otto
@mdo
2
Jacobakup
Thornton
@fat
3
Larry the guş
@twitter
<tableclass="table"><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>
Görnüşler
Reňk tablisalaryna, tablisa hatarlaryna ýa-da aýratyn öýjüklere kontekst sapaklaryny ulanyň.
Synp
Sözbaşy
Sözbaşy
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 tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><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-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>
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 .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Maksatly tablisalar
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 the guş
@twitter
<tableclass="table table-striped">
...
</table>
Bu sapaklary tablisanyň wariantlaryna hem goşup bolýar:
Customörite häsiýetli stol öýjüginiň fonuny bellemekden başlaýarys --bs-table-bg. Tablehli tablisanyň wariantlary, tablisanyň öýjüklerini reňklemek üçin şol aýratyn häsiýeti düzýärler. Şeýlelik bilen, ýarym dury reňkler stoluň fonunda ulanylsa, kynçylyk çekmeris.
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Soňra, görkezilenleriň üstünde gatlak bilen stol öýjüklerine goşma guty kölegesini goşýarys background-color. Hugegirt ýaýramagy ulanýarys we bulaşyklyk ýok, reňk monoton bolar. Düzgüne --bs-table-accent-bggörä düzülmänsoň, deslapky guty kölegesi ýok.
Haçan-da ýa .table-striped- .table-hoverda .table-activesynplar goşulanda, --bs-table-accent-bgfon reňklemek üçin ýarym açyk reňkde bolýar.
Her tablisanyň görnüşi üçin, --bs-table-accent-bgşol reňke baglylykda iň ýokary kontrastly reňk döredýäris. Mysal üçin, aksentiň reňki .table-primaryhas .table-darkaksent reňkine eýe bolýar.
Tekst we serhet reňkleri birmeňzeş döredilýär we reňkleri adaty ýagdaýda miras galypdyr.
Stol öýjükleri <thead>elmydama aşagyna dikligine deňleşdirilýär. Stol öýjükleri <tbody>deňleşdirilişini miras alýarlar <table>we adaty ýagdaýda ýokarsyna deňleşdirilýär. Zerur ýerlerde täzeden deňleşdirmek üçin dik tekizlemek synplaryny ulanyň .
1-nji sözbaşy
2-nji sözbaşy
3-nji sözbaşy
4-nji sözbaşy
Bu öýjük vertical-align: middle;tablisadan miras alýar
Bu öýjük vertical-align: middle;tablisadan miras alýar
Bu öýjük vertical-align: middle;tablisadan miras alýar
Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar
Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar
Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar
Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük vertical-align: middle;tablisadan miras alýar
Bu öýjük vertical-align: middle;tablisadan miras alýar
Bu öýjük ýokarsyna deňleşdirildi.
Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Höwürtge
Serhet stilleri, işjeň stiller we tablisa görnüşleri öýlenen tablisalara miras galanok.
Haýsydyr bir stiliň ýerleşdirilen stollara syzmazlygy üçin >CSS-de çaga kombinatoryny () saýlaýjysyny ulanýarys. tdInhli s-leri thnyşana almalydygymyz sebäpli thead, saýlaýjymyz onsuz gaty uzyn görüner. Şeýle bolansoň, ähli s- leri nyşana almak üçin gaty üýtgeşik görünýän saýlaýjyny ulanýarys , ýöne hiç hili potensial ýerleşdirilen tablisa ýok.tbodytfoot.table > :not(caption) > * > *tdth.table
<tr>Stoluň gönüden-göni çagalary hökmünde s goşsaňyz , deslapky <tr>görnüşde <tbody>örtüljekdigini, şeýlelik bilen saýlaýjylarymyzyň isleýşi ýaly işlemegine üns beriň.
Anatomiýa
Stoluň başy
Stollara we gara stollara meňzeş ýaly, üýtgediji synplary ulanyň .table-lightýa-da .table-darkaçyk <thead>ýa-da goýy çal reňkde görüniň.
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 the guş
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Şeýle hem <caption>, stoluň ýokarsyna goýup bilersiňiz .caption-top.
Ulanyjylaryň sanawy
#
Ilki bilen
Iň soňky
Işlediň
1
Bellik
Otto
@mdo
2
Jacobakup
Thornton
@fat
3
Larry
guş
@twitter
<tableclass="table caption-top"><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|-xxl}.
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ň.
Ulany.table-responsive{-sm|-md|-lg|-xl|-xxl}Belli bir nokada çenli täsirli tablisalary döretmek üçin zerur bolandaŞ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.
Faktor üýtgeýjileri ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) tablisanyň görnüşleriniň arasyndaky tapawudy kesgitlemek üçin ulanylýar.
$table-bg-levelLightagty we garaňky stol görnüşlerinden başga-da, üýtgeýänler tarapyndan mowzuk reňkleri ýeňilleşdirilýär .