Bootstrap 3 · Документация на русском языке · Настроить и скачать Bootstrap 3

Изменяйте переменные LESS для задания цвета, размеров и многого другого внутри вашего измененного стиля CSS.

Основы

Фонт тела документа

@body-bg

Цвет фона применим для <body>.

Типография

@font-family-sans-serif

Изначальный sans-serif шрифт.

@font-family-serif

Изначальный serif шрифт.

@font-family-monospace

Изначальный моноширный шрифт для <code> и <pre>.

@font-family-base

Используется для задания глобального font-family в Bootstrap.

@font-size-base

Используется для высчитывания font-size повсюду в Bootstrap.

@line-height-base

Используется для высчитывания line-height повсюду в Bootstrap.

Блоки кода

@code-color @code-bg

@pre-color @pre-bg @pre-border-color

Заголовки

@headings-font-family

Выберите раздельный font-family для заголовков.

@headings-font-weight

Выберите раздельный font-weight для заголовков.

@headings-line-height

Выберите раздельный line-height для заголовков.

Цвета

Определите измененные цвета используемые в нескольких контекстах.

@brand-primary

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

@brand-success

Используется для показа "успеха".

@brand-warning

Используется для показа "предостережения".

@brand-danger

Используется для показа "опасности".

@brand-info

Используется для показа информационного содержания;

Определите ваши понравившиеся цвета для стандартного текста и ссылок.

@text-color

Укажите общий цвет на тело документа.

@link-color

Общий цвет ссылок для текста.

@link-color-hover

Автоматически затемнять ссылки при наведение через функцию цвета.

Контрольные точки медиаквери

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

@screen-xs @screen-sm

@screen-md @screen-lg

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

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

@container-tablet

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

@container-desktop

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

@container-lg-desktop

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

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

Определите ваш измененную адаптивную сетку.

@grid-gutter-width

Отступы между колонками

@grid-float-breakpoint

Указывает на который навигационный блок остановился свертываться.

Компоненты

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

Отступы

@padding-base-vertical @padding-base-horizontal @padding-large-vertical @padding-large-horizontal @padding-small-vertical @padding-small-horizontal

Размер радиуса у границ

@border-radius-base @border-radius-large @border-radius-small

Цвет активного фона

@component-active-bg

Используется для активного или на наведенного элемента в местах как навигация или выпадающего меню.

Кнопки

Для каждой кнопки в Bootstrap, определен текст, фон и цвет границ.

Изначальный

@btn-default-color @btn-default-bg @btn-default-border

Основной

@btn-primary-color @btn-primary-bg @btn-primary-border

"Информация"

@btn-info-color @btn-info-bg @btn-info-border

Наведение на кнопку

@btn-hover-color

"Успех"

@btn-success-color @btn-success-bg @btn-success-border

"Предостережение"

@btn-warning-color @btn-warning-bg @btn-warning-border

"Опасность"

@btn-danger-color @btn-danger-bg @btn-danger-border

Форма состояний и алертов

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

"Успех"

@state-success-text @state-success-bg @state-success-border

"Предостережение"

@state-warning-text @state-warning-bg @state-warning-border

"Опасность"

@state-danger-text @state-danger-bg @state-danger-border

"Информация"

@state-info-text @state-info-bg @state-info-border

Оповещения

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

Радиус границ

@alert-padding @alert-border-radius

По умолчанию ("Предостережение")

@alert-text @alert-bg @alert-border

"Успех"

@alert-success-text @alert-success-bg @alert-success-border

"Опасность"

@alert-danger-text @alert-danger-bg @alert-danger-border

"Информация"

@alert-info-text @alert-info-bg @alert-info-border

Навигатор по умолчанию

Основы

@navbar-height @navbar-margin-bottom @navbar-default-color @navbar-default-bg @navbar-border-radius

Ссылки

@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-inverse-link-color @navbar-inverse-link-hover-color @navbar-inverse-link-hover-bg @navbar-inverse-link-active-color @navbar-inverse-link-active-bg @navbar-inverse-link-disabled-color @navbar-inverse-link-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

