TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать таблицы Bootstrap 5?

256

Bootstrap позволяет создавать красивые таблицы с помощью фреймворка CSS. В версии 4 есть несколько новых классов для инвертирования цвета таблицы и обеспечения адаптивности таблицы. С последней версией 5 вы также можете легко различать типы таблиц. В этом руководстве мы обсудим различные возможности создания таблиц с помощью Bootstrap 5. Вы можете скачать файлы, использованные в этом руководстве, здесь.

теги. В нашем примере давайте создадим простой лист оценок в формате таблицы с четырьмя именами учащихся (в строках) и пятью предметами со средним процентом (в столбцах). Ниже приведен код для таблицы начальной загрузки по умолчанию.

По умолчанию единственным классом CSS, необходимым для создания таблицы Bootstrap, является класс «table», применяемый непосредственно к элементу таблицы HTML. Вам не нужно создавать

тег для вставки таблиц в Bootstrap. Тег по умолчанию даст следующий результат:

Как создать таблицы Bootstrap 5?

Инвертирование цветов таблицы

Bootstrap 4 позволяет вам инвертировать цвет вашей таблицы, добавляя «table-inverse» к

ярлык. Фон станет темным, а текст – светлым. Код должен выглядеть так:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

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

Как создать таблицы Bootstrap 5?

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

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

ярлык.

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

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

Как создать таблицы Bootstrap 5?

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

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

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

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

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

Как создать таблицы Bootstrap 5?

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

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

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

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

Как создать таблицы Bootstrap 5?

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

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

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

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

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

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

Как создать таблицы Bootstrap 5?

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

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

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

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

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

Как создать таблицы Bootstrap 5?

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

Иногда необходимо уменьшить высоту стола, чтобы уменьшить занимаемое пространство. Bootstrap позволяет сделать это, добавляя класс table-sm к существующему классу table, как показано ниже:

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

Это удалит набивку и уменьшит высоту стола.

Как создать таблицы Bootstrap 5?

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

На данный момент мы обсудили создание простой таблицы или использование светло-серого фона по умолчанию для строк. 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>

Ниже показано, как будет выглядеть полная таблица, когда вы примените классы «таблица-успех», «таблица-предупреждение» и «опасность таблицы» ко второму, третьему и четвертому.

элементы таблицы.

Как создать таблицы Bootstrap 5?

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

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

<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 5?

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

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

В таблице ниже четыре ячейки с разными цветами фона применены случайным образом.

Как создать таблицы Bootstrap 5?

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

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

<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?


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


Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее