Bootstrap элементы: Компоненты · Bootstrap на русском

Содержание

Свойство отображения · Bootstrap v5.1

Как это устроено

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

Обозначение

Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.

Таким образом, классы именуются в следующем формате:

.d-{value} для xs
.d-{breakpoint}-{value} для sm, md, lg, xl и xxl.

Где значение — одно из:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg, xl и xxl.

Примеры

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

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

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс .d-*-none с классом .d-*-*, например, .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экрана	Класс
Скрыто на всех	`.d-none`
Скрыто только на xs	`.d-none .d-sm-block`
Скрыто только на sm	`.d-sm-none .d-md-block`
Скрыто только на md	`. d-md-none .d-lg-block`
Скрыто только на lg	`.d-lg-none .d-xl-block`
Скрыто только на xl	`.d-xl-none .d-xxl-block`
Скрыто только на xxl	`.d-xxl-none`
Видно на всех	`.d-block`
Видно только на xs	`.d-block .d-sm-none`
Видно только на sm	`.d-none .d-sm-block .d-md-none`
Видно только на md	`.d-none .d-md-block .d-lg-none`
Видно только на lg	`.d-none .d-lg-block .d-xl-none`
Видно только на xl	`.d-none .d-xl-block .d-xxl-none`
Видно только на xxl	`.d-none .d-xxl-block`

скрыть на lg и более широких экранах

скрыть на экранах меньше lg

<div>скрыть на lg и более широких экранах</div>
<div>скрыть на экранах меньше lg</div>

Показать в печати

Измените значение display элементов при печати с помощью наших служебных классов отображения при печати. Включает поддержку тех же значений display, что и наши адаптивные утилиты .d-*.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

<div>Только экран (Скрывать только при печати)</div>
<div>Только печать (скрыть только на экране)</div>
<div>Скрыть до большого размера на экране, но всегда показывать на печати</div>

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities. scss. Узнайте, как использовать API утилит.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),

370+ Большой набор Bootstrap элементов на сайт

Здесь собраны все необходимые bootstrap элементы которые облегчат жизнь в разработке любому разработчику. Доступно для скачивания.

# Разработка 12 Сентября 2020Комментариев: 10

Здесь мы собрали большой набор готовых элементов для bootstrap 3 и bootstrap 4, включающий в себя более 370 готовых решений, которые подойдут каждому. Скачав и разместив код того или иного элемента на своём сайте, можно сэкономить реально кучу времени, не собирая ничего с нуля.

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

Эта сборка bootstrap элементов включает следующий функционал

Виджеты bootstrap
Чарты, статистики, граффики bootstrap
Навигация bootstrap
Оформление для личного кабинета bootstrap
Готовые якоря bootstrap для landing page
Toggle меню bootstrap
Мобильное меню bootstrap
Оформление карточки товаров bootstrap
Фотогалерея bootstrap
Оформление статей для блога
bootstrap инфографика
Резюме на базе bootstrap
Форма логин-пароль для bootstrap
Форма регистрации на сайте bootstrap
Иконки bootstrap
Блок поделиться в соц сетях
Интересные анимации и различные переходы
Кнопка меню гамбургер, открывающая целый блок
Табы bootstrap
Галерея изображений с переворотом фото к описанию
Адаптивная bootstrap таблица
Карточка с ценами для сайта
Плавно всплывающие блоки с описанием
Статусы посещений и различной статистикой
Дизайн блоки чтобы сайт выглядел более современно
bootstrap календарь событий
bootstrap меню с бесконечным списком пунктов
Блок наша команда с анимациями и описаниями
Красивые адабптивные виджеты соцсетей bootstrap
Красиво оформленные текстовые блоки
Тени box-shadow bootstrap

Виджет погоды
Свадебные приглашения
Граффики для фондовых бирж
Списки множественного выбора bootstrap
Функция уведомлений на сайте
Текстовый редактор на bootstrap
bootstrap эмулятор смартфона
Оформление страницы с ценами сайта
Функциональная корзина, с возможностью редактирования количества товаров
Табы навигации bootstrap
Различные кнопки для сайта button
Загрузчик файлов на сервер bootstrap
Различные выпадающие меню dropdown-menu
Прогресс бар bootstrap
Виджет поста на сайт
Таймлайн для описания деятельности по месяцам/годам
Фильтр товаров на bootstrap
Кнопка отправить на печать bootstrap
Факты о нас в цифрах
Адаптивная таблица сравнения товаров
Формы обратной связи для сайта
Установка рейтинга для чего либо на bootstrap
Форма заполнения для кредитных карт
Планировщик задач на bootstrap
Оформление и дизайн купонов
Тема продажи приложений
Блок отзывов на сайте
Блок отзывов каруселью для сайта
Записи для оформления блога
Виджет музыкального плеера bootstrap
Галерея с возможностью открыть фото во весь экран
Красивое разделение блоков dividers