Таблицы

@table-bg

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

@table-bg-accent

Цвет фона используется для .table-striped.

@table-bg-hover

Цвет фона используется для .table-hover.

@table-border-color

Цвет границ для таблиц и границ ячеек таблицы.

Формы

Ввод

@input-color

Цвет текста для <input>

@input-bg

<input> цвет фона

@input-border

<input> цвет границ

@input-border-radius

<input> радиус границ

@input-bg-disabled

<input disabled> цвет фона

Плейсхолдер

@input-color-placeholder

Цвет текста плейсхолдера

Легенда

@legend-color @legend-border-color

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

@input-group-addon-bg

Цвет фона для текстового ввода дополнений

@input-group-addon-border-color

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

Выпадения

Выпадающее меню

@dropdown-bg

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

@dropdown-border

Цвет границ выпадающего меню

@dropdown-fallback-border

Цвет границы в выпадающем меню для ИЕ8

@dropdown-caret-color

Стрелка индикатор для показа что элемент имеет выпадающее меню

@dropdown-divider-bg

Цвет границы верхнего разделителя выпадающего меню

@dropdown-header-color

Цвет текста для заголовков внутри выпадающих меню

Элементы выпадающего меню

@dropdown-link-color

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

@dropdown-link-hover-color

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

@dropdown-link-hover-bg

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

@dropdown-link-active-color

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

@dropdown-link-active-bg

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

@dropdown-link-disabled-color

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

Панели и "колодца"

Общие стили панели

@panel-bg @panel-inner-border

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

@panel-border-radius @panel-footer-bg

Цвет контекста панели

Изначальный

@panel-default-text @panel-default-border @panel-default-heading-bg

Основной

@panel-primary-text @panel-primary-border @panel-primary-heading-bg

"Успех"

@panel-success-text @panel-success-border @panel-success-heading-bg

"Информация"

@panel-info-text @panel-info-border @panel-info-heading-bg

"Предостережение"

@panel-warning-text @panel-warning-border @panel-warning-heading-bg

"Опасность"

@panel-danger-text @panel-danger-border @panel-danger-heading-bg

Источники

@well-bg

Аккордион

@accordion-border-bg

Значки

@badge-color

Цвет текста метки

@badge-bg

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

@badge-link-hover-color

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

@badge-active-color

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

@badge-active-bg

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

Хлебные крошки

@breadcrumb-color

Цвет текста "хлебных крошек"

@breadcrumb-bg

Цвет фона "хлебных крошек"

@breadcrumb-active-color

Цвет текущей страницы в "хлебных крошках"

Jumbotron

@jumbotron-padding

@jumbotron-bg

@jumbotron-color

@jumbotron-heading-color

Модальные окна

@modal-inner-padding

Простраство применяющееся к телу модального окна

@modal-title-padding

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

@modal-title-line-height

Высота линии заголовка модального окна

@modal-content-bg

Цвет фона участка контента модального окна

@modal-content-border-color

Цвет границ контента модального окна

@modal-content-fallback-border-color

Modal content border color for IE8

@modal-backdrop-bg

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

@modal-header-border-color

Цвет границ заголовка модального окна

@modal-footer-border-color

Цвет границ футера модального окна

Карусель

@carousel-text-shadow @carousel-control-color @carousel-indicator-border-color @carousel-indicator-active-bg @carousel-caption-color

Список групп

Фон

@list-group-bg

Изначальный фоновый цвет

@list-group-hover-bg

Цвет бэкграунда одиночного списка элементов на наведение

@list-group-active-bg

Фоновый цвет активного списка элементов

Границы

@list-group-border

Изначальный цвет границ

@list-group-border-radius

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

@list-group-active-border

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

@list-group-active-color

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

Эскизы

@thumbnail-padding

Пространство вокруг изображения миниатюры

@thumbnail-bg

Цвет фона миниатюры

@thumbnail-border

Цвет границ миниатюры

@thumbnail-border-radius

