Ko nga tuhinga me nga tauira mo te whakauru-whakaahua o nga ripanga (i runga i te nuinga o te whakamahi i roto i nga taputapu JavaScript) me Bootstrap.
Tauira
Na te kaha o te whakamahi i nga ripanga puta noa i nga widget-tuatoru penei i nga maramataka me nga kaikokoti ra, kua hangaia e matou o matou ripanga kia uru mai . Taapiri noa te karaehe turanga .tableki tetahi <table>, katahi ka toro atu me nga momo ritenga me o taatau momo karaehe whakarereke.
Ma te whakamahi i te tohu ripanga tino taketake, koinei te ahua o .tablenga ripanga-a-ringa ki Bootstrap. Ko nga momo ripanga katoa he mea tuku iho ki Bootstrap 4 , ko te tikanga ko nga ripanga kohanga ka rite ki te ahua o te matua.
He rite ki nga tepu me nga tepu pouri, whakamahia nga karaehe whakarereke .thead-light, .thead-darkkia <thead>maamaa ranei te ahua o te hina, te hina pouri ranei.
Tāpirihia .table-borderedhe taitapa ki ngā taha katoa o te ripanga me ngā pūtau.
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
Tepu taitapa kore
Tāpiri .table-borderlessmo te ripanga kore taitapa.
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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-borderlessKa taea hoki te whakamahi ki nga tepu pouri.
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
Nga rarangi whakamarumaru
Tāpirihia .table-hoverkia taea ai te ahua whakaparo ki nga rarangi ripanga i roto i te <tbody>.
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
Tepu iti
Taapirihia .table-smkia pai ake ai nga teepu ma te tapahi i nga papaa pūtau kia haurua.
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry te Manu
@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>
Nga karaehe horopaki
Whakamahia nga karaehe horopaki ki te kara i nga rarangi ripanga me nga pūtau takitahi.
Karaehe
Upoko
Upoko
Hohe
Pūtau
Pūtau
Taunoa
Pūtau
Pūtau
Paraimere
Pūtau
Pūtau
Tuarua
Pūtau
Pūtau
Angitu
Pūtau
Pūtau
mōrearea
Pūtau
Pūtau
Whakatupato
Pūtau
Pūtau
Nga korero
Pūtau
Pūtau
Maama
Pūtau
Pūtau
pouri
Pūtau
Pūtau
<!-- 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>
Ko nga rereke papamuri tepu auau kaore i te waatea me te tepu pouri, heoi, ka taea e koe te whakamahi tuhinga, taputapu papamuri ranei hei whakatutuki i nga momo ahua.
#
Upoko
Upoko
1
Pūtau
Pūtau
2
Pūtau
Pūtau
3
Pūtau
Pūtau
4
Pūtau
Pūtau
5
Pūtau
Pūtau
6
Pūtau
Pūtau
7
Pūtau
Pūtau
8
Pūtau
Pūtau
9
Pūtau
Pūtau
<!-- 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>
Te kawe i te tikanga ki nga hangarau awhina
Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.
Waihangahia nga ripanga urupare ma te takai i tetahi .tableki te .table-responsive{-sm|-md|-lg|-xl}, kia panuku whakapae te ripanga ki ia max-widthwaahi wehenga ki runga (engari kaua e uru) 576px, 768px, 992px, me te 1120px, ia.
Kia mahara, i te mea kaore nga kaitirotiro e tautoko i
nga patai horopaki awhe i tenei wa , ka mahi maatau i nga herenga
min-me max-nga prefix me nga tauranga tirohanga me nga whanui hautau (ka puta i raro i etahi ahuatanga i runga i nga taputapu Dpi teitei, hei tauira) ma te whakamahi i nga uara e tino tika ana mo enei whakataurite. .
Nga tapanga
He <caption>mahi ano he pane mo te ripanga. Ka awhina i nga kaiwhakamahi me nga kaipanui mata ki te kimi i tetahi ripanga me te mohio he aha te korero me te whakatau mehemea ka hiahia ratou ki te panui.
Rarangi o nga kaiwhakamahi
#
Tuatahi
Whakamutunga
Kakau
1
Mark
Otto
@mdo
2
ko Hakopa
Toronton
@ngako
3
Larry
te Manu
@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>
Tepu whakautu
Ka taea e nga ripanga urupare te panuku whakapae me te ngawari. Whakaritea tetahi ripanga kia aro ki nga tauranga tirohanga katoa ma te takai i te .tableki .table-responsive. Ranei, kowhiria he waahi wehenga morahi hei whakatakoto i te ripanga urupare ma te whakamahi .table-responsive{-sm|-md|-lg|-xl}.
Tope poutū/tapahi
Ka whakamahia e nga ripanga urupare te overflow-y: hidden, ka tope i nga ihirangi kei tua atu i nga tapa o raro, o runga ranei o te ripanga. Ina koa, ka taea e tenei te tango i nga tahua takaiho me etahi atu widget-tuatoru.
He urupare i nga wa katoa
Puta noa i nga waahi pakaru, whakamahia .table-responsivemo nga ripanga panuku whakapae.
Whakamahia .table-responsive{-sm|-md|-lg|-xl}ina hiahiatia hei hanga i nga ripanga urupare tae noa ki tetahi waahi pakaru. Mai i tera waahi pakaru me te piki ake, ka rite tonu te ahua o te ripanga kaore e panuku whakapae.
Ka pakaru pea enei ripanga kia tae ra ano o raatau momo urupare ki nga whanuitanga tauranga tiro motuhake.