И это не весь список элементов которые присутствуют в данной сборке. Вы можете самостоятельно открать и опробывать каждый элемент

Widgets

Mini Blocks

Chart Block

Navigation

Status UI

Resume

Team Block

Mini Site

Mini Chart

Image Block

Mini Resume

Login/Reg Form

Icon Block

User Block

Slide Status

Mini Navigation

Nav Tabs

Chart Block

Flip Image

Pricing table

Report Block

Mini Navigation

Chart UI

Text Block

Status UI

Mini Blocks

Widget

Text Block

Status

Icon Block

Status Table

Team Block

Pricing Table

Image Block

Social Media

Form

Ecommerce Item

Social Media

Icon Block

Text Block

Wedding

Status Block

Nav Tabs

Select UI

Notification

Select UI

Editor

Mobile UI

Pricing Table

Icon Block

Ecommerce Cart

Icon Block

Nav Tabs

Chart

Sliding Status

Button

File UI

Chart

Dropdown

Changelog

Social Media

Number Block

Icon Block

Status UI

Company Details

Widget

Login

Icon Block

Team Block

Facts in Number

Chart Block

Nav Tabs

Status Table

Post Its

File UI

Pricing Table

Notebook UI

Social Media

Wedding Theme

Progress Block

Resume

Post Widget

Image Block

Events

Button

Twitter Widget

Chart

Chart Block

Settings Widget

User Theme

Mini Theme

User Block

Icon Block

Widget

Icon Block

Colorful Menu

Chart Block

Timeline

Social Sharing

Icon Block

Info Block

Sliding Status

Text Block

Sliding Menu

Team Block

Report Block

Team Block

Menu Block

Team Block

Pricing Table

Progress Block

Forms UI

Filter UI

Timeline

Letterhead

Invoice

Status UI

Mini Resume

Image Block

Icon Block

Facts in Numbers

Image Block

Food Menu

Coming Soon

Team

Team Block

Item Comparison

Ecom Item UI

Real Estate List

Counter UI

Masonry Grid

Icon Block

Text Block

To Do List

Items Editor

Mini Chart

Counter

Contact

Pricing Table

Icon Block

Weather Block

Login/Reg Form

Team Block

Social Media

Icon Block

Image Block

Pricing Table

Timeline

Icon Block

Resume

Text Effect

Text Block

Pricing Table

Mini Chart

Image UI

Icon Block

Carousel

Image Block

Social Media

Pricing Table

Team Block

Report Block

Mini Resume

Map Block

Weather Block

Image Block

To Do List

Sliding Report

Air Ticket

Login & Registration

Contact Block

Report Block

Accordion UI

Mini Chart

Chart Block

Schedule UI

Credit Card UI

Mini Dashboard

Team Block

Growth Chart

Counter Block

Status Chart Block

Pricing Table

Image Icon Block

On Off Switch

Menu UI

Status UI

Progress Status

Our Process

App Site Landing Page

File List UI

Text Block

Navigation

Text Block

Icon Block

Resume

Progress Report

Coupon UI

Chart Block

Image Block

App Theme

Pricing Table

Report UI

Social Media

Icon Block

Pricing Table

Progress UI

Testimonials

Pricing Table

Nav Tabs

Icon Block

Button

Mini Timeline

Blog UI

Text Block

Report Block

Icon Block

Nav Tabs

Mini Chart

Weather UI

Report Block

Chart Block

Flip Content

Chart UI

V Card

Bio Data

Quote Block

Icon Carousel

Testimonials

Twitter Block

Icon Block

Chart Block

Contacts List

Info Block

Chat Block

Chart Block

Social Media

Quick Links

Music Player

Icon Block

Report Block

Social Media

Chart Block

Call UI

Navigation

Menu Block

Map block

Icon Block Nav

Image Carousel

Chart Block

