ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Умен лишь тот, кто так же глуп, как мы (Д. Дидро).

Bootstrap – Таблицы

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Таблицы
Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые из элементов таблицы поддерживаемых Bootstrap, являются:

 

 

 

Тег Описание
<table> Обертывание элемента для отображения данных в табличном формате
<thead> Элемент контейнера для заголовка таблицы строк, с (<tr>) для заголовка таблицы столбцов.
<tbody> Элемент контейнера для строк таблицы (<tr>) в теле таблицы.
<tr> Элемент контейнера для набора ячеек таблицы (<td> или <th>), которые появляется на одной строке.
<td> По умолчанию ячейки таблицы.
<th> Специальная ячейка таблицы для столбца (или строки, в зависимости от объема и размещения) заголовков. Должен быть использован в пределах <thead>
<caption> Описание или резюме того, что имеет место в таблице.

Базовая таблица

Если вы хотите хороший, основной стиль таблицы с только некоторыми световым отступов и горизонтальными разделителями, добавьте базовый класс .table для любой таблицы, как показано в следующем примере:

 

Необязательные классы в таблице

Наряду с базовой разметкой таблиц и класса .table, есть несколько дополнительных классов, которые вы можете использовать, в качестве стиля разметки. Следующие разделы дадут вам представление о всех этих классах.

Полосатая Таблица

Добавляя класса .table-striped, вы получите полосы на границах строк в пределах <tbody>, как показано в следующем примере:

 

Окаймленная таблица

Добавляя класс .table-bordered, вы получите границы вокруг каждого элемента и закругленные углы вокруг всей таблицы, как показано в следующем примере:

 

Hover в таблице

При добавлении класса .table-hover, светло-серый фон будет добавлен к строкам, когда курсор находится над ними, как показано в следующем примере:

 

Сокращенная таблица

Путем добавления класса .table-condensed, рамка строки разрезается пополам, чтобы сжать таблицу, как показано в следующем примере. Это полезно, если вы хотите указать какую-либо более плотную информацию.

 

Контекстные классы

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

Класс Описание
.active Применяется цвет при наведении к конкретной строке или ячейке
.success Указывает на успешное или положительное действие
.warning Указывает на предупреждение, что, возможно, потребуется внимание
.danger Указывает на опасное или потенциально негативное действие

Эти классы могут быть применены к <tr>, <td> или <th>.

 

Отзывчивые таблицы

При упаковке любого .table в класс .table-responsive, вы создадите в таблице прокрутку по горизонтали на небольших устройств (под 768px). При просмотре на что-либо большее, чем 768px в ширину, вы не увидите никакой разницы в этих таблицах.

 

Bootstrap - Таблицы

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close