Как создаются в bootstrap формы и таблицы

Формы

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

На этой странице

Обзор

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

Обязательно используйте соответствующий атрибут type для всех полей ввода (например, email для адреса электронной почты или number для числовой информации) чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т.д.

Вот быстрый пример, демонстрирующий стили формы Bootstrap. Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.

form> div class="mb-3"> label for="exampleInputEmail1" class="form-label">Адрес электронной почтыlabel> input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> div id="emailHelp" class="form-text">Мы никогда никому не передадим вашу электронную почту.div> div> div class="mb-3"> label for="exampleInputPassword1" class="form-label">Парольlabel> input type="password" class="form-control" id="exampleInputPassword1"> div> div class="mb-3 form-check"> input type="checkbox" class="form-check-input" id="exampleCheck1"> label class="form-check-label" for="exampleCheck1">Проверить меняlabel> div> button type="submit" class="btn btn-primary">Отправитьbutton> form>

Текст формы

Текст формы на уровне блока или на уровне строки может быть создан с помощью .form-text .

Связывание текста формы с элементами управления формой

Текст формы должен быть явно связан с элементом управления формы, к которому он относится, с помощью атрибута aria-describedby . Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст формы, когда пользователь фокусируется или входит в элемент управления.

Текст формы под полями может быть оформлен с помощью .form-text . Если будет использоваться элемент уровня блока, добавляется верхнее поле для удобного разнесения между входными данными выше.

Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.

label for="inputPassword5" class="form-label">Парольlabel> input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> div id="passwordHelpBlock" class="form-text"> Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи. div>

Встроенный текст может использовать любой типичный строчный HTML-элемент (будь то , или что-то еще) с не более чем классом .form-text .

Должно быть 8-20 символов.

div class="row g-3 align-items-center"> div class="col-auto"> label for="inputPassword6" class="col-form-label">Парольlabel> div> div class="col-auto"> input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> div> div class="col-auto"> span id="passwordHelpInline" class="form-text"> Должно быть 8-20 символов. span> div> div>

Отключенные формы

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

input class="form-control" id="disabledInput" type="text" placeholder="Здесь отключен ввод. " disabled> 

Добавьте атрибут disabled к , чтобы отключить все элементы управления внутри. Браузеры обрабатывают все элементы управления собственными формами (элементы , и ) внутри как отключенные, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши.

Однако, если Ваша форма также включает пользовательские элементы, похожие на кнопки, такие как . , им будет присвоен стиль только pointer-events: none , что означает, что они по-прежнему могут фокусироваться и управляться с помощью клавиатуры. В этом случае Вы должны вручную изменить эти элементы управления, добавив tabindex=»-1″ , чтобы они не получали фокус, и aria-disabled=»disabled» , чтобы сигнализировать о своем состоянии вспомогательным технологиям.

form> fieldset disabled> legend>Пример отключенного набора полейlegend> div class="mb-3"> label for="disabledTextInput" class="form-label">Отключенное поле вводаlabel> input type="text" id="disabledTextInput" class="form-control" placeholder="Отключенное поле ввода"> div> div class="mb-3"> label for="disabledSelect" class="form-label">Отключено меню выбораlabel> select id="disabledSelect" class="form-select"> option>Отключен элемент выбораoption> select> div> div class="mb-3"> div class="form-check"> input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> label class="form-check-label" for="disabledFieldsetCheck"> Не могут это проверить label> div> div> button type="submit" class="btn btn-primary">Отправитьbutton> fieldset> form>

Доступность

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

В ситуациях, когда невозможно включить видимую метку или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

• Элементы скрыты с помощью класса .visually-hidden
• Указание на существующий элемент, который может действовать как метка, используя aria-labelledby
• Предоставление атрибута title
• Явная установка доступного имени для элемента с помощью aria-label

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута placeholder в качестве запасного варианта для доступного имени в элементах и . Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Несмотря на то, что использование визуально скрытого содержимого (содержимое .visually-hidden , aria-label и даже placeholder , которое исчезает после того, как в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки все же может быть проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.

Sass

Многие переменные формы устанавливаются на общем уровне для повторного использования и расширения отдельными компонентами формы. Чаще всего Вы увидите их как переменные $btn-input-* и $input-* .

Переменные

Переменные $btn-input-* являются общими глобальными переменными между нашими кнопками и нашими компонентами формы. Вы обнаружите, что они часто переназначаются как значения для других переменных, зависящих от компонента.

$input-btn-padding-y: .375rem; $input-btn-padding-x: .75rem; $input-btn-font-family: null; $input-btn-font-size: $font-size-base; $input-btn-line-height: $line-height-base; $input-btn-focus-width: .25rem; $input-btn-focus-color-opacity: .25; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity); $input-btn-focus-blur: 0; $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color; $input-btn-padding-y-sm: .25rem; $input-btn-padding-x-sm: .5rem; $input-btn-font-size-sm: $font-size-sm; $input-btn-padding-y-lg: .5rem; $input-btn-padding-x-lg: 1rem; $input-btn-font-size-lg: $font-size-lg; $input-btn-border-width: $border-width; 

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.0.2.