Радиус границ миниатюры

@thumbnail-caption-padding

Пространство вокруг подписи к миниатюре

@thumbnail-caption-color

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

Индикатор состояния

@progress-bg

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

@progress-bar-bg

Изначальный цвет прогресс бара

@progress-bar-success-bg

Цвет прогресс бара "успех"

@progress-bar-warning-bg

Цвет прогресс бара "предупреждение"

@progress-bar-danger-bg

Цвет прогресс бара "опасность"

@progress-bar-info-bg

Цвет информационного прогресс бара

@progress-bar-color

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

@progress-bar-text-shadow

Текстовая тень информационного прогресс бара

Полосная вёрстка

@pagination-bg

Цвет фона

@pagination-border

Цвет границ

@pagination-active-bg

Цвет активного фона

@pagination-active-color

Цвет активного текста

@pagination-disabled-color

Цвет ограниченного текста

@pager-border-radius

Радиус границ "пейджера"

@pager-disabled-color

Цвет неактивного состояния "пейджера"

Метки

@label-default-bg

Изначальный цвет фона лейбла

@label-primary-bg

Основной цвет фона лейбла

@label-success-bg

Цвет фона "успешного" лейбла

@label-info-bg

Цвет фона "информационного" лейбла

@label-warning-bg

Цвет фона лейбла "предостережения"

@label-danger-bg

Цвет фона лейбла "опасности"

"Подсказки" и "поповеры"

Стили "подсказки"

@tooltip-color

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

@tooltip-bg

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

@tooltip-arrow-width

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

@tooltip-arrow-color

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

@tooltip-max-width

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

Стили "поповера"

@popover-bg

Цвет фона тела "поповера"

@popover-title-bg

Цвет фона заголовка "поповера"

@popover-arrow-width

Ширина стрелки "поповера"

@popover-arrow-color

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

@popover-arrow-outer-width

Ширина выносной стрелки "поповера"

@popover-arrow-outer-color

Цвет выносной стрелки "поповера"

@popover-arrow-outer-fallback-color

Цвет запасной выносной стрелки "поповера"

@popover-max-width

Максимальная ширина "поповера"

@popover-border-color

Цвет границ "поповера"

@popover-fallback-border-color

Цвет границ фалбека "поповера"

Кнопка закрыть

@close-color

@close-text-shadow

Тип

@text-muted

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

@abbr-border-color

Цвет границ аббревиатур и акронимов

@headings-small-color

Цвет малого заголовка

@blockquote-small-color

Цвет малого блока цитаты

@blockquote-border-color

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

@page-header-border-color

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

Другие

@hr-border

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

@component-offset-horizontal

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

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

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

Файлы LESS

Общий CSS

Компоненты

JavaScript компоненты

Утилиты

Плагины jQuery

Ссылка на компоненты

Магия

Создаст два файла

Требуется jQuery

Переменные LESS

Основы

Фонт тела документа

Типография

Блоки кода

Заголовки

Цвета

Контрольные точки медиаквери

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

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

Компоненты

Отступы

Размер радиуса у границ

Цвет активного фона

Кнопки

Изначальный

Основной

"Информация"

Наведение на кнопку

"Успех"

"Предостережение"

"Опасность"

Форма состояний и алертов

"Успех"

"Предостережение"

"Опасность"

"Информация"

Оповещения

Радиус границ

По умолчанию ("Предостережение")

"Успех"

"Опасность"

"Информация"

Панель навигации

Навигатор по умолчанию

Основы

Ссылки

Бренд

Переключатель

Инвертированный навигатор

Основы

Ссылки

Бренд

Переключатель

Навигация

Изначальная навигация

Общие значения

Таблетки

Вкладки

Таблицы

Формы

Ввод

Плейсхолдер

Легенда

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

Выпадения

Выпадающее меню

Элементы выпадающего меню

Панели и "колодца"

Общие стили панели

Цвет контекста панели

Изначальный

Основной

"Успех"

"Информация"

"Предостережение"

"Опасность"

Источники

Аккордион