Takaddun bayanai da misalai don ficewa salon salon tebur (idan aka ba su yawan amfani da su a cikin plugins JavaScript) tare da Bootstrap.
A wannan shafi
Dubawa
Saboda yaɗuwar amfani da <table>abubuwa a cikin widgets na ɓangare na uku kamar kalanda da masu zaɓen kwanan wata, Teburan Bootstrap sun shiga . Ƙara ajin tushe .tablezuwa kowane <table>, sannan ƙara tare da azuzuwan gyare-gyare na zaɓi ko salon al'ada. Ba a gaji duk salon tebur a cikin Bootstrap, ma'ana kowane tebur na gida yana iya zama mai zaman kansa daga iyaye.
Yin amfani da mafi mahimmancin alamar tebur, ga yadda .tabletebur na tushen ke kallo a cikin Bootstrap.
#
Na farko
Karshe
Hannu
1
Alama
Otto
@mdo
2
Yakubu
Thornton
@mai
3
Larry the Bird
@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>
Bambance-bambance
Yi amfani da azuzuwan mahallin don launi tebur, layuka na tebur ko sel guda ɗaya.
Class
Jagora
Jagora
Default
Cell
Cell
Firamare
Cell
Cell
Sakandare
Cell
Cell
Nasara
Cell
Cell
hadari
Cell
Cell
Gargadi
Cell
Cell
Bayani
Cell
Cell
Haske
Cell
Cell
Duhu
Cell
Cell
<!-- 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>
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hiddenajin.
Tebur masu ƙaranci
Layukan tsige
Yi amfani .table-stripeddon ƙara zakin zebra zuwa kowane jere na tebur a cikin <tbody>.
#
Na farko
Karshe
Hannu
1
Alama
Otto
@mdo
2
Yakubu
Thornton
@mai
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Hakanan ana iya ƙara waɗannan azuzuwan zuwa bambance-bambancen tebur:
Mun fara da saita bangon tantanin halitta tare da --bs-table-bgkayan al'ada. Duk bambance-bambancen tebur sannan saita waccan kadara ta al'ada don canza launin teburin sel. Ta wannan hanyar, ba za mu shiga cikin matsala ba idan ana amfani da launuka masu tsaka-tsaki azaman bayanan tebur.
Sa'an nan kuma mu ƙara inset akwatin inuwa a kan tebur Kwayoyin tare box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);da Layer a saman kowane kayyade background-color. Saboda muna amfani da babban yaduwa kuma babu blur, launi zai zama monotone. Tun --bs-table-accent-bgda ba a saita shi ta tsohuwa, ba mu da tsohuwar inuwar akwatin.
Lokacin da aka ƙara ko dai .table-striped, .table-hoverko .table-activeazuzuwan, --bs-table-accent-bgana saita shi zuwa launi mai kama da juna don canza launin bango.
Ga kowane bambance-bambancen tebur, muna samar da --bs-table-accent-bglauni tare da mafi girman bambanci dangane da wannan launi. Misali, launin lafazin don .table-primaryya fi duhu yayin da yake .table-darkda launi mai sauƙi.
Rubutu da launukan kan iyaka ana samar da su iri ɗaya ne, kuma launukansu ana gadonsu ta hanyar tsohuwa.
Kwayoyin tebur na <thead>koyaushe suna daidaitawa zuwa ƙasa. Kwayoyin tebur a cikin sun <tbody>gaji daidaitawar su <table>kuma an daidaita su zuwa sama ta tsohuwa. Yi amfani da azuzuwan daidaita layi don sake daidaitawa inda ake buƙata.
Take 1
Take 2
Take 3
Take 4
Wannan tantanin halitta ya gaji vertical-align: middle;daga tebur
Wannan tantanin halitta ya gaji vertical-align: middle;daga tebur
Wannan tantanin halitta ya gaji vertical-align: middle;daga tebur
Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.
Wannan tantanin halitta ya gaji vertical-align: bottom;daga layin tebur
Wannan tantanin halitta ya gaji vertical-align: bottom;daga layin tebur
Wannan tantanin halitta ya gaji vertical-align: bottom;daga layin tebur
Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.
Wannan tantanin halitta ya gaji vertical-align: middle;daga tebur
Wannan tantanin halitta ya gaji vertical-align: middle;daga tebur
Wannan tantanin halitta an daidaita shi zuwa sama.
Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.
<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>
Gurasa
Salon kan iyaka, salon aiki, da bambance-bambancen teburi ba su gaji ta teburi masu gida.
Don hana kowane salo daga zubewa zuwa teburi masu gida, muna amfani da >mai zaɓin yara ( ) a cikin CSS ɗin mu. Tunda muna buƙatar yin niyya ga duk tds da ths a cikin thead, tbody, da tfoot, mai zaɓin mu zai yi kyau sosai ba tare da shi ba. .table > :not(caption) > * > *Don haka, muna amfani da zaɓi mai ban sha'awa don yin niyya ga duk tds da ths na .table, amma babu ɗayan tebur mai yuwuwar.
Lura cewa idan kun ƙara <tr>s a matsayin yaran tebur kai tsaye, waɗannan <tr>za a naɗe <tbody>su ta hanyar tsohuwa, don haka sa masu zaɓinmu suyi aiki kamar yadda aka yi niyya.
Jiki
Shugaban tebur
Kama da teburi da teburi masu duhu, yi amfani da azuzuwan masu gyara .table-lightko .table-darkdon sanya <thead>s ya zama haske ko launin toka mai duhu.
Ayyuka <caption>kamar tafiya zuwa tebur. Yana taimaka wa masu amfani da masu karanta allo don nemo tebur kuma su fahimci abin da ke cikinsa kuma su yanke shawarar idan suna son karanta shi.
Jerin masu amfani
#
Na farko
Karshe
Hannu
1
Alama
Otto
@mdo
2
Yakubu
Thornton
@mai
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Hakanan zaka iya sanya <caption>saman saman tebur tare da .caption-top.
Jerin masu amfani
#
Na farko
Karshe
Hannu
1
Alama
Otto
@mdo
2
Yakubu
Thornton
@mai
3
Larry
Tsuntsu
@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>
Tables masu amsawa
Tables masu amsawa suna ba da damar gungurawa tebur a kwance cikin sauƙi. Sanya kowane tebur mai amsawa a duk wuraren kallo ta hanyar nannade .tableda .table-responsive. Ko, zaɓi matsakaicin matsakaicin wurin da za a sami tebur mai amsawa da shi ta amfani da .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Yanke/tsatsewa tsaye
Tables masu amsawa suna amfani da overflow-y: hidden, wanda ke cire duk wani abun ciki wanda ya wuce ƙasa ko saman saman teburin. Musamman, wannan na iya kashe menus na zazzagewa da sauran widgets na ɓangare na uku.
Koyaushe mai amsawa
A ko'ina cikin kowane wurin hutu, yi amfani .table-responsiveda teburin gungurawa a kwance.
Yi amfani .table-responsive{-sm|-md|-lg|-xl|-xxl}da yadda ake buƙata don ƙirƙirar tebur masu amsawa har zuwa wani wuri na musamman. Tun daga wancan lokacin zuwa sama, tebur ɗin zai kasance kamar yadda aka saba kuma ba gungurawa a kwance ba.
Waɗannan allunan na iya bayyana sun karye har sai an yi amfani da salon da suka dace a takamaiman nisan kallon kallo.