Blog Nav Tab

Select Table

Chart Block

Image Gallery

Social Feed

Slide Content

Image Block

Timeline

Login Register

Social Media

Music Player

Report

Select UI

Icon Block

Navigation

Team UI

Resume Mini

Text Block

Resume Block

Navigation

Team Block

404 Box Shadow

Shadow Block

Dropcap

Coming Soon

Dividers

Login

Timeline

Report Block

Text Block

Number Block

Team Block

Image Block

Login & Register

Скачать

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

Настройка и загрузка · Bootstrap

Выберите, какие файлы Less нужно скомпилировать в свою пользовательскую сборку Bootstrap. Не знаете, какие файлы использовать? Прочитайте страницы CSS и Компоненты в документации.

Общий код CSS

Стили печати

Типография

Код

Сеточная система

Столы

Формы

Кнопки

Отзывчивые утилиты

Компоненты

Глификоны

Группы кнопок

Входные группы

Навигация

Навбар

Панировочные сухари

Пагинация

Пейджер

Этикетки

Значки

Джамботрон

Миниатюры

Оповещения

Индикаторы выполнения

Медиа-элементы

Список групп

Панели

Адаптивная вставка

Уэллс

Значок закрытия

Компоненты JavaScript

Компонентные анимации (для JS)
(включая Collapse)

Падать

Подсказка

Трещать

Модальный

Карусель

Выберите, какие плагины jQuery должны быть включены в ваши пользовательские файлы JavaScript.

Не знаете, что включить? Прочтите страницу JavaScript в документации.

Связан с компонентами

Предупреждение об увольнении

Дополнительные кнопки

Функциональность карусели

Выпадающие списки

Модальные

Подсказки

Всплывающие окна (требуются всплывающие подсказки)

Переключаемые вкладки

Магия

Прикрепить

Крах

прокрутка

Переходы (обязательны для любого вида анимации)

Требуется jQuery

Для всех подключаемых модулей требуется последняя версия jQuery.

Настройте переменные Less, чтобы определить цвета, размеры и многое другое в ваших пользовательских таблицах стилей CSS.

Цвета

Серый и фирменные цвета для использования в Bootstrap.

@серая база

@серый-темнее

@серо-темный

@серый

@серо-светлый

@основной бренд

@успех бренда

@brand-info

@бренд-предупреждение

@бренд-опасность

Леса

Настройки для некоторых самых глобальных стилей.

@body-bg

Цвет фона для .

@text-color

Глобальный цвет текста на .

@link-color

Глобальный цвет текстовой ссылки.

@link-hover-color

Цвет при наведении ссылки устанавливается с помощью функции darken() .

@link-hover-decoration

Украшение при наведении ссылки.

Типографика

Шрифт, высота строки и цвет для основного текста, заголовков и т. д.

@font-family-sans-serif

@font-family-serif

@font-family-monospace

Моноширинные шрифты по умолчанию для , и