Таблицы — Bootstrap 5: Основы верстки

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

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

В качестве примера урока сделаем небольшую таблицу с описанием профессий на Хекслете.

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

Если нет необходимости в границах внутри таблицы, то можно добавить класс .table-borderless, который удалит все границы, оставив, при этом внутренние отступы внутри ячеек. Большинство классов являются интуитивно понятными и их можно найти в документации. Основными классами так же являются:

• .table-dark — класс задает темную тему для таблицы. Текст при этом становится белым
• .table-hover — изменение фона при наведении
• .table-striped — стилизация строк в виде зебры. Несколько фонов чередуются друг за другом

Применив все классы получится следующая таблица:

В примере так же был добавлен тег , отвечающий за создание заголовка таблицы. По умолчанию в Bootstrap этот заголовок выводится под таблицей серым шрифтом. Это сделано по причине того, что таблицы зачастую находятся после заголовка HTML и добавление еще одного заголовка не нужно.

Адаптивность

Адаптивность и таблицы — страшный сон верстальщика. Браузеры не имеют встроенных средств для создания адаптивных таблиц. По этой причине разработчики используют или сторонние плагины, или отказываются от таблиц. Второй вариант не является хорошей практикой, так как с точки зрения семантики таблицы должны быть таблицами. Это позволит правильно интерпретировать данные для людей с нарушениями зрения. Если вместо таблицы использовать блоки, то скринридер не сможет корректно распознать строки и столбцы.

В Bootstrap для адаптации таблиц используют прокрутку с помощью свойства overflow-x. Если таблица не помещается в рамки своего родительского блока, то появляется горизонтальная прокрутка. Это редкая ситуация, когда горизонтальная прокрутка не мешает, а помогает пользователю.

Для создания адаптивной таблицы используется класс .table-responsive. При его установке на любом разрешении экрана класс будет адаптировать таблицы при нехватке места. Помимо этого для класса существуют префиксы Bootstrap, которые используются для адаптивности:

Настройка таблиц с помощью SASS

Как и в случае с текстом, многие стандартные стили таблиц в Bootstrap можно изменить с помощью SASS. Настройки хранятся в файле \_variables.scss. Вот лишь некоторые из них:

• $table-cell-padding-x и $table-cell-padding-y — внутренние отступы ячеек. По умолчанию имеют значение .5rem
• $table-cell-vertical-align — выравнивание контента внутри ячеек. По умолчанию имеет значение top
• $table-th-font-weight — установка значения font-weight для ячеек

Эти, и другие настройки помогают гибко адаптировать Bootstrap под проект, не прибегая к переопределению стилей с помощью селекторов.

Доступность таблиц

Данная секция никак напрямую не связана с Bootstrap, но знать о данном приеме полезно, если вы хотите адаптировать свой сайт для людей с ограниченным зрением. В спецификации WCAG, которая описывает возможности HTML для доступности есть упоминание работы с таблицами.

Существует специальный атрибут scope, который позволяет напрямую связать заголовки таблицы со строками. В базовом варианте атрибут принимает одно из двух значений: col и row. Значением col указываются заголовки столбцов таблицы, а row указывает на заголовок строки.

После этого экранные скринридеры смогут явно связать заголовки таблицы и их значение.

 class="table">   № Название профессии Описание     1 Фронтенд-программист JavaScript — язык программирования фронтенд-разработки. С его помощью программисты делают сайты динамичными и «живыми». Самый востребованный и наиболее простой язык для новичков.   

При использовании атрибута scope есть возможность «выкинуть» ненужные столбцы. При воспроизведении таблицы речевыми движками в них нет необходимости. В текущем примере, при использовании скринридера в качестве заголовка строки выступит первый столбец. То есть цифра 1. Оказавшись в столбце с описанием профессии и включив функцию прочтения названия ячейки мы получим ответ, что элемент расположен в столбце с именем «Описание» и строке с именем «1». Если таблица небольшая, то в этом нет ничего страшного, но представьте, что пользователь находится в таблице из десятка различных заголовков, с подтаблицами и объединенными ячейками.

В этом случае озвучивание заголовка строки и столбца не даст полной информации о том, что за данные находятся в ячейке. Установив атрибут scope=»row» для ячейки внутри строки мы укажем использовать это название как заголовок строки. Переделав немного пример выше, получится следующий результат:

 class="table">   scope="col">№  scope="col">Название профессии  scope="col">Описание     1  scope="row">Фронтенд-программист JavaScript — язык программирования фронтенд-разработки. С его помощью программисты делают сайты динамичными и «живыми». Самый востребованный и наиболее простой язык для новичков.   

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Формы в Bootstrap 4

