Как создавать таблицы в 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>

У обратной таблицы будет очень темный и привлекательный фон, как показано ниже:

Обратная таблица Bootstrap

Таблица обратного заголовка

В предыдущем случае класс «table-inverse» применялся ко всей таблице. Bootstrap 4 также позволяет инвертировать только цвет фона заголовка и текста. Чтобы инвертировать заголовок, просто добавьте класс thead-inverse к тегу

.

<table class="table">
<thead class="thead-inverse">
</thead>
</table>

И наша таблица с метками будет иметь черную строку заголовка, как показано ниже:

Таблица обратных заголовков Bootstrap

Это не все!!! С Bootstrap есть еще много возможностей. Создадим еще несколько вариаций.

Полосатый стол Bootstrap 4

Полосатая таблица позволяет создавать альтернативные цвета для строк. Просто добавьте «таблица с полосами» к существующему классу «таблица», и таблица будет иметь узор с полосами. Светло-серый цвет фона будет применен ко всем строкам с нечетными номерами, начиная с первой строки.

<table class="table table-striped">
</table>

Полосатая таблица в основном предпочтительна для разделения строк и демонстрации содержимого посетителям.

Таблица с границами Bootstrap

Это просто добавит границу в таблицу по умолчанию. Что вам нужно, так это добавить класс «с рамкой таблицы» к существующему классу «таблица».

<table class="table table-bordered">
</table>

Наша таблица пометок с рамкой должна выглядеть, как показано ниже:

Таблица с границами Bootstrap

Вы также можете легко создать таблицу с границами с полосами на строках.

<table class="table table-striped table-bordered">
</table>

Таблица с эффектами наведения на строки

Как насчет добавления эффектов наведения к вашей таблице? Класс table-hover сделает это за вас. Наведите указатель мыши на таблицу, чтобы увидеть, что соответствующая строка выделена светло-серым цветом фона.

<table class="table table-hover">
</table>

Ниже показано, как ваша таблица должна выглядеть, когда вы наводите указатель мыши на вторую строку.

Таблица эффектов при наведении курсора на строку Bootstrap

Адаптивная таблица начальной загрузки для устройств размером менее 768 пикселей

Создать адаптивную таблицу в Bootstrap 4 очень просто. Вам не нужно добавлять дополнительный

для повышения отзывчивости. Просто вставьте класс «реагирующий на таблицу», горизонтальная полоса прокрутки будет автоматически добавлена ​​к таблице при просмотре в браузере с размером экрана ниже 768 пикселей.

<table class="table table-responsive">
</table>

Вот как будет выглядеть наша адаптивная таблица. Помните, что горизонтальная полоса прокрутки появляется только тогда, когда таблица просматривается на экране размером менее 768 пикселей. В противном случае вы не найдете никакой разницы по сравнению с обычной таблицей Bootstrap.

Адаптивная таблица 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» ко второму, третьему и четвертому элементам

таблицы.

Таблицы Bootstrap 4 с контекстными классами

Цветные строки с цветами фона

Как и в случае с контекстными классами таблиц, вы можете применять цвета фона к строкам с помощью контекстных классов фона.

<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 4 с цветами фона

Цветные ячейки с контекстными классами

К каждой ячейке таблицы 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>

Вот как будет выглядеть примерная таблица с различными цветами, примененными к строкам и ячейкам.

Таблица начальной загрузки с контекстными и фоновыми цветами

Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.