. @база семейства шрифтов @база размера шрифта @размер шрифта большой @маленький размер шрифта @размер шрифта-h2 @размер шрифта-h3 @размер шрифта-h4 @размер шрифта-h5 @размер шрифта-h5 @размер шрифта-h6 @line-height-base Безразмерный line-height для использования в таких компонентах, как кнопки. @line-height-computed Вычисленная высота строки ( размер шрифта * высота строки ) для использования с margin , padding и т. д. @headamifont По умолчанию наследуется от . @заголовки-шрифт-вес @высота строки заголовков @цвет заголовков Иконография Укажите пользовательское местоположение и имя файла прилагаемого шрифта значков Glyphicons. Полезно для тех, кто включает Bootstrap через Bower. @icon-font-path Загрузите шрифты из этого каталога. @icon-font-name Имя файла для всех файлов шрифтов. @icon-font-svg-id Идентификатор элемента в файле значка SVG. Компоненты Определение общих размеров отступов и радиусов границ и многое другое. Значения основаны на тексте 14 пикселей и высоте строки 1,428 (~ 20 пикселей для начала). @padding-base-vertical @padding-base-horizontal @padding-большой-вертикальный @padding-большой-горизонтальный @padding-small-vertical @padding-small-horizontal @padding-xs-vertical @padding-xs-горизонтальный @line-height-large @line-height-small @граница-радиус-база @граница-радиус-большой @border-radius-small @component-active-color Глобальный цвет для активных элементов (например, навигации или раскрывающихся списков). @component-active-bg Глобальный цвет фона для активных элементов (например, навигации или раскрывающихся списков). @caret-width-base Ширина границы для создания кареток, обозначающих раскрывающиеся списки. @caret-width-large Размер каретки немного увеличивается для более крупных компонентов. Таблицы Настройка таблицы .table с базовыми значениями, каждое из которых используется во всех вариантах таблицы. @table-cell-padding Заполнение для s и s. @table-уплотненная-ячейка-заполнение Заполнение для ячеек в .table-уплотненная . @table-bg Цвет фона по умолчанию для всех таблиц. @table-bg-accent Цвет фона, используемый для . table-striped . @table-bg-hover Цвет фона, используемый для .table-hover . @table-bg-активный @table-border-color Цвет границы для границ таблицы и ячеек. Кнопки Для каждой кнопки Bootstrap определите цвет текста, фона и границы. @btn-шрифт-вес @btn-цвет по умолчанию @btn-default-bg @btn-граница по умолчанию @btn-основной-цвет @btn-primary-bg @btn-основная-граница @btn-успех-цвет @btn-success-bg @btn-успех-граница @btn-info-color @btn-info-bg @btn-информация-граница @btn-предупреждающий-цвет @btn-warning-bg @btn-warning-border @btn-опасный-цвет @btn-danger-bg @btn-danger-border @btn-link-disabled-color @btn-граница-радиус-база @btn-граница-радиус-большой @btn-border-radius-small Forms @input-bg <Ввод> Цвет фона @input-bg-disabled <Вход отключен> Цвет фона @input-color

. > s

@input-border

цвет границы

@input-border-radius

По умолчанию . Small .form-control радиус границы

@input-border-focus Цвет границы для входных данных в фокусе @input-color-placeholder Цвет текста-заполнителя @input-height-base 2 .form-control height

@input-height-large

Large .form-control height

@input-height-small

Small .form-control height

2

2 margin-00

@form-group .form-group поле

@legend-color

@легенда-граница-цвет

@input-group-addon-bg

Цвет фона для надстроек текстового ввода

@input-group-addon-border-color

Цвет границы для надстроек текстового ввода

@cursor-disabled

Курсор отключен для элементов управления формы и кнопок.

Раскрывающиеся списки

Контейнер раскрывающегося меню и содержимое.

@dropdown-bg

Фон для выпадающего меню.

@dropdown-border

Выпадающее меню border-color .

@dropdown-fallback-border

Выпадающее меню border-color для IE8 .

@dropdown-divider-bg

Цвет разделителя между выпадающими элементами.

@dropdown-link-color

Цвет текста выпадающей ссылки.

@dropdown-link-hover-color

Цвет наведения для выпадающих ссылок.

@dropdown-link-hover-bg

Фон наведения для выпадающих ссылок.

@dropdown-link-active-color

Цвет текста элемента активного выпадающего меню.

@dropdown-link-active-bg

Цвет фона активного выпадающего меню.

@dropdown-link-disabled-color

Отключен цвет фона элемента раскрывающегося меню.

@dropdown-header-color

@dropdown-caret-color

Устарело @dropdown-caret-color начиная с версии 3.1.0 для разных размеров экрана.

@screen-xs

Устарело @screen-xs начиная с версии 3.0.1

@screen-xs-min

Устарело

Устарело @screen-phone начиная с версии 3.0.1

@screen-sm

Устарело @screen-sm начиная с версии 3.0.1

@screen-sm-min

@screen-tablet

Устарело @screen-tablet начиная с версии 3. 0.1

@screen-md

Устарело

@screen-desktop

Устарело @screen-desktop начиная с версии 3.0.1

@screen-lg

Устарело @screen-lg начиная с версии 3.0.1

@screen-lg-min

@screen-lg-desktop

Устарело @screen-lg-desktop начиная с версии 3.0.1

@screen-xs-max

@экран-см-макс

@screen-md-max

Система сетки

Определите собственную адаптивную сетку.

@grid-columns

Количество столбцов в сетке.

@grid-gutter-width

Отступы между столбцами. Делится пополам на лево и право.

@grid-float-breakpoint

Точка, в которой панель навигации становится развернутой.

@grid-float-breakpoint-max

Точка, в которой панель навигации начинает сворачиваться.

Размеры контейнера

