Nyaraka na mifano ya kuchagua kuingia kwa mtindo wa jedwali (kwa kuzingatia matumizi yao ya kawaida katika programu jalizi za JavaScript) na Bootstrap.
Katika ukurasa huu
Muhtasari
Kwa sababu ya kuenea kwa matumizi ya <table>vipengee kwenye wijeti za watu wengine kama vile kalenda na vichagua tarehe, majedwali ya Bootstrap ni ya kuchagua kuingia . Ongeza darasa la msingi .tablekwa any <table>, kisha upanue na madarasa yetu ya hiari ya kurekebisha au mitindo maalum. Mitindo yote ya jedwali haijarithiwa katika Bootstrap, kumaanisha kuwa jedwali zozote zilizowekwa kwenye kiota zinaweza kutengenezwa bila mpangilio kutoka kwa mzazi.
Kwa kutumia lebo ya msingi zaidi ya jedwali, hivi ndivyo .tablemajedwali-msingi yanavyoonekana kwenye Bootstrap.
#
Kwanza
Mwisho
Kushughulikia
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Ndege
@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>
Lahaja
Tumia madarasa ya muktadha kwa majedwali ya rangi, safu mlalo za jedwali au seli mahususi.
Darasa
Kichwa
Kichwa
Chaguomsingi
Kiini
Kiini
Msingi
Kiini
Kiini
Sekondari
Kiini
Kiini
Mafanikio
Kiini
Kiini
Hatari
Kiini
Kiini
Onyo
Kiini
Kiini
Habari
Kiini
Kiini
Mwanga
Kiini
Kiini
Giza
Kiini
Kiini
<!-- 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>
Kuwasilisha maana kwa teknolojia za usaidizi
Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.
Jedwali zenye lafudhi
Safu zenye mistari
Tumia .table-stripedkuongeza zebra-striping kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>.
#
Kwanza
Mwisho
Kushughulikia
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Ndege
@twitter
<tableclass="table table-striped">
...
</table>
Madarasa haya pia yanaweza kuongezwa kwa anuwai za jedwali:
Tunaanza kwa kuweka usuli wa seli ya jedwali na --bs-table-bgmali maalum. Vibadala vyote vya jedwali kisha weka sifa hiyo maalum ili kupaka rangi seli za jedwali. Kwa njia hii, hatutaingia kwenye matatizo ikiwa rangi zisizo na uwazi zitatumika kama mandharinyuma ya jedwali.
Kisha tunaongeza kivuli cha kisanduku cha kuingiza kwenye seli za jedwali na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);kuweka safu juu ya yoyote iliyobainishwa background-color. Kwa sababu tunatumia uenezi mkubwa na hakuna ukungu, rangi itakuwa monotone. Kwa kuwa --bs-table-accent-bghaijawekwa kwa chaguo-msingi, hatuna kivuli cha kisanduku chaguo-msingi.
Wakati aidha .table-striped, .table-hoverau .table-activemadarasa yameongezwa, --bs-table-accent-bghuwekwa kwa rangi isiyo na uwazi ili kupaka mandharinyuma.
Kwa kila lahaja ya jedwali, tunatoa --bs-table-accent-bgrangi yenye utofauti wa juu zaidi kulingana na rangi hiyo. Kwa mfano, rangi ya lafudhi .table-primaryni nyeusi zaidi wakati .table-darkina rangi nyepesi ya lafudhi.
Nakala na rangi za mpaka zinazalishwa kwa njia ile ile, na rangi zao hurithiwa kwa chaguo-msingi.
Seli za jedwali za <thead>kila mara hupangiliwa wima hadi chini. Seli za jedwali katika <tbody>hurithi upangaji wao kutoka <table>na hupangwa hadi juu kwa chaguo-msingi. Tumia madarasa ya kupanga wima ili kupanga upya inapohitajika.
Kichwa 1
Kichwa cha 2
Kichwa cha 3
Kichwa cha 4
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali
Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali
Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali
Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali
Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali
Seli hii imepangwa hadi juu.
Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
<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>
Nesting
Mitindo ya mipaka, mitindo inayotumika, na anuwai za jedwali hazirithiwi na majedwali yaliyowekwa.
Ili kuzuia mitindo yoyote isivuje hadi kwa majedwali yaliyowekwa, tunatumia >kichaguzi cha mtoto ( ) katika CSS yetu. Kwa kuwa tunahitaji kulenga tds na ths zote kwenye thead, tbody, na tfoot, kiteuzi chetu kitaonekana kirefu sana bila hiyo. Kwa hivyo, tunatumia kiteuzi cha sura isiyo ya kawaida .table > :not(caption) > * > *kulenga tds na ths zote za .table, lakini hakuna jedwali zozote zinazowezekana.
Kumbuka kuwa ukiongeza <tr>s kama watoto wa moja kwa moja wa jedwali, hizo <tr>zitafungwa <tbody>kwa chaguo-msingi, na hivyo kufanya wateuzi wetu kufanya kazi kama ilivyokusudiwa.
Anatomia
Kichwa cha meza
Sawa na majedwali na majedwali meusi, tumia madarasa ya kurekebisha .table-lightau .table-darkkufanya <thead>s ionekane nyepesi au kijivu iliyokolea.
Hufanya <caption>kazi kama kichwa cha jedwali. Husaidia watumiaji walio na visoma skrini kupata jedwali na kuelewa inahusu nini na kuamua kama wanataka kuisoma.
Orodha ya watumiaji
#
Kwanza
Mwisho
Kushughulikia
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Ndege
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Unaweza pia kuweka <caption>juu ya meza na .caption-top.
Orodha ya watumiaji
#
Kwanza
Mwisho
Kushughulikia
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
ndege
@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>
Majedwali ya mwitikio
Majedwali jibu huruhusu jedwali kusongeshwa kwa mlalo kwa urahisi. Fanya jedwali lolote lijisikie kwenye tovuti zote za kutazama kwa kufunga a.table na .table-responsive. Au, chagua kikomo cha juu zaidi ambacho unaweza kuwa na jedwali la kuitikia hadi kwa kutumia .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Ukataji/upunguzaji wima
Jedwali jibu hufanya matumizioverflow-y: hidden , ambayo huondoa maudhui yoyote ambayo huenda zaidi ya kingo za chini au za juu za jedwali. Hasa, hii inaweza kupunguza menyu kunjuzi na wijeti zingine za wahusika wengine.
Daima msikivu
Katika kila sehemu ya kukatiza, tumia .table-responsivekwa majedwali ya kusogeza kwa mlalo.
Tumia.table-responsive{-sm|-md|-lg|-xl|-xxl} inavyohitajika ili kuunda majedwali jibu hadi sehemu fulani ya kukanusha. Kutoka kwa sehemu hiyo ya mapumziko na juu, jedwali litafanya kazi kama kawaida na sio kusonga kwa usawa.
Majedwali haya yanaweza kuonekana yamevunjwa hadi mitindo yao ya kuitikia itumike katika upana mahususi wa kituo cha kutazama.
Vigezo vya sababu ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) hutumika kubainisha utofautishaji katika vibadala vya jedwali.
Kando na vibadala vya jedwali jeusi na jeusi, rangi za mandhari hurahisishwa na $table-bg-levelutofauti.