Bootstrap 4 предлагает стиль по умолчанию, который применяется к большинству полей формы. Bootstrap также предоставляет классы для конкретных целей.

Базовая форма

Форма в одну строку

Используйте класс .form-inline , чтобы элементы формы отображались как строчно-блочные и выравнивались по левому краю. Используйте вспомогательные класса (например, mr-sm-2 ), чтобы добавить пространство между элементами.

Обратите внимание, всё это применимо только тогда, когда область просмотра имеет ширину не меньше 576 пикселей.

Скрытые метки

В полях ввода всегда должны указываться метки, иначе программы чтения с экрана ожидают проблемы. При необходимости вы можете скрыть метку с помощью класса .sr-only .

Здесь мы используем .sr-only , чтобы скрыть метки, а также добавляем атрибут placeholder , чтобы подсказывать пользователю что вводить. Использование атрибута placeholder таким способом не рекомендуется, так как это может вызвать проблемы с удобством пользования.

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки При использовании сеток для макета формы, Bootstrap 4 требует класс .row . Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3). Метки Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label . Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label , но впоследствии заменил его на .col-form-label . Класс .form-horizontal Bootstrap 3 требует класс .form-horizontal , тогда как Bootstrap 4 нет.

Строка формы

Вы можете заменить .row на .form-row для более компактной компоновки.

Смещение полей формы

В некоторых примерах используется класс .offset-* или .offset-*-* для выравнивания полей с метками и без.

Размер полей формы

Вы можете использовать .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует классы .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода. Bootstrap 3 для этого использует .input-lg и .input-sm .

Размер метки

Вы можете добавить к меткам .col-form-label-sm и .col-form-label-lg , чтобы размер метки соответствовал размеру поля формы.

Новое в Bootstrap 4

Классы .col-form-label-sm и .col-form-label-lg являются новыми в Bootstrap 4.

Размер колонок

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

Текст справки

Bootstrap 4 предоставляет класс .form-text , который можно использовать для обозначения текста справки. Вы можете комбинировать этот класс со служебными классами, такими как .text-muted .

Вам также следует использовать атрибут aria-descriptionby , чтобы связать текст справки с полем формы. Это гарантирует, что программы чтения с экрана смогут сообщить текст справки, когда пользователь переведёт фокус на поле формы.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует класс .form-text для отображения текста справки, Bootstrap 3 использует класс .help-block .

Статичные поля формы

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использовал класс .form-control-static для отображения статичного текста, в Bootstrap 4 этот класс был заменён на .form-control-plaintext .

Флажки и переключатели

Bootstrap 4 предоставляет классы .form-check , .form-check-label , .form-check-input и .form-check-inline для отображения флажков и переключателей.

Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент с классом .form-check . Кроме того, добавьте .form-check-label к элементу и .form-check-input к элементу .

В одну строку

В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему . Оставьте .form-check-input в элементе .

Bootstrap 4 против Bootstrap 3

Bootstrap 3 для отображения флажков и переключателей использует .radio , .radio-inline , .checkbox или .checkbox-inline . Bootstrap 4 использует .form-check , .form-check-label , .form-check-input и .form-check-inline .

См. также

• Аккордеон меню
• Вкладки на CSS
• Выпадающее меню
• Выравнивание элементов форм
• Загрузка файлов
• Использование :checked
• Кнопки
• Кнопки
• Отправка данных формы
• Отправка данных формы
• Переключатели
• Переключатели
• Подсказка в поле формы
• Поле для ввода пароля
• Поле для пароля
• Пользовательские формы
• Построение форм
• Скрытое поле
• Создание форм
• Стилизация переключателей
• Стилизация флажков
• Сумасшедшие формы
• Текстовое поле
• Текстовое поле
• Флажки
• Флажки
• Формы
• Формы в HTML
• Элемент label

Автор: Йен Диксон
Последнее изменение: 12.03.2020

• Что такое Bootstrap?
• Начало работы с Bootstrap 4
• Контейнеры Bootstrap 4
• Система сеток Bootstrap 4
• Типографика в Bootstrap 4
• Таблицы в Bootstrap 4
• Формы в Bootstrap 4
• Пользовательские формы
• Кнопки в Bootstrap 4
• Изображения в Bootstrap 4
• Выпадающее меню
• Группа кнопок
• Группа ввода
• Сворачивание содержимого
• Навигация
• Панель навигации
• Хлебные крошки
• Нумерация страниц
• Значки
• Джамботрон
• Уведомления
• Модальное диалоговое окно
• Шкала прогресса
• Медиа-объекты
• Группа списков
• Карточки
• Адаптивное встраивание
• Карусель
• Всплывающие подсказки
• Информеры
• Отслеживание прокрутки

