ОСНОВНОЕ

WORDPRESS

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

Базы данных

Фреймворк Bootstrap

Остановиться можно при подъеме, но не при падении (Наполеон I).

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