Определите максимальную ширину .container для разных размеров экрана.

@контейнер-таблетка

@container-sm

Для @screen-sm-min и выше.

@контейнер-рабочий стол

@container-md

Для @screen-md-min и выше.

@контейнер-большой-рабочий стол

@container-lg

Для @screen-lg-min и выше.

Navbar

@navbar-высота

@navbar-margin-bottom

@navbar-border-radius

@navbar-padding-horizontal

@navbar-padding-vertical

@navbar-collapse-max-height

@navbar-цвет по умолчанию

@navbar-default-bg

@navbar-default-border

@navbar-default-link-color

@navbar-default-link-hover-color

@navbar-default-link-hover-bg

@navbar-default-link-active-color

@navbar-default-link-active-bg

@navbar-default-link-disabled-color

@navbar-default-link-disabled-bg

@navbar-default-brand-color

@navbar-default-brand-hover-color

@navbar-default-brand-hover-bg

@navbar-default-toggle-hover-bg

@navbar-default-toggle-icon-bar-bg

@navbar-default-toggle-border-color

Перевернутая панель навигации

@navbar-inverse-color

@navbar-inverse-bg

@navbar-обратная-граница

@navbar-обратная-ссылка-цвет

@navbar-inverse-link-hover-color

@navbar-inverse-link-hover-bg

@navbar-обратная-ссылка-активный-цвет

@navbar-обратная-ссылка-активная-bg

@navbar-обратная-ссылка-отключенный-цвет

@navbar-обратная-ссылка-disabled-bg

@navbar-inverse-brand-color

@navbar-inverse-brand-hover-color

@navbar-inverse-brand-hover-bg

@navbar-inverse-toggle-hover-bg

@navbar-inverse-toggle-icon-bar-bg

@navbar-inverse-toggle-border-color

Вкладки

@nav-tabs-border-color

@nav-tabs-link-hover-border-color

@nav-tabs-active-link-hover-bg

@nav-tabs-active-link-hover-color

@nav-tabs-active-link-hover-border-color

@nav-tabs-justified-link-border-color

@nav-tabs-justified-active-link-border-color

Таблетки

@nav-pills-border-radius

@nav-таблетки-активная-ссылка-hover-bg

@nav-таблетки-активная-ссылка-наведение-цвет

@цвет страницы

@pagination-bg

@граница страницы

@pagination-hover-color

@pagination-hover-bg

@pagination-hover-border

@pagination-active-color

@pagination-active-bg

@pagination-active-border

@pagination-disabled-color

@pagination-disabled-bg

@pagination-disabled-border

Пейджер

@пейджер-bg

@граница пейджера

@pager-border-radius

@pager-hover-bg

@пейджер-актив-бг

@пейджер-активный-цвет

@ пейджер-отключенный-цвет

Джамботрон

@jumbotron-padding

@jumbotron-цвет

@jumbotron-bg

@jumbotron-цвет-заголовок

@jumbotron-размер шрифта

@jumbotron-heading-размер шрифта

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

@состояние-успех-текст

@state-success-bg

@государство-успех-граница

@state-info-текст

@state-info-bg

@государство-информация-граница

@текст-предупреждения-состояния

@state-warning-bg

@государственная-предупреждающая-граница

@статус-опасность-текст

@state-danger-bg

@государство-опасность-граница

Подсказки

@tooltip-max-width

Максимальная ширина подсказки

@tooltip-color

Цвет текста всплывающей подсказки

@tooltip-bg

020002 Цвет фона подсказки0

@tooltip-arrow-width

Ширина стрелки подсказки

@tooltip-arrow-color

Цвет стрелки подсказки

Всплывающие окна

@popover-bg

Цвет фона всплывающего окна

@popover-max-width

Максимальная ширина всплывающего окна

@popover-border-color

2 Цвет границы всплывающего окна

3 color

Цвет границы резервного всплывающего окна

@popover-title-bg

Цвет фона заголовка всплывающего окна

@popover-arrow-width

Ширина стрелки всплывающего окна

@popover-arrow-color

Цвет стрелки всплывающего окна0003

@popover-arrow-outer-width

Ширина внешней стрелки всплывающего окна

@popover-arrow-outer-color

Цвет внешней стрелки всплывающего окна

@popover-arrow-outer-fallback-color

Откат внешней стрелки всплывающего окна color

Метки

