Дакументацыя і прыклады выбарнага стылю табліц (улічваючы іх шырокае выкарыстанне ў плагінах JavaScript) з дапамогай Bootstrap.
На гэтай старонцы
Агляд
З-за шырокага выкарыстання <table>элементаў у віджэтах іншых вытворцаў, такіх як календары і сродкі выбару даты, табліцы Bootstrap даступныя для выбару . Дадайце базавы клас .tableу любы <table>, а затым пашырыце з дапамогай нашых дадатковых класаў-мадыфікатараў або карыстацкіх стыляў. Усе стылі табліц не ўспадкоўваюцца ў Bootstrap, гэта значыць любыя ўкладзеныя табліцы могуць быць стылізаваны незалежна ад бацькоўскай.
Выкарыстоўваючы самую базавую разметку табліц, вось як .tableтабліцы на аснове выглядаюць у Bootstrap.
#
Першы
Апошні
Ручка
1
Марк
Ота
@mdo
2
Якаў
Торнтан
@тоўсты
3
Птушка Лары
@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>
Варыянты
Выкарыстоўвайце кантэкстныя класы для афарбоўкі табліц, радкоў табліцы або асобных вочак.
Клас
Загаловак
Загаловак
Па змаўчанні
Сотавы
Сотавы
Першасны
Сотавы
Сотавы
Другасны
Сотавы
Сотавы
Поспех
Сотавы
Сотавы
Небяспека
Сотавы
Сотавы
Папярэджанне
Сотавы
Сотавы
Інфармацыя
Сотавы
Сотавы
Святло
Сотавы
Сотавы
Цёмны
Сотавы
Сотавы
<!-- 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>
Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (напрыклад, бачнага тэксту), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .visually-hiddenкласам.
Акцэнтнымі сталы
Паласатыя шэрагі
Выкарыстоўвайце .table-striped, каб дадаць зебрападобныя паласы ў любы радок табліцы ў <tbody>.
#
Першы
Апошні
Ручка
1
Марк
Ота
@mdo
2
Якаў
Торнтан
@тоўсты
3
Птушка Лары
@twitter
<tableclass="table table-striped">
...
</table>
Гэтыя класы таксама можна дадаць да варыянтаў табліцы:
Мы пачынаем з усталявання фону ячэйкі табліцы з --bs-table-bgкарыстацкім уласцівасцю. Затым усе варыянты табліц задаюць карыстальніцкую ўласцівасць для афарбоўвання вочак табліцы. Такім чынам, мы не патрапім у праблемы, калі напаўпразрыстыя колеры выкарыстоўваюцца ў якасці фону стала.
Затым мы дадаем цень устаўленага поля на ячэйкі табліцы з дапамогай box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);пласта паверх любога ўказанага background-color. Паколькі мы выкарыстоўваем вялікі роскід і адсутнасць размыцця, колер будзе аднатонным. Паколькі --bs-table-accent-bgпа змаўчанні не ўстаноўлена, у нас няма цені поля па змаўчанні.
Пры дадаванні класаў або .table-striped, усталёўваецца напаўпразрысты колер для афарбоўвання фону..table-hover.table-active--bs-table-accent-bg
Для кожнага варыянту табліцы мы ствараем --bs-table-accent-bgколер з найбольшай кантраснасцю ў залежнасці ад гэтага колеру. Напрыклад, колер акцэнту .table-primaryбольш цёмны, а .table-darkколер акцэнту больш светлы.
Колеры тэксту і межаў ствараюцца такім жа чынам, і іх колеры ўспадкоўваюцца па змаўчанні.
Ячэйкі табліцы <thead>заўсёды вертыкальна выраўнаваны па нізе. Ячэйкі табліцы <tbody>ўспадкоўваюць сваё выраўноўванне <table>і па змаўчанні выраўноўваюцца паверсе. Выкарыстоўвайце класы вертыкальнага выраўноўвання , каб паўторна выраўнаваць, дзе гэта неабходна.
Загаловак 1
Загаловак 2
Загаловак 3
Загаловак 4
Гэтая ячэйка ўспадкоўваецца vertical-align: middle;ад табліцы
Гэтая ячэйка ўспадкоўваецца vertical-align: middle;ад табліцы
Гэтая ячэйка ўспадкоўваецца vertical-align: middle;ад табліцы
Гэта тэкст-запаўняльнік, прызначаны для таго, каб заняць даволі шмат вертыкальнай прасторы, каб прадэманстраваць, як працуе вертыкальнае выраўноўванне ў папярэдніх ячэйках.
Гэта ячэйка ўспадкоўвае vertical-align: bottom;радок табліцы
Гэта ячэйка ўспадкоўвае vertical-align: bottom;радок табліцы
Гэта ячэйка ўспадкоўвае vertical-align: bottom;радок табліцы
Гэта тэкст-запаўняльнік, прызначаны для таго, каб заняць даволі шмат вертыкальнай прасторы, каб прадэманстраваць, як працуе вертыкальнае выраўноўванне ў папярэдніх ячэйках.
Гэтая ячэйка ўспадкоўваецца vertical-align: middle;ад табліцы
Гэтая ячэйка ўспадкоўваецца vertical-align: middle;ад табліцы
Гэтая ячэйка выраўнавана па версе.
Гэта тэкст-запаўняльнік, прызначаны для таго, каб заняць даволі шмат вертыкальнай прасторы, каб прадэманстраваць, як працуе вертыкальнае выраўноўванне ў папярэдніх ячэйках.
<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>
Гняздаванне
Стылі межаў, актыўныя стылі і варыянты табліц не ўспадкоўваюцца ўкладзенымі табліцамі.
Каб прадухіліць уцечку стыляў ва ўкладзеныя табліцы, мы выкарыстоўваем >селектар даччынага камбінатара ( ) у нашым CSS. Паколькі нам трэба нацэліць на ўсе tdс і thс у thead, tbodyі tfoot, наш селектар без яго выглядаў бы даволі доўга. Такім чынам, мы выкарыстоўваем даволі дзіўна выглядаючы .table > :not(caption) > * > *селектар, каб нацэліць на ўсе tds і ths .table, але ні на адну патэнцыйна ўкладзеную табліцу.
Звярніце ўвагу, што калі вы дадаяце <tr>s у якасці прамых даччыных элементаў табліцы, яны <tr>будуць абгорнутыя ў a <tbody>па змаўчанні, дзякуючы чаму нашы селектары будуць працаваць належным чынам.
Анатомія
Галава стала
Падобна табліцам і цёмным табліцам, выкарыстоўвайце класы-мадыфікатары .table-lightабо .table-dark, каб яны <thead>выглядалі светла- або цёмна-шэрымі.
Функцыянуе <caption>як загаловак табліцы. Гэта дапамагае карыстальнікам з праграмамі чытання з экрана знайсці табліцу і зразумець, пра што яна, а таксама вырашыць, ці хочуць яны яе прачытаць.
Спіс карыстальнікаў
#
Першы
Апошні
Ручка
1
Марк
Ота
@mdo
2
Якаў
Торнтан
@тоўсты
3
Птушка Лары
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Вы таксама можаце паставіць <caption>уверсе табліцы з дапамогай .caption-top.
Спіс карыстальнікаў
#
Першы
Апошні
Ручка
1
Марк
Ота
@mdo
2
Якаў
Торнтан
@тоўсты
3
Лары
птушка
@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>
Адаптыўныя табліцы
Адаптыўныя табліцы дазваляюць з лёгкасцю пракручваць табліцы гарызантальна. .tableЗрабіце любую табліцу спагаднай ва ўсіх вокнах прагляду , абгарнуўшы .table-responsive. Або выберыце максімальную кропку перапынку, з якой будзе мець адаптыўную табліцу, выкарыстоўваючы .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Вертыкальнае абразанне/абсячэнне
Адаптыўныя табліцы выкарыстоўваюць overflow-y: hidden, які выразае любы кантэнт, які выходзіць за ніжні або верхні край табліцы. У прыватнасці, гэта можа адрэзаць выпадальныя меню і іншыя віджэты іншых вытворцаў.
Заўсёды спагадны
Праз кожную кропку перапынку выкарыстоўвайце .table-responsiveдля гарызантальнай пракруткі табліц.
Выкарыстоўвайце .table-responsive{-sm|-md|-lg|-xl|-xxl}пры неабходнасці для стварэння адаптыўных табліц да пэўнай кропкі перапынку. Пачынаючы з гэтай кропкі перапынку і ўверх, табліца будзе паводзіць сябе нармальна і не будзе пракручвацца па гарызанталі.
Гэтыя табліцы могуць выглядаць зламанымі, пакуль іх адаптыўныя стылі не будуць прымяняцца пры пэўнай шырыні акна прагляду.
Фактарныя зменныя ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) выкарыстоўваюцца для вызначэння кантрасту ў таблічных варыянтах.
Акрамя светлых і цёмных варыянтаў табліцы, колеры тэмы асвятляюцца з дапамогай $table-bg-levelзменнай.