Таблицы

Документация и примеры стилизации таблиц с элементами ввода (с учетом их широкого применения в плагинах JavaScript).

Примеры

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

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Вы можете инвертировать цвета со светлых на темные классом .table-dark .

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table table-dark">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Опции заголовка таблицы

По тому же принципу осветляйте или делайте серым заголовок таблицы с помощью классов .thead-light и .thead-dark .

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table">  class="thead-dark">  scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter     class="table">  class="thead-light">  scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Разделенные «полосами» ряды

Добавьте класс .table-striped к для разделения «полосками зебры» рядов таблицы.

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table table-striped">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table table-striped table-dark">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

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

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

 class="table table-bordered">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Mark Otto @TwBootstrap   scope="row">3 Jacob Thornton @fat   scope="row">4  colspan="2">Larry the Bird @twitter   

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

 class="table table-bordered table-dark">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Mark Otto @TwBootstrap   scope="row">3 Jacob Thornton @fat   scope="row">4  colspan="2">Larry the Bird @twitter   

Ряды с :hover

Добавьте класс .table-hover в для активации :hover у рядов таблицы.

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 class="table table-hover">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 class="table table-hover table-dark">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

Маленькие таблицы

Добавьте класс .table-sm чтобы сделать таблицы компактнее урезанием паддинга ячкейки на 50%.

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 class="table table-sm">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

 class="table table-sm table-dark">   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

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

Используйте их для раскраски рядов или отдельных ячеек таблицы.

Type	Заголовок колонки	Заголовок колонки
Активный (Active)	Ячейка	Ячейка
По умолчанию (Default)	Ячейка	Ячейка
Главный (Primary)	Ячейка	Ячейка
Второстепенный (Secondary)	Ячейка	Ячейка
Успех (Success)	Ячейка	Ячейка
Опасность (Danger)	Ячейка	Ячейка
Предупреждение (Warning)	Ячейка	Ячейка
Предупреждение (Info)	Ячейка	Ячейка
Светлый (Light)	Ячейка	Ячейка
Темный (Dark)	Ячейка	Ячейка

  class="table-active">.  class="table-primary">.  class="table-secondary">.  class="table-success">.  class="table-danger">.  class="table-warning">.  class="table-info">.  class="table-light">.  class="table-dark">.   class="table-active">.  class="table-primary">.  class="table-secondary">.  class="table-success">.  class="table-danger">.  class="table-warning">.  class="table-info">.  class="table-light">.  class="table-dark">. 

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

#	Заголовок колонки	Заголовок колонки
1	Ячейка	Ячейка
2	Ячейка	Ячейка
3	Ячейка	Ячейка
4	Ячейка	Ячейка
5	Ячейка	Ячейка
6	Ячейка	Ячейка
7	Ячейка	Ячейка
8	Ячейка	Ячейка
9	Ячейка	Ячейка

  class="bg-primary">.  class="bg-success">.  class="bg-warning">.  class="bg-danger">.  class="bg-info">.   class="bg-primary">.  class="bg-success">.  class="bg-warning">.  class="bg-danger">.  class="bg-info">. 

Добавление информативности для технологии для инвалидов

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей ассистивных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Создавайте гибкие таблицы, обертывая любой .table с .table-responsive <-sm|-md|-lg|-xl>, заставляя таблицу прокручиваться горизонтально в каждой контрольной точке max-width получат ширину 575.99px, 767.99px, 991.99px и 1119.99 px, соответственно.

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения минимальных min- и максимальных max- префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Надписи

Тэг — это нечто похожее на заголовок для таблицы. Он помогает пользователям программ для чтения с экрана обнаружить таблицу, оценить ее содержимое и ее ценность для чтения.

Список пользователей

#	Имя	Фамилия	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table"> Список пользователей   scope="col">#  scope="col">Имя  scope="col">Фамилия  scope="col">Username     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

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

«Отзывчивые» таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table . Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive <-sm|-md|-lg|-xl>.

Вертикальное обрезание/сокращение

«Отзывчивые» таблицы используют overflow-y: hidden , что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.

Всегда «отзывчиво»

Через каждую контрольную точку используйте .table-responsive для горизонтально прокручиваемых таблиц.

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

 class="table-responsive">  class="table"> . 

Специфика брейкпойнтов

Используйте класс .table-responsive <-sm|-md|-lg|-xl>когда необходимо создать отзывчивые до необходимого брейкпойнта таблицы. От него и выше таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
2	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка
3	Ячейка	Ячейка	Ячейка	Ячейка	Ячейка

 class="table-responsive-sm">  class="table"> .   class="table-responsive-md">  class="table"> .   class="table-responsive-lg">  class="table"> .   class="table-responsive-xl">  class="table"> .