Стили для отображения содержимого с часто используемыми элементами HTML, включая типографику, изображения, таблицы и многое другое.
Таблицы
Из-за широкого использования таблиц для сторонних виджетов, таких как календари и сборщики дат, мы разработали наши таблицы так, чтобы они были opt-in (включаемые). Просто добавьте базовый класс .table к любому элементу <table>, затем расширьте его с помощью пользовательских стилей или наших различных включенных классов-модификаторов.
Используя самую базовую разметку таблицы, рассмотрим, как .table-based таблицы выглядят в Bootstrap. Все стили таблиц наследуются в Bootstrap 4, что означает, что вложенные таблицы будут создаваться таким же образом, как и родительские.
Добавьте .table-bordered для границ со всех сторон таблицы и ячеек.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Строки с наведением
Добавьте .table-hover, чтобы включить состояние наведения для строк таблицы внутри тега <tbody>.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
Маленькая таблица
Добавьте .table-sm, чтобы сделать таблицы более компактными, разрезая по ширине ячейки.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
Контекстные классы
Используйте контекстные классы, чтобы окрасить строки таблицы или отдельные ячеек.
Class
Description
.table-active
Applies the hover color to a particular row or cell
.table-success
Indicates a successful or positive action
.table-info
Indicates a neutral informative change or action
.table-warning
Indicates a warning that might need attention
.table-danger
Indicates a dangerous or potentially negative action
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
Обычные варианты фона таблицы недоступны в обратной таблице, однако вы можете использовать текстовые или фоновые утилиты для достижения подобных стилей.
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передаваться пользователям вспомогательных технологий, таких как скрин-ридеры (программы чтения с экрана). Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимого текста), либо включена с помощью альтернативных средств, например дополнительного текста, скрытого классом .sr-only.
Адаптивные таблицы
Создайте адаптивные таблицы, добавив .table-responsive к любой .table, чтобы они горизонтально прокручивались на маленьких устройствах (до 768 пикселей). При просмотре на чем-то большем, чем 768 пикселей, вы не увидите различий в этих таблицах.
Вертикальное отсечение/усечение
В адаптивных таблицах используется метод overflow-y: hidden, который отсекает любое содержимое, выходящее за нижний или верхний край таблицы. В частности, это может вырезать выпадающие меню и другие сторонние виджеты.
#
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
#
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Комментарии
На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.