Dokumentatsioon ja näited tabelite stiili valimiseks (arvestades nende levinud kasutamist JavaScripti pistikprogrammides) Bootstrapiga.
Sellel lehel
Ülevaade
Elementide laialdase kasutamise tõttu <table>kolmandate osapoolte vidinates, nagu kalendrid ja kuupäevavalijad, on Bootstrapi tabelid lubatud . Lisage põhiklass .tablemis tahes klassile <table>, seejärel laiendage seda meie valikuliste modifikaatoriklasside või kohandatud stiilidega. Kõik tabelistiilid ei ole Bootstrapis päritud, mis tähendab, et kõiki pesastatud tabeleid saab kujundada vanematest sõltumatult.
Kasutades kõige elementaarsemat tabelimärgistust, .tablenäeme Bootstrapis välja -põhised tabelid.
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@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>
Variandid
Kasutage tabelite, tabeliridade või üksikute lahtrite värvimiseks kontekstuaalseid klasse.
Klass
Pealkiri
Pealkiri
Vaikimisi
Kamber
Kamber
Esmane
Kamber
Kamber
Teisene
Kamber
Kamber
Edu
Kamber
Kamber
Oht
Kamber
Kamber
Hoiatus
Kamber
Kamber
Info
Kamber
Kamber
Valgus
Kamber
Kamber
Tume
Kamber
Kamber
<!-- 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>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Rõhutabelid
Triibulised read
Kasutage .table-stripedsebraribade lisamiseks mis tahes tabelireale <tbody>.
--bs-table-bgAlustuseks määrame kohandatud atribuudiga tabeli lahtri tausta . Seejärel määravad kõik tabeli variandid selle kohandatud atribuudi tabeli lahtrite värvimiseks. Nii ei jää me hätta, kui tabeli taustana kasutatakse poolläbipaistvaid värve.
Seejärel lisame tabeli lahtritele sisestuskasti varju, et kihtida mis box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);tahes määratud elemendi peale background-color. Kuna kasutame tohutut laialivalgust ja ilma hägususeta, on värv monotoonne. Kuna --bs-table-accent-bgon vaikimisi määramata, ei ole meil vaikekasti varju.
Kui lisatakse kas või .table-stripedklassid , määratakse tausta värvimiseks poolläbipaistev värv..table-hover.table-active--bs-table-accent-bg
Iga tabelivariandi jaoks genereerime --bs-table-accent-bgolenevalt sellest värvist suurima kontrastsusega värvi. Näiteks on aktsentvärv .table-primarytumedam, samas kui .table-darksellel on heledam aktsentvärv.
Teksti ja ääriste värvid genereeritakse samal viisil ning nende värvid päritakse vaikimisi.
Tabeli lahtrid <thead>on alati alaosaga vertikaalselt joondatud. Tabeli lahtrid <tbody>pärivad oma joonduse alates <table>ja joondatakse vaikimisi ülaosaga. Kasutage vertikaalse joondamise klasse, et vajadusel uuesti joondada.
Pealkiri 1
2. pealkiri
3. pealkiri
4. pealkiri
See lahter pärineb vertical-align: middle;tabelist
See lahter pärineb vertical-align: middle;tabelist
See lahter pärineb vertical-align: middle;tabelist
See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.
See lahter pärib vertical-align: bottom;tabelirealt
See lahter pärib vertical-align: bottom;tabelirealt
See lahter pärib vertical-align: bottom;tabelirealt
See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.
See lahter pärineb vertical-align: middle;tabelist
See lahter pärineb vertical-align: middle;tabelist
See lahter on joondatud ülaosaga.
See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.
<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>
Pesitsemine
Ääriste stiile, aktiivseid stiile ja tabelivariante pesastatud tabelid ei päri.
Et vältida stiilide lekkimist pesastatud tabelitesse, kasutame >CSS-is alamkombinaatori ( ) valijat. Kuna peame sihtima kõiki tds-i ja ths-id thead, tbody, ja tfoot, näeks meie valija ilma selleta üsna pikk. Seetõttu kasutame üsna veidra välimusega .table > :not(caption) > * > *valijat, et sihtida kõiki tds ja ths .table, kuid mitte ühtegi potentsiaalset pesastatud tabelit.
Pange tähele, et kui lisate <tr>s-id tabeli otseste alamrühmadena, <tr>mähitakse <tbody>need vaikimisi a-sse, mis paneb meie valijad töötama ettenähtud viisil.
Anatoomia
Laua pea
Sarnaselt tabelitele ja tumedatele tabelitele kasutage muuteklasse .table-lightvõi .table-darkselleks, et muuta <thead>need heledaks või tumehalliks.
Funktsioon <caption>toimib nagu tabeli pealkiri. See aitab ekraanilugejatega kasutajatel tabelit leida ja aru saada, millest see räägib, ning otsustada, kas nad soovivad seda lugeda.
Kasutajate loend
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Võite ka <caption>laua ülaosale asetada .caption-top.
Kasutajate loend
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Larry
lind
@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>
Vastuvõtlikud tabelid
Tundlikud tabelid võimaldavad tabeleid hõlpsalt horisontaalselt kerida. Muutke mis tahes tabel kõigis vaateavades tundlikuks, mähkides .tabletähega .table-responsive. Või valige maksimaalne katkestuspunkt, millega kohanemisvõimeline tabel saavutada, kasutades .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikaalne lõikamine/kärpimine
Tundlikud tabelid kasutavad funktsiooni overflow-y: hidden, mis lõikab ära igasuguse sisu, mis ulatub tabeli alumisest või ülemisest servast kaugemale. Eelkõige võib see välja lõigata rippmenüüd ja muud kolmanda osapoole vidinad.
Alati vastutulelik
.table-responsiveKasutage horisontaalselt kerivate tabelite jaoks igal murdepunktil .
Kasutage .table-responsive{-sm|-md|-lg|-xl|-xxl}vastavalt vajadusele tundlike tabelite loomiseks kuni konkreetse katkestuspunktini. Alates sellest katkestuspunktist ja ülespoole hakkab tabel käituma tavapäraselt ja ei keri horisontaalselt.
Need tabelid võivad tunduda katkised, kuni nende reageerivad stiilid rakenduvad teatud vaateava laiustele.