Sɛbɛnw ni misaliw tabali cogoya sugandicogo la (ka da u baaracogo kan JavaScript plugins kɔnɔ) ni Bootstrap ye.
Nin ɲɛ in kan
Kuma bɛɛ lajɛlen
K’a sababu Kɛ fɛnw baaracogo caya ye <table>mɔgɔ sabananw ka wideyow ‘kɔnɔ i n’a fɔ kalandriyaw ani donw jatebɔlanw, Bootstrap ka tabali ye opt-in ye . Aw bɛ basigi kalasi fara a kan .table, <table>o kɔ aw bɛ a janya ni an ka kalasi modificateur optionnels ye walima custom styles. Tabali cogoyaw bɛɛ tɛ ciyɛn ta Bootstrap kɔnɔ, o kɔrɔ ye ko tabali minnu bɛ sigi sen kan, olu bɛɛ bɛ se ka cogoya kɛ u yɛrɛma ka bɔ bangebaga la.
Baara kɛli ni tabali taamasiyɛn jɔnjɔnba ye, nin ye .table-based tabali bɛ cogo min na Bootstrap kɔnɔ.
# Bamako .
Fɔlɔ
Laban
Kala
1 ye
Marka
Otto ye
@mdo ye
2 ye
Yakuba
Thornton ye
@belebeleba
3 ye
Larry ka Kɔnɔ
@twitter kan
<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>
A ɲɔgɔnnaw
Baara kɛ ni sigida kalanw ye walasa ka tabali, tabali sinsinni walima selilɛri kelen-kelenw kulɛri.
Kilasi
Kumakun
Kumakun
Fɔlɔ
Selili
Selili
Fɔlɔ
Selili
Selili
Seginnkanni
Selili
Selili
Sanga
Selili
Selili
Farati
Selili
Selili
Lasɔmi
Selili
Selili
Info
Selili
Selili
Yeelen
Selili
Selili
Dibi
Selili
Selili
<!-- 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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma
Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.
Tabali minnu bɛ ni accent ye
Layini sɛrɛkiliw
Aw bɛ baara kɛ ni .table-stripedzebra-striping fara tabali jirisun o tabali kan <tbody>.
# Bamako .
Fɔlɔ
Laban
Kala
1 ye
Marka
Otto ye
@mdo ye
2 ye
Yakuba
Thornton ye
@belebeleba
3 ye
Larry ka Kɔnɔ
@twitter kan
<tableclass="table table-striped">
...
</table>
O kalanw fana bɛ se ka fara tabali suguya wɛrɛw kan:
An bɛ daminɛ ni tabali selilɛri dɔ kɔkanna sigili ye ni --bs-table-bgladamucogo ye. O kɔfɛ, tabali suguya bɛɛ bɛ o ladamucogo sigi walasa ka tabali seliw kulɛri. O cogo la, an tɛ gɛlɛya sɔrɔ ni kulɛri tilayɔrɔbaw bɛ kɛ tabali kɔkanna ye.
o kɔfɛ , an bɛ inset box shadow dɔ fara tabali seliw kan ni box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ye min ɲɛfɔlen don background-color. Komin an bɛ baara Kɛ ni spread belebele ye ani blur tɛ, a kulɛri bɛna Kɛ monotone ye. Komin --bs-table-accent-bgis unset by default, an tɛ default box shadow sɔrɔ.
Ni .table-striped, .table-hoverwalima .table-activekalanw farala ɲɔgɔn kan, the --bs-table-accent-bgbɛ sigi kulɛri semitransparent la walasa ka kɔkanna kulɛri.
Tabali suguya kelen-kelen bɛɛ la, an bɛ --bs-table-accent-bgkulɛri dɔ Bɔ min ka danfara ka bon ka Kɛɲɛ ni o kulɛri ye. Misali la, accent color for .table-primaryye dibi ye k’a sɔrɔ .table-darka accent kulɛri ka nɔgɔn.
Sɛbɛnni ni dankan kulɛriw bɛ dilan cogo kelen na, wa u kulɛriw bɛ ciyɛn ta ka kɛɲɛ ni u yɛrɛ ye.
Tabali seliw of <thead>bɛ jɔlen to tuma bɛɛ ka kɛɲɛ ni duguma ye. Tabali seliw in bɛ <tbody>u ka ɲɔgɔndan ciyɛn ta ka bɔ <table>ani u bɛ labɛn ka taa sanfɛ ka kɛɲɛ ni u ka daminɛ ye. Baara kɛ ni vertical align classes ye walasa ka segin ka ɲɔgɔn sɔrɔ yɔrɔ min na a mago bɛ a la.
Kumakun 1nan
Kumakun 2nan
Kumakun 3nan
Kumakun 4nan
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la
Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na
O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na
O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na
Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la
O selilɛri in bɛ ɲɔgɔn sɔrɔ ka kɛɲɛ ni sanfɛla ye.
Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
<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 (kɔnɔnafili).
Danyɔrɔ cogoyaw, cogoya minnu bɛ baara la, ani tabali suguya caman tɛ ciyɛn ta tabali minnu bɛ sigi sen kan.
Walasa ka cogoya si bali ka wuli ka taa tabali nestedw la, an bɛ baara kɛ ni denmisɛnw faralen ɲɔgɔn kan ( >) sugandilan ye an ka CSS kɔnɔ. tdKomin an ka kan ka s ni ths bɛɛ laɲini thead, tbody, ani tfoot, an ka sugandili bɛna janya kosɛbɛ n'a tɛ. O cogo la, an bɛ baara Kɛ ni sugandilikɛlan ye min ɲɛ ye gansan ye kosɛbɛ walasa ka s ni s .table > :not(caption) > * > *bɛɛ Laɲini , nka tabali minnu bɛ Se ka Kɛ nest ye olu si tɛ.tdth.table
A kɔlɔsi ko n’i ye <tr>s Fàra ɲɔgɔn kan i n’a fɔ tabali denw tilennen, olu <tr>bɛna siri a la ka <tbody>da a kan, o cogo la an ka sugandilikɛlaw bɛ baara Kɛ i n’a fɔ a laɲininen dòn cogo min na.
Anatomie (Anatomie).
Tabali kunkolo
I n’a fɔ tabali ni tabali dibimanw, baara kɛ ni modificateur classes ye .table-lightwalima .table-darkka <thead>s kɛ i n’a fɔ a ɲɛ ye jɛman ye walima a ɲɛ ye nɛrɛmuguma ye.
A bɛ <caption>baara kɛ i n’a fɔ tabali kuncɛ. A bɛ baarakɛlaw dɛmɛ ni ɛkran kalanbagaw ye walasa u ka tabali sɔrɔ ani k’a faamuya a bɛ min kan ani k’a latigɛ n’u b’a fɛ k’a kalan.
Baarakɛlaw tɔgɔw sɛbɛn
# Bamako .
Fɔlɔ
Laban
Kala
1 ye
Marka
Otto ye
@mdo ye
2 ye
Yakuba
Thornton ye
@belebeleba
3 ye
Larry ka Kɔnɔ
@twitter kan
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Aw bɛ se ka a bila fana <caption>tabali sanfɛ ni .caption-top.
Baarakɛlaw tɔgɔw sɛbɛn
# Bamako .
Fɔlɔ
Laban
Kala
1 ye
Marka
Otto ye
@mdo ye
2 ye
Yakuba
Thornton ye
@belebeleba
3 ye
Larry ye
Kɔnɔ in
@twitter kan
<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>
Tabali minnu bɛ jaabi di
Tabali minnu bɛ jaabi di, olu b’a to tabali bɛ se ka wuli ka taa a fɛ ni nɔgɔya ye. Aw bɛ tabali o tabali kɛ jaabi ye filɛlikɛlanw bɛɛ kɔnɔ ni aw ye a siri .tableni .table-responsive. Walima, aw bɛ kariyɔrɔba dɔ sugandi min bɛ se ka jaabi tabali sɔrɔ ni min ye ni aw bɛ baara kɛ ni .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Clipping/truncation jɔlen
Tabali minnu bɛ jaabi di, olu bɛ baara kɛ ni overflow-y: hidden, min bɛ kunnafoni fɛn o fɛn bɛ tɛmɛ tabali duguma walima sanfɛ dakunw kan, o bɛ tigɛ. Kɛrɛnkɛrɛnnenya la, o bɛ se ka clip off dropdown menus ani mɔgɔ wɛrɛw ka widget wɛrɛw bɔ.
A bɛ jaabi di tuma bɛɛ
Kariyɔrɔ kelen-kelen bɛɛ kan, aw bɛ baara kɛ ni .table-responsivetabali ye min bɛ wuli ka taa a fɛ.
Baara kɛ .table-responsive{-sm|-md|-lg|-xl|-xxl}i n’a fɔ a mago bɛ cogo min na walasa ka jaabi tabali dilan fo ka se kariyɔrɔ kɛrɛnkɛrɛnnen dɔ ma. Ka bɔ o kariyɔrɔ la ka taa san fɛ, tabali bɛna kɛ cogo la min bɛ kɛ cogo la, wa a tɛna wuli ka taa a fɛ.
O tabali ninnu bɛ se ka kɛ i n’a fɔ u karilen don fo u jaabi cogoyaw ka baara kɛ filɛlikɛyɔrɔw bonya kɛrɛnkɛrɛnnenw na.