@label-default-bg

Цвет фона метки по умолчанию

@label-primary-bg

Основной цвет фона метки

@label-success-bg

20 Цвет фона метки Success00149 @label-info-bg

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

@label-warning-bg

Цвет фона метки предупреждения

@label-danger-bg

Цвет фона метки опасности

@label-color 3

По умолчанию

label text color

@label-link-hover-color

Цвет текста связанной метки по умолчанию

Modals

@modal-inner-padding

Отступы, применяемые к модальному телу

@modal-title-padding

Отступы, примененные к модальному заголовку

@modal-title-line-height

Модальный заголовок line-height

@modal-content-bg

Цвет фона области модального содержимого

@modal-content-border-color

Цвет границы модального содержимого

@modal-content-fallback-border-color

Цвет границы модального содержимого для IE8

@modal-backdrop-bg

Цвет фона модального фона

@modal-backdrop-opacity

Непрозрачность модального фона

@modal-header-border-color

@modal-footer-border-color

@modal-lg

@modal-md

@modal-sm

Оповещения

Определите цвета предупреждений, радиус границы и отступы.

@предупреждение-заполнение

@alert-border-radius

@alert-link-font-weight

@alert-success-bg

@успех-уведомления-текст

@alert-success-граница

@alert-info-bg

@alert-info-текст

@alert-info-border

@оповещение-предупреждение-бг

@ текст предупреждения-предупреждения

@алерт-предупреждение-граница

@alert-danger-bg

@ текст предупреждения об опасности

@Alert-Danger-Border

Индикаторы выполнения

@progress-bg

Цвет фона всего компонента прогресса

@progress-bar-color

Цвет текста индикатора выполнения

@progress-border-radius

Переменная для установки закругленных углов на индикаторе выполнения. Цвет индикатора выполнения по умолчанию -bar-danger-bg

Цвет индикатора состояния опасности

@progress-bar-info-bg

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

Группа списка

@list-group-bg

Цвет фона на . list-group-item

@list-group-border

.list-group-item цвет границы

@list-group-border- radius

Радиус границы группы списка

@list-group-hover-bg

Цвет фона отдельных элементов списка при наведении

@list-group-active-color

Цвет текста активных элементов списка

@list- group-active-bg

Цвет фона активных элементов списка

@list-group-active-border

Цвет границы активных элементов списка

@list-group-active-text-color

Цвет текста для контента в активных элементах списка

@list-group-disabled-color

Цвет текста отключенных элементов списка

@list-group-disabled-bg

Цвет фона отключенных элементов списка

@list-group-disabled-text-color

Цвет текста содержимого отключенных элементов списка

@list-group-link-color

@list-group-link-hover-color

@list-group-link-heading-color

Панели

@panel-bg

@panel-body-padding

@panel-heading-padding

@нижний колонтитул панели

@панель-граница-радиус

@panel-inner-border

Цвет границы для элементов внутри панелей

@panel-footer-bg

@панель-текст по умолчанию

@панель-дефолт-граница

@panel-default-heading-bg

@панель-первичный-текст

@панель-первичная-граница

@panel-primary-heading-bg

@ панель-успех-текст

@панель-успех-граница

@panel-success-heading-bg

@панель-информация-текст

@панель-информация-граница

@panel-info-heading-bg

@панель-предупреждение-текст

@панель-предупреждение-граница

@panel-warning-heading-bg

@панель-опасность-текст

@панель-опасность-граница

@panel-danger-heading-bg

Миниатюры

@Thumbnail Padding

Панки вокруг фона с эскизом

@thumbnail-bg

Цветовая граница

@Thambnail-Border

Thumbnail Bordelail

@Thumbnail-border

Thumbnail Bordiul 9000 3

@Thumbnail-Border

Thumbnail. радиус

@thumbnail-caption-color

Пользовательский цвет текста для подписей миниатюр

@thumbnail-caption-padding

Отступ вокруг заголовка миниатюры

Wells

@well-bg

@граница колодца

Значки

@значок-цвет

@badge-link-hover-color

Цвет текста связанного значка при наведении

@badge-bg

@badge-active-color

Цвет текста значка в активной навигационной ссылке

@badge-active-bg

Цвет фона значка в активной навигационной ссылке

@значок-шрифт-вес

@значок-линия-высота

@badge-border-radius

@breadcrumb-padding-vertical

