Документация и примери за избор на стил на таблици (като се има предвид преобладаващата им употреба в JavaScript добавки) с Bootstrap.
На тази страница
Преглед
Поради широкото използване на <table>елементи в уиджети на трети страни като календари и инструменти за избор на дати, таблиците на Bootstrap са opt-in . Добавете основния клас .tableкъм който и да е <table>, след което разширете с нашите незадължителни класове модификатори или персонализирани стилове. Всички стилове на таблици не се наследяват в Bootstrap, което означава, че всички вложени таблици могат да бъдат стилизирани независимо от родителя.
Използвайки най-основното маркиране на таблици, ето как .tableизглеждат базираните на таблици таблици в Bootstrap.
#
Първо
Последно
Дръжка
1
Марк
Ото
@mdo
2
Джейкъб
Торнтън
@дебел
3
Птицата Лари
@туитър
<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
Птицата Лари
@туитър
<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. Тъй като трябва да насочим всички tds и ths в thead, tbodyи tfoot, нашият селектор би изглеждал доста дълъг без него. Като такъв, ние използваме доста странно изглеждащия .table > :not(caption) > * > *селектор за насочване към всички tds и ths на .table, но нито една от потенциално вложени таблици.
Имайте предвид, че ако добавите <tr>s като директни деца на таблица, те <tr>ще бъдат обвити в a <tbody>по подразбиране, като по този начин нашите селектори работят по предназначение.
Анатомия
Глава на масата
Подобно на таблиците и тъмните таблици, използвайте модификаторните класове .table-lightили .table-dark, за да <thead>изглеждат светло или тъмно сиви.
A <caption>функционира като заглавие за таблица. Помага на потребителите с екранни четци да намерят таблица и да разберат за какво става въпрос и да решат дали искат да я прочетат.
Списък на потребителите
#
Първо
Последно
Дръжка
1
Марк
Ото
@mdo
2
Джейкъб
Торнтън
@дебел
3
Птицата Лари
@туитър
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Можете също да поставите най <caption>-отгоре на масата с .caption-top.
Списък на потребителите
#
Първо
Последно
Дръжка
1
Марк
Ото
@mdo
2
Джейкъб
Торнтън
@дебел
3
Лари
птицата
@туитър
<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>
Отзивчиви маси
Отзивчивите таблици позволяват лесно превъртане на таблиците хоризонтално. Направете всяка таблица отзивчива във всички прозорци, като обвиете a .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променливата.