Dukumeenti iyo tusaaleyaal door-ku-habboon ee jaantusyada (marka la eego isticmaalkooda ku badan ee JavaScript plugins) oo wata Bootstrap.
Boggaan
Dulmar
Sababo la xiriira isticmaalka baahsan ee <table>canaasirta guud ahaan widgets qolo saddexaad sida jadwaladaha iyo taariikhda doorayaasha, miisaska Bootstrap waa la dooranayaa . Ku dar fasalka aasaasiga ah .tablemid kasta <table>, ka dibna ku kordhi fasalladayada wax ka beddelka ikhtiyaarka ah ama qaababka gaarka ah. Dhammaan qaababka miiska laguma dhaxlo Bootstrap, taasoo la micno ah in miisas kasta oo buul ah lagu qaabayn karo si ka madax bannaan waalidka.
Isticmaalka calaamadaynta miiska ugu aasaasiga ah, halkan waa sida .tablemiisaska ku salaysan u eegaan Bootstrap.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
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>
Kala duwanaanshiyaha
Isticmaal fasallada macnaha guud si aad u midabayso miisaska, safafka miiska ama unugyada gaarka ah.
Fasalka
Ciwaanka
Ciwaanka
Asal ahaan
Unug
Unug
Asal ahaan
Unug
Unug
Sare
Unug
Unug
Guul
Unug
Unug
Khatarta
Unug
Unug
Digniin
Unug
Unug
Xog
Unug
Unug
Iftiin
Unug
Unug
Madow
Unug
Unug
<!-- 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>
U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.
Miisaska la dajiyay
Safafka la jeexay
Isticmaal .table-stripedsi aad ugu darto xariijimo zebra saf kasta oo ku dhex jira <tbody>.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Fasaladan waxa kale oo lagu dari karaa kala duwanaanshaha miiska:
Waxaan ku bilaabeynaa inaan dejino asalka unugga miiska oo leh --bs-table-bghantidii caadiga ahayd. Dhammaan kala duwanaanshiyaha miiska ayaa dejinaya hantida caadada u ah si ay u midabeeyaan unugyada miiska. Sidan, ma galno dhibaato haddii midabada hufan loo isticmaalo asalka miiska.
Kadibna waxaan ku darnaa hadhka sanduuqa gudaha unugyada miiska iyadoo la box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);saarayo korka wax kasta oo la cayimay background-color. Sababtoo ah waxaan isticmaalnaa faafin weyn oo aan lahayn blur, midabku wuxuu noqon doonaa monotone. Maadaama --bs-table-accent-bgaan si caadi ah loo dejin, ma hayno hooska sanduuqa ee caadiga ah.
Marka mid .table-striped, .table-hoverama .table-activefasalo lagu daro, --bs-table-accent-bgwaxaa loo dejiyaa midab simi transparent si loo midabeeyo asalka.
Kala duwanaanshiyaha miis kasta, waxaan soo saareynaa --bs-table-accent-bgmidab leh farqiga ugu sarreeya iyadoo ku xiran midabkaas. Tusaale ahaan, midabka lahjadda loogu talagalay .table-primarywaa madow halka .table-darkuu leeyahay midab lahjad khafiif ah.
Midabada qoraalka iyo xudduudaha si isku mid ah ayaa loo soo saaray, midabkoodana waxaa lagu dhaxlayaa si caadi ah.
Unugyada miiska <thead>ayaa had iyo jeer toosan xagga hoose. Unugyada miiska ee ku jira waxay ka <tbody>dhaxlaan toosintooda <table>oo waxay la jaanqaadaan xagga sare si caadi ah. Isticmaal fasalada toosan si aad dib ugu toosiso halka loo baahdo.
Ciwaanka 1
Ciwaanka 2
Ciwaanka 3
Ciwaanka 4
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska
Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska
Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska
Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska
Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska
Unuggani waxa uu la siman yahay xagga sare.
Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
<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>
Si aan uga hortagno in qaab kasta uu u daadanayo miisaska buulka leh, waxaan isticmaalnaa isku-duwaha ilmaha ( >) ee CSS-tayada. Maadaama aan u baahanahay in aan bartilmaameedsanno dhammaan tds iyo ths ku jira thead, tbody, iyo tfoot, doorashadayadu waxay u ekaan doontaa mid aad u dheer la'aanteed. Sidan oo kale, waxaan u isticmaalnaa doore muuqaal qurux badan .table > :not(caption) > * > *si aan u beegsano dhammaan tds iyo ths of the .table, laakiin midna miisaska buul ka iman kara.
Ogsoonow in haddii aad ku darto <tr>s sida carruurta tooska ah ee miiska, kuwaas <tr>waxaa lagu duuduubi doonaa si aan <tbody>caadi ahayn, sidaas awgeed xulashadayada waxay u shaqeeyaan sidii loogu talagalay.
Anatomy
Madaxa miiska
Si la mid ah miisaska iyo miisaska mugdiga ah, isticmaal fasallada wax ka beddelka .table-lightama .table-darksi aad <thead>s ugu muuqato iftiin ama cawl madow.
Shaqooyin sida <caption>miiska loo socdo. Waxay ka caawisaa isticmaalayaasha akhristayaasha shaashadda si ay u helaan miis oo ay fahmaan waxa ku saabsan oo ay go'aansadaan haddii ay rabaan inay akhriyaan.
Liiska isticmaalayaasha
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Waxa kale oo aad ku dhejin kartaa <caption>dusha sare ee miiska .caption-top.
Liiska isticmaalayaasha
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry
Shimbirka
@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>
Miisaska jawaab celinta
Jadwalka jawaabaha leh ayaa u oggolaanaya miisaska in si sahlan loo rogo si toos ah. Miis kasta ka dhig mid u jawaabaya dhammaan goobaha daawashada adiga oo ku .tableduubaya .table-responsive. Ama, soo qaado meesha ugu sarreysa ee aad ku yeelan karto miis jawaab celin leh adigoo isticmaalaya .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Goyn toosan/goyn
Miisaska ka jawaaba ayaa isticmaala overflow-y: hidden, kaas oo gooya wax kasta oo ka baxsan cidhifyada hoose ama sare ee miiska. Gaar ahaan, tani waxay gooyn kartaa liiska hoos-u-dhaca iyo aaladaha kale ee qolo saddexaad.
Had iyo jeer u jawaaba
Meel kasta oo jaban, isticmaal .table-responsivemiisaska si toosan u rogrogaya.
Doorsoomayaasha isirka ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) ayaa loo isticmaalaa si loo go'aamiyo kala duwanaanshaha shaxda.
Marka laga reebo noocyada miiska iftiinka & mugdiga ah, midabada mawduuca waxaa iftiiminaya $table-bg-leveldoorsoomayaasha.