Dukumeenti iyo tusaaleyaal door-bixsiga qaabaynta miisaska (iyada oo la siinayo isticmaalkooda baahsan ee JavaScript plugins) oo wata Bootstrap.
Tusaalooyinka
Sababo la xiriira isticmaalka baahsan ee miisaska guud ahaan widget-yada qolo saddexaad sida jadwaladaha iyo taariikhda-dooriyeyaasha, waxaanu u qaabaynnay miisaskayada inay noqdaan kuwo doorta . Kaliya ku dar fasalka saldhiga .tablemid kasta <table>, ka dibna ku kordhi qaababka gaarka ah ama fasaladayada kala duwan ee wax ka beddelka ah ee ku jira.
Isticmaalka calaamadaynta miiska ugu aasaasiga ah, halkan waa sida .tablemiisaska ku salaysan u eegaan Bootstrap. Dhammaan qaababka miiska waxaa lagu dhaxlayaa Bootstrap 4 , taasoo la micno ah in miisas kasta oo buul ah loo qaabeeyey si la mid ah habka waalidka.
Si la mid ah miisaska iyo miisaska mugdiga ah, isticmaal fasallada wax ka beddelka .thead-lightama .thead-darksi aad uga dhigto <thead>s iftiin ama cawl madow.
Ku dar .table-borderedsoohdimaha dhammaan dhinacyada miiska iyo unugyada.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
Miis aan xuduud lahayn
Ku dar .table-borderlessmiis aan xuduud lahayn.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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-borderlessWaxa kale oo loo isticmaali karaa miisaska mugdiga ah.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
Safafka lulsan kara
Ku dar .table-hoversi aad awood ugu yeelatid heerka dulmanaha ee safafka miiska gudaha a <tbody>.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
Miis yar
Ku dar .table-smsi aad miisaska uga dhigto kuwo is haysta adiga oo gooyay suufka unugga kala badh.
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
#
Marka hore
Dambe
Qabasho
1
Calaamadee
Otto
@mdo
2
Yacquub
Thornton
@ buuran
3
Larry the Bird
@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>
Fasalada macnaha guud
Isticmaal fasallada macnaha guud si aad u midabayso safafka miiska ama unugyada gaarka ah.
Fasalka
Ciwaanka
Ciwaanka
Firfircoon
Unug
Unug
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 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>
Kala duwanaanshaha asalka caadiga ah ee miiska lama heli karo miiska mugdiga ah, si kastaba ha ahaatee, waxaad isticmaali kartaa qoraalka ama agabka dambe si aad u gaarto qaabab isku mid ah.
#
Ciwaanka
Ciwaanka
1
Unug
Unug
2
Unug
Unug
3
Unug
Unug
4
Unug
Unug
5
Unug
Unug
6
Unug
Unug
7
Unug
Unug
8
Unug
Unug
9
Unug
Unug
<!-- 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>
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 .sr-onlyfasalka dhexdiisa ku qarsoon.
Samee jadwal jawaab celin leh adigoo ku duubaya mid kasta , .tableadoo .table-responsive{-sm|-md|-lg|-xl}ka dhigaya miiska si toosan ugu rogrogmado meel kasta oo max-widthjaban oo ah ilaa (laakiin aan lagu darin) 576px, 768px, 992px, iyo 1120px, siday u kala horreeyaan.
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
Shimbirka
@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>
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}.
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.