HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по Bootstrap 3

БС ДОМ БС Начать Базовая сетка BS Типография БС Таблицы БС Изображения БС БС Джамботрон БС Уэллс Оповещения о BS Кнопки БС Группы кнопок BS BS Глификоны Значки/этикетки BS Индикаторы прогресса BS БС Пагинация БС пейджер Группы списка BS БС Панели Выпадающие списки БС Свернуть БС Таблетки/таблетки BS БС Навбар БС Формы Входы БС Входы БС 2 Размер ввода BS Медиа-объекты BS БС Карусель BS Модальный Подсказка БС БС Поповер БС прокрутки BS-аффикс БС фильтры

Сетки начальной загрузки

Сетевая система БС BS Сложенный/горизонтальный BS Сетка Малая Сетка BS средняя BS Сетка Большая Примеры сетки BS

Загрузочные темы

Шаблоны БС Тема BS "Просто я" Тема BS "Компания" Тема BS "Группа"

Примеры начальной загрузки

Примеры БС викторина БС Упражнения Сертификат БС

Bootstrap CSS Ref

CSS все классы CSS типографика CSS-кнопки CSS-формы CSS-помощники CSS-изображения CSS-таблицы Выпадающие списки CSS CSS-навигация Глификоны

Bootstrap JS ссылка

JS-аффикс JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS-подсказка


Начальные таблицы

❮ Предыдущий Следующий ❯

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

Базовая таблица Bootstrap имеет легкое заполнение и только горизонтальные разделители.

Класс .tableдобавляет к таблице базовые стили:

Пример

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Полосатые ряды

Класс .table-stripedдобавляет полоски зебры в таблицу:

Пример

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Стол с рамкой

Класс .table-borderedдобавляет границы со всех сторон таблицы и ячеек:

Пример

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Наведите строки

Класс .table-hoverдобавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Сжатая таблица

Класс .table-condensedделает таблицу более компактной, сокращая отступы ячеек вдвое:

Пример

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

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

Контекстные классы можно использовать для окрашивания строк таблицы ( <tr>) или ячеек таблицы ( <td>):

Пример

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Можно использовать следующие контекстные классы:

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

Адаптивные таблицы

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

Пример

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

Проверьте себя с помощью упражнений

Упражнение:

Добавьте атрибут класса, чтобы оформить таблицу как базовую таблицу Bootstrap.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

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

Полный справочник по всем классам таблиц см. в нашем полном справочнике по таблицам Bootstrap .


❮ Предыдущий Следующий ❯