Как создавать таблицы в Bootstrap 5?
<
div itemprop=»articleBody»>
Bootstrap позволяет создавать красивые таблицы с помощью фреймворка CSS. В версии 4 есть несколько новых классов для инвертирования цвета таблицы и обеспечения адаптивности таблицы. С последней версией 5 вы также можете легко различать типы таблиц. В этом руководстве мы обсудим различные возможности создания таблиц с помощью Bootstrap 5. Вы можете загрузить файлы, использованные в этом руководстве. здесь.
Таблица начальной загрузки 5 по умолчанию
Таблица начальной загрузки использует все теги таблицы HTML с заголовком внутри
и телом таблицы внутри тегов. В нашем примере давайте создадим простой лист оценок в формате таблицы с четырьмя именами учащихся (в строках) и пятью предметами со средним процентом (в столбцах). Ниже приведен код для таблицы начальной загрузки по умолчанию.<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Table -->
<table class="table">
<thead>
<tr>
<th>Student Name</th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
<th>Sub4</th>
<th>Sub5</th>
<th>%</th>
</tr>
</thead>
<tbody> <tr>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
<td>Peter</td>
<td>100</td>
<td>90</td>
<td>68</td>
<td>75</td>
<td>89</td>
<td>84.4</td>
</tr>
<tr>
<td>John</td>
<td>55</td>
<td>43</td>
<td>57</td>
<td>76</td>
<td>45</td>
<td>55.2</td>
</tr>
<tr>
<td>Kelly</td>
<td>84</td>
<td>76</td>
<td>89</td>
<td>76</td>
<td>90</td>
<td>83</td>
</tr>
</tbody>
</table>
<!-- End of Table -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>По умолчанию единственным классом CSS, необходимым для создания таблицы Bootstrap, является класс «table», применяемый непосредственно к элементу таблицы HTML. Вам не нужно создавать тег
<
div> для вставки таблиц в Bootstrap. Тег по умолчанию даст следующий результат:
Инвертирование цветов таблицы
Bootstrap 4 позволяет вам инвертировать цвет вашей таблицы, добавляя «table-inverse» к тегу
<
table>. Фон станет темным, а текст — светлым. Код должен выглядеть так:
<table class="table table-inverse">
All content remains same here similar to default table.
<table>У обратной таблицы будет очень темный и привлекательный фон, как показано ниже:
Таблица обратного заголовка
В предыдущем случае класс «table-inverse» применялся ко всей таблице. Bootstrap 4 также позволяет инвертировать только цвет фона заголовка и текста. Чтобы инвертировать заголовок, просто добавьте класс thead-inverse к тегу
.<table class="table">
<thead class="thead-inverse">
</thead>
</table>И наша таблица с метками будет иметь черную строку заголовка, как показано ниже:
Это не все!!! С Bootstrap есть еще много возможностей. Создадим еще несколько вариаций.
Полосатый стол Bootstrap 4
Полосатая таблица позволяет создавать альтернативные цвета для строк. Просто добавьте «таблица с полосами» к существующему классу «таблица», и таблица будет иметь узор с полосами. Светло-серый цвет фона будет применен ко всем строкам с нечетными номерами, начиная с первой строки.
<table class="table table-striped">
</table>Полосатая таблица в основном предпочтительна для разделения строк и демонстрации содержимого посетителям.
Таблица с границами Bootstrap
Это просто добавит границу в таблицу по умолчанию. Что вам нужно, так это добавить класс «с рамкой таблицы» к существующему классу «таблица».
<table class="table table-bordered">
</table>Наша таблица пометок с рамкой должна выглядеть, как показано ниже:
Вы также можете легко создать таблицу с границами с полосами на строках.
<table class="table table-striped table-bordered">
</table>Таблица с эффектами наведения на строки
Как насчет добавления эффектов наведения к вашей таблице? Класс table-hover сделает это за вас. Наведите указатель мыши на таблицу, чтобы увидеть, что соответствующая строка выделена светло-серым цветом фона.
<table class="table table-hover">
</table>Ниже показано, как ваша таблица должна выглядеть, когда вы наводите указатель мыши на вторую строку.
Адаптивная таблица начальной загрузки для устройств размером менее 768 пикселей
Создать адаптивную таблицу в Bootstrap 4 очень просто. Вам не нужно добавлять дополнительный
для повышения отзывчивости. Просто вставьте класс «реагирующий на таблицу», горизонтальная полоса прокрутки будет автоматически добавлена к таблице при просмотре в браузере с размером экрана ниже 768 пикселей.
<table class="table table-responsive">
</table>Вот как будет выглядеть наша адаптивная таблица. Помните, что горизонтальная полоса прокрутки появляется только тогда, когда таблица просматривается на экране размером менее 768 пикселей. В противном случае вы не найдете никакой разницы по сравнению с обычной таблицей Bootstrap.
Таблица начальной загрузки со сжатым текстом
Иногда необходимо уменьшить высоту стола, чтобы уменьшить занимаемое пространство. Bootstrap позволяет сделать это, добавляя класс table-sm к существующему классу table, как показано ниже:
<table class="table table-sm">
</table>Это удалит набивку и уменьшит высоту стола.
Создание таблицы начальной загрузки с цветом фона
На данный момент мы обсудили создание простой таблицы или использование светло-серого фона по умолчанию для строк. Bootstrap также позволяет раскрашивать ячейки и строки таблицы, чтобы сделать ее красивой. Вы можете выделить любые строки или любые ячейки таблицы пятью разными цветами. Есть два набора классов CSS, которые помогут вам добавить цвета фона: один — это контекстные классы, а другой — вспомогательные классы фона. В таблице ниже описаны различные доступные варианты:
| Таблица контекстных классов | |
| таблица активна | Светло-серый цвет при наведении |
| таблица успеха | Светло-зеленый успех или позитивное действие |
| информация о таблице | Голубой для информационного сообщения |
| таблица-предупреждение | Светло-желтый для индикации предупреждения |
| опасность за столом | Светло-красный для обозначения опасности |
| таблица-первичный | Светло-синий для обозначения основного цвета в Bootstrap |
| стол вторичный | Светло-красный для обозначения опасности |
| настольная лампа | Светло-серый для обозначения отсутствия цвета |
| стол-темный | Светло-черный для обозначения темноты |
| Фоновая служебная программа / контекстные классы | |
| bg-primary | Средний синий как основной цвет |
| bg-успех | Зеленый лес для успеха |
| bg-предупреждение | Свобода слова зеленого цвета для предупреждения |
| bg-info | Светло-зеленый для информации |
| bg-опасность | Красный (Киноварь) для опасности |
| bg-light | Одиночество для света |
| bg-dark | Цвет Mirage для темных |
| bg-вторичный | Цвет алюминия для вторичного |
Помните, что эти классы могут применяться к отдельным строкам и ячейкам таблицы Bootstrap в любой комбинации.
Цветные строки с контекстными классами
Давайте применим контекстные классы в нашей таблице отметок, чтобы увидеть их в действии. Код ниже применяет класс «table-active» к первой строке таблицы, чтобы изменить цвет фона на светло-серый.
<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>Ниже показано, как будет выглядеть полная таблица, когда вы примените классы «table-success», «table-warning» и «table-dangerous» ко второму, третьему и четвертому элементам
Цветные строки с цветами фона
Как и в случае с контекстными классами таблиц, вы можете применять цвета фона к строкам с помощью контекстных классов фона.
<table class="table">
<tr class="bg-success">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>Ниже приведена привлекательная таблица, в которой к строкам применены классы «bg-success», «bg-dangerous», «bg-warning», «bg-info» и другие вспомогательные классы фона.
Цветные ячейки с контекстными классами
К каждой ячейке таблицы Bootstrap можно применить один из контекстных классов, чтобы выделить его из других ячеек. Это будет действительно полезно, когда у вас большая таблица и вы хотите выделить только несколько ячеек. В коде ниже показано применение контекстного класса «table-active» к ячейке таблицы.
<table class="table">
<tr>
<td>Thomas</td>
<td class="table-active">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>В таблице ниже четыре ячейки, произвольно примененные с разными цветами фона.
Цветные строки и ячейки с фоновыми цветами и контекстными классами
Наконец, вы можете применить контекстный класс таблицы и контекстный класс фона в любой комбинации, чтобы сделать разные цвета фона для строк и ячеек.
<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td class="table-info">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td class="bg-success">79</td>
</tr> <tr>
</table>Вот как будет выглядеть примерная таблица с различными цветами, примененными к строкам и ячейкам.