@breadcrumb-padding-horizontal

@Breadcrumb-bg

Breadcrumb Фон Цвет

@Breadcrumb-Color

Текст хлебной кожух

@breadcrumb-active-color

Цвет текста. между элементами хлебных крошек

Карусель

@carousel-text-shadow

@carousel-control-color

@carousel-control-width

@carousel-control-opacity

@carousel-control-размер-шрифта

@carousel-indicator-active-bg

@carousel-indicator-border-color

@carousel-caption-color

Закрыть

@close-font-weight

@близкий цвет

@close-text-shadow

Код

@код-цвет

@code-bg

@kbd-цвет

@kbd-bg

@pre-bg

@предцвет

@ цвет перед границей

@пре-прокручиваемая-максимальная-высота

Тип

@component-offset-horizontal

Горизонтальное смещение для форм и списков.

@text-muted

Цвет приглушенного текста

@abbr-border-color

Аббревиатуры и акронимы Цвет рамки

@headings-small-color

Headings small color

@blockquote-small-color

Blockquote small color

@blockquote-font-size

Blockquote font size

@blockquote-border-color

Blockquote border color

@page-header-border-color

Цвет границы заголовка страницы

@dl-horizontal-offset

Ширина заголовков списка описаний по горизонтали

@dl-horizontal-breakpoint

Точка, в которой . dl-horizontal становится горизонтальной

@hr-border

Цвет горизонтальной линии.

Ура! Ваша пользовательская версия Bootstrap теперь готова к компиляции. Просто нажмите кнопку ниже, чтобы завершить процесс.

Свойство отображения · Bootstrap v5.0

Как это работает

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

Нотация Отображение служебных классов, которые применяются ко всем точкам останова, от xs до xxl , без аббревиатуры точки останова. Это связано с тем, что эти классы применяются с min-width: 0; и выше, и поэтому не связаны медиа-запросом. Однако остальные точки останова содержат аббревиатуру точки останова. Таким образом, классы именуются в формате: .d-{значение} для xs .d-{точка останова}-{значение} для sm , md , lg , xl и xxl . Где значение является одним из: нет встроенный встроенный блок блок сетка стол таблица-ячейка стол-ряд гибкий встроенный гибкий Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS. Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше . Например, .d-lg-none устанавливает display: none; на экранах lg , xl и xxl . Примеры d-inline d-inline d-inline d-inline d-блок d-блок d-блок d-block Скрытие элементов Чтобы ускорить разработку для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов на разных устройствах. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скрывайте элементы в зависимости от размера экрана. Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого адаптивного варианта экрана. Чтобы показать элемент только на заданном интервале размеров экрана, вы можете объединить один класс .d-*-none с классом .d-*-* , например, .d-none .d-md -block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств. Размер экрана Класс Скрыто на всех .d-нет Скрыто только на xs .d-нет .d-sm-блок Скрыт только на sm .d-sm-none .d-md-block Скрыто только на мд .d-md-none .d-lg-блок Скрыто только на lg .d-lg-нет .d-xl-блок Скрыто только на xl .d-xl-нет .d-xxl-блок Скрыт только на xxl .d-xxl-нет Видно на всех .d-блок Видно только на xs .d-блок .d-sm-нет Видно только на см . d-none .d-sm-block .d-md-none Видно только на md .d-none .d-md-block .d-lg-none Видно только на LG .d-none .d-lg-block .d-xl-none Отображается только на xl .d-none .d-xl-block .d-xxl-none Видно только на xxl .d-нет .d-xxl-блок скрыть на lg и более широких экранах скрыть на экранах меньше lg скрыть на lg и более широких экранах hide on screens less than lg Display in print Измените значение display элементов при печати с помощью наших служебных классов print display. Включает поддержку тех же отображаемых значений , что и наши адаптивные утилиты .d-* . .d-print-нет . d-print-inline .d-print-inline-block .d-принт-блок .d-print-grid .d-стол для печати .d-print-table-row .d-print-table-cell .d-print-flex .d-print-inline-flex Классы печати и отображения можно комбинировать. Только экран (Скрыть только при печати) Только печать (Скрыть только на экране) Скрыть до большого размера на экране, но всегда показывать при печати Только экран (Скрыть только при печати) Только печать (скрывать только на экране) Скрыть до большого размера на экране, но всегда показывать при печати Sass API утилит Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.