Mikanda mpe bandakisa mpo na opt-in styling ya ba tableaux (na kotalaka bosaleli na yango mingi na ba plugins ya JavaScript) na Bootstrap.
Na lokasa oyo
Botali ya mozindo
Na ntina ya bosaleli mingi ya <table>biloko na kati ya ba widgets ya bato mosusu lokola ba calendriers mpe ba pickers ya mikolo, ba tableaux ya Bootstrap ezali opt-in . Bakisa classe ya base .tablena nionso <table>, sima extend na ba classes na biso ya modificateur optionnel to ba styles personnalisés. Ba styles nionso ya tableau e hériter te na Bootstrap, elingi koloba ba tableaux nionso oyo ekangami ekoki kozala style indépendamment na parent.
Kosalela marquage ya tableau ya moboko mingi, tala ndenge .tableba tableaux -based emonanaka na Bootstrap.
# .
Ya liboso
Nsuka
Kosalela
1. 1.
Marko
Otto
@mdo
2. 2
Yakobo
Thornton oyo azali
@mafuta
3
Larry ndeke
@twitter na 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>
Ba variantes
Salelá bakelasi ya contexte mpo na kopesa langi na ba tableaux, ba lignes ya tableau to ba cellules moko moko.
Kelasi
Motó ya likambo
Motó ya likambo
Mbeba
Selile
Selile
Ya liboso
Selile
Selile
Ebongiseli ya mibale
Selile
Selile
Kolonga
Selile
Selile
Likama
Selile
Selile
Likebisi
Selile
Selile
Info
Selile
Selile
Pole
Selile
Selile
Molili
Selile
Selile
<!-- 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>
Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.
Bamesa oyo ezali na accent
Milɔngɔ oyo ezali na bansinga
Salelá .table-stripedmpo na kobakisa zebra-striping na molɔngɔ́ nyonso ya mesa na kati ya <tbody>.
# .
Ya liboso
Nsuka
Kosalela
1. 1.
Marko
Otto
@mdo
2. 2
Yakobo
Thornton oyo azali
@mafuta
3
Larry ndeke
@twitter na twitter
<tableclass="table table-striped">
...
</table>
Ba classes oyo ekoki pe kobakisama na ba variantes ya tableau:
Tobandi na kotiya fond ya cellule ya tableau na --bs-table-bgpropriété personnalisée. Na sima ba variantes nionso ya tableau etie propriété personnalisée wana pona ko coloriser ba cellules ya tableau. Na ndenge oyo, tokotaka na problème te soki ba couleurs semi-transparentes esalelami lokola ba fond ya table.
Na sima tobakisi elili ya boîte d'inset na ba cellules ya tableau na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);na couche likolo ya nionso oyo elakisami background-color. Lokola tosalelaka spread moko ya monene mpe flou te, couleur ekozala monotone. Lokola --bs-table-accent-bgezali unset par défaut, tozali na ombre ya boîte par défaut te.
Ntango soit .table-striped, .table-hoverto .table-activebakelasi ebakisami, the --bs-table-accent-bgetiamaki na langi ya semitransparent mpo na kosala langi na fond.
Pona variante moko na moko ya tableau, tobimisaka --bs-table-accent-bgcouleur oyo ezali na contraste ya likolo selon couleur wana. Na ndakisa, langi ya accent mpo na .table-primaryezali moindo mingi nzokande .table-darkezali na langi ya accent ya pɛtɛɛ.
Balangi ya makomi mpe ya ndelo esalemi ndenge moko, mpe balangi na yango ezwamaka na ndenge ya libela.
Ba cellules ya table ya <thead>ezalaka toujours vertical aligné na se. Ba cellules ya tableau na <tbody>hériter alignment na bango na <table>pe ezo aligné na likolo par défaut. Salelá ba classes ya align vertical mpo na ko réaligner esika esengeli.
Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.
Cellule oyo ezuaka héritage vertical-align: bottom;na molongo ya tableau
Cellule oyo ezuaka héritage vertical-align: bottom;na molongo ya tableau
Cellule oyo ezuaka héritage vertical-align: bottom;na molongo ya tableau
Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.
Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.
<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>
Kosala zumbu
Ba styles ya ndelo, ba styles ya active, na ba variantes ya tableau e hériter te na ba tableaux encastrés.
Mpo na kopekisa ba styles nionso e fuite na ba tableaux encastrés, tosalelaka selecteur ya combinateur enfant ( >) na CSS na biso. Lokola tosengeli ko cibler ba tds na ths nionso na thead, tbody, na tfoot, sélecteur na biso elingaki komonana kitoko molayi sans yango. Lokola yango, tosalelaka .table > :not(caption) > * > *sélecteur oyo ezali komonana plutôt bizarre mpo na ko cibler ba tds mpe ths nionso ya .table, kasi moko te ya ba tableaux encastrés potentiels.
Yeba ete soki obakisi <tr>s lokola bana ya direct ya tableau moko, oyo <tr>ekozala enveloppé na a <tbody>par défaut, kosala bongo ba sélecteurs na biso esalaka ndenge ekanamaki.
Anatomie ya nzoto
Motó ya mesa
Ndenge moko na ba tableaux na ba tableaux ya molili, salela ba classes ya modificateur .table-lightto .table-darkpona kosala <thead>s emonana gris clair to foncé.
A <caption>esalaka lokola motó ya likambo mpo na mesa. Esalisaka basaleli oyo bazali na batángi ya écran báluka mesa mpe báyeba makambo oyo ezali kolobela mpe bázwa ekateli soki balingi kotánga yango.
Liste ya ba usagers
# .
Ya liboso
Nsuka
Kosalela
1. 1.
Marko
Otto
@mdo
2. 2
Yakobo
Thornton oyo azali
@mafuta
3
Larry ndeke
@twitter na twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Okoki mpe kotya oyo <caption>ezali likoló ya mesa na .caption-top.
Liste ya ba usagers
# .
Ya liboso
Nsuka
Kosalela
1. 1.
Marko
Otto
@mdo
2. 2
Yakobo
Thornton oyo azali
@mafuta
3
Larry, moto oyo azali
Ndɛkɛ yango
@twitter na 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>
Bamesa oyo ezali kopesa eyano
Ba tableaux oyo ezo répondre epesaka nzela ya ko défiler ba tableaux horizontalement na pete. Salá ete mesa nyonso ezala na eyano na kati ya bisika nyonso ya kotala na kozingaka .tablena .table-responsive. To, pona point de rupture maximum oyo okozala na tableau responsive jusqu'à na kosalelaka .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Kokata/kokata na vertical
Ba tableaux oyo ezo répondre esalaka usage ya overflow-y: hidden, oyo ezo cliper contenus nionso oyo eleki ba bords ya se to ya likolo ya table. Mingimingi, yango ekoki kokata ba menu oyo ezali kokita mpe ba widgets mosusu ya bato mosusu.
Koyanola ntango nyonso
Na kati ya esika nyonso ya kobuka, salelá .table-responsivempo na kosala défilement ya ba tableaux na ndenge ya horizontal.
Salelá .table-responsive{-sm|-md|-lg|-xl|-xxl}ndenge esengeli mpo na kosala ba tableaux oyo ezo répondre tii na point de rupture moko boye. Kobanda na point de rupture wana mpe likolo, tableau eko se comporter normalement mpe eko défiler horizontalement te.
Ba tableaux oyo ekoki komonana ebukani tii tango ba styles na yango ya réponse ekosalema na ba largeurs spécifiques ya port de vue.
Ba variables ya facteur ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) esalelamaka pona koyeba bokeseni na ba variantes ya tableau.
A part ba variantes ya table ya lumière & noir, ba couleurs ya thème ezo éclaircir na $table-bg-levelvariable.