Настройка и загрузка. Документация Bootstrap 3.3.7

Внимание! The default value for @brand-primary has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading.

Есть существующая конфигурация? Загрузите config.json чтобы импортировать её.

Перетащите сюда, или вручную загрузить.

Нет ниодного? хорошо—просто начните настройку полей ниже.

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

Цвета

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

@gray-base

@gray-darker

@gray-dark

@gray

@gray-light

@gray-lighter

@brand-primary

@brand-success

@brand-info

@brand-warning

@brand-danger

Scaffolding

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

@body-bg

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

@text-color

Глобальный цвет текста для <body>.

@link-color

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

@link-hover-color

Цвет наведения ссылки устанавливается через функцию darken().

@link-hover-decoration

Link hover decoration.

Типография

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

@font-family-sans-serif

@font-family-serif

@font-family-monospace

По умолчанию шрифт monospace для <code>, <kbd>, и <pre>.

@font-family-base

@font-size-base

@font-size-large

@font-size-small

@font-size-h1

@font-size-h2

@font-size-h3

@font-size-h4

@font-size-h5

@font-size-h6

@line-height-base

Измерение-less line-height для использования в компонентах как кнопки.

@line-height-computed

Компьютерная и Quot; высота строки и Quot; (font-size * line-height) для использования с margin, padding,и т.д.

@headings-font-family

По умолчанию этот наследуется от <body>.

@headings-font-weight

@headings-line-height

@headings-color

Iconography

Укажите другое расположение и имя файла включены шрифта Glyphicons значок. Полезно для тех, в том числе Bootstrap через Bower.

@icon-font-path

Загружать шрифты из этого каталога.

@icon-font-name

Имя файла для всех файлов шрифтов.

@icon-font-svg-id

Элемент ID в SVG значок файла.

Компонентам

Определите общий padding и размер border и многое другое. Базовые значения 14px текст и 1.428 line-height (~20px to start).

@padding-base-vertical

@padding-base-horizontal

@padding-large-vertical

@padding-large-horizontal

@padding-small-vertical

@padding-small-horizontal

@padding-xs-vertical

@padding-xs-horizontal

@line-height-large

@line-height-small

@border-radius-base

@border-radius-large

@border-radius-small

@component-active-color

Глобальный цвет для активных элементов (т.к. navs or dropdowns).

@component-active-bg

Глобальный фон для активных элементов (т.к. navs or dropdowns).

@caret-width-base

Ширина border для создания каре, которые указывают выпадающих меню.

@caret-width-large

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

Таблицы

Настраивает .table компонетнт с базовыми значениями, используется во всех вариантах таблицы.

@table-cell-padding

Padding для <th> и <td>

@table-condensed-cell-padding

Padding для ячеек в .table-condensed.

@table-bg

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

@table-bg-accent

Цвет фона по умолчанию, который используется для .table-striped.

@table-bg-hover

Цвет фона по умолчанию, который используется для .table-hover.

@table-bg-active

@table-border-color

Цвет рамок для таблиц и ячеек.

Кнопки

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

@btn-font-weight

@btn-default-color

@btn-default-bg

@btn-default-border

@btn-primary-color

@btn-primary-bg

@btn-primary-border

@btn-success-color

@btn-success-bg

@btn-success-border

@btn-info-color

@btn-info-bg

@btn-info-border

@btn-warning-color

@btn-warning-bg

@btn-warning-border

@btn-danger-color

@btn-danger-bg

@btn-danger-border

@btn-link-disabled-color

@btn-border-radius-base

@btn-border-radius-large

@btn-border-radius-small

Формы

@input-bg

Цвет фона <input>

@input-bg-disabled

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

@input-color

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

@input-border

Цвет рамок <input>

@input-border-radius

Default .form-control border radius

@input-border-radius-large

Large .form-control border radius

@input-border-radius-small

Small .form-control border radius

@input-border-focus

Цвет рамки формы ввода (input) в фокусе

@input-color-placeholder

Цвет текста Placeholder

@input-height-base

Высота .form-control по умолчанию

@input-height-large

Большая высота .form-control

@input-height-small

Малая высота .form-control

@form-group-margin-bottom

.form-group отступ

@legend-color

@legend-border-color

@input-group-addon-bg

Цвет фона для текстовых приложений форм ввода (input)

@input-group-addon-border-color

Цвет рамок для текстовых приложений форм ввода (input)

@cursor-disabled

Disabled cursor for form controls and buttons.

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

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

@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 по состоянию на v3.1.0

Медиа запросы точки прерывания

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

@screen-xs

Устаревшее @screen-xs по состоянию на v3.0.1

@screen-xs-min

Устаревшее @screen-xs-min по состоянию на v3.2.0

@screen-phone

Устаревшее @screen-phone по состоянию на v3.0.1

@screen-sm

Устаревшее @screen-sm по состоянию на v3.0.1

@screen-sm-min

@screen-tablet

Устаревшее @screen-tablet по состоянию на v3.0.1

@screen-md

Устаревшее @screen-md по состоянию на v3.0.1

@screen-md-min

@screen-desktop

Устаревшее @screen-desktop по состоянию на v3.0.1

@screen-lg

Устаревшее @screen-lg по состоянию на v3.0.1

@screen-lg-min

@screen-lg-desktop

Устаревшее @screen-lg-desktop по состоянию на v3.0.1

@screen-xs-max

@screen-sm-max

@screen-md-max

Блочная система

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

@grid-columns

Количество колонок в сетке.

@grid-gutter-width

Padding между столбцами. Возвращает разделенные пополам слева и справа.

@grid-float-breakpoint

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

@grid-float-breakpoint-max

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

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

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

@container-tablet

@container-sm

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

@container-desktop

@container-md

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

@container-large-desktop

@container-lg

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

@navbar-height

@navbar-margin-bottom

@navbar-border-radius

@navbar-padding-horizontal

@navbar-padding-vertical

@navbar-collapse-max-height

@navbar-default-color

@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-inverse-border

@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

Tabs

@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

Pills

@nav-pills-border-radius

@nav-pills-active-link-hover-bg

@nav-pills-active-link-hover-color

Нумерация

@pagination-color

@pagination-bg

@pagination-border

@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

@pager-bg

@pager-border

@pager-border-radius

@pager-hover-bg

@pager-active-bg

@pager-active-color

@pager-disabled-color

Jumbotron

@jumbotron-padding

@jumbotron-color

@jumbotron-bg

@jumbotron-heading-color

@jumbotron-font-size

@jumbotron-heading-font-size

Форма состояния и предупреждений

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

@state-success-text

@state-success-bg

@state-success-border

@state-info-text

@state-info-bg

@state-info-border

@state-warning-text

@state-warning-bg

@state-warning-border

@state-danger-text

@state-danger-bg

@state-danger-border

Подсказки

@tooltip-max-width

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

@tooltip-color

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

@tooltip-bg

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

@tooltip-opacity

@tooltip-arrow-width

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

@tooltip-arrow-color

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

Информеры

@popover-bg

Цвет фона тела информера

@popover-max-width

Максимальная ширина информера

@popover-border-color

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

@popover-fallback-border-color

Цвет рамки отступления информера

@popover-title-bg

Цвет фона названия информера

@popover-arrow-width

Ширина стрелочки информера

@popover-arrow-color

Цвет стрелочки информера

@popover-arrow-outer-width

Внешняя ширина стілочки информера

@popover-arrow-outer-color

Внешний цвет стрелочки информера

@popover-arrow-outer-fallback-color

Цвет отступления стрелки информера

Ярлыки

@label-default-bg

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

@label-primary-bg

Главный цвет фона ярлыка

@label-success-bg

Цвет фона ярлыка при успехе

@label-info-bg

Цвет фона информационного ярлыка

@label-warning-bg

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

@label-danger-bg

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

@label-color

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

@label-link-hover-color

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

Модали

@modal-inner-padding

@modal-title-padding

@modal-title-line-height

@modal-content-bg

@modal-content-border-color

@modal-content-fallback-border-color

@modal-backdrop-bg

@modal-backdrop-opacity

@modal-header-border-color

@modal-footer-border-color

@modal-lg

@modal-md

@modal-sm

Уведомления

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

@alert-padding

@alert-border-radius

@alert-link-font-weight

@alert-success-bg

@alert-success-text

@alert-success-border

@alert-info-bg

@alert-info-text

@alert-info-border

@alert-warning-bg

@alert-warning-text

@alert-warning-border

@alert-danger-bg

@alert-danger-text

@alert-danger-border

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

@progress-bg

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

@progress-bar-color

Цвет текста шкалы прогресса

@progress-border-radius

Variable for setting rounded corners on progress bar.

@progress-bar-bg

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

@progress-bar-success-bg

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

@progress-bar-warning-bg

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

@progress-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

Цвет фона инвалидов список itemsText цвет инвалидов элементов списка

@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-footer-padding

@panel-border-radius

@panel-inner-border

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

@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

Эскизы

@thumbnail-padding

Величина внутренних отступов (padding) вокруг эскизов изображений

@thumbnail-bg

Цвет фона эскизов

@thumbnail-border

Цвет рамки эскизов

@thumbnail-border-radius

Радиус рамок миниатюр

@thumbnail-caption-color

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

@thumbnail-caption-padding

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

Ячейки

@well-bg

@well-border

Значки

@badge-color

@badge-link-hover-color

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

@badge-bg

@badge-active-color

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

@badge-active-bg

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

@badge-font-weight

@badge-line-height

@badge-border-radius

Навигационный маршрут

@breadcrumb-padding-vertical

@breadcrumb-padding-horizontal

@breadcrumb-bg

@breadcrumb-color

@breadcrumb-active-color

@breadcrumb-separator

Карусель

@carousel-text-shadow

@carousel-control-color

@carousel-control-width

@carousel-control-opacity

@carousel-control-font-size

@carousel-indicator-active-bg

@carousel-indicator-border-color

@carousel-caption-color

Кнопка закрытия

@close-font-weight

@close-color

@close-text-shadow

Код

@code-color

@code-bg

@kbd-color

@kbd-bg

@pre-bg

@pre-color

@pre-border-color

@pre-scrollable-max-height

Тип

@component-offset-horizontal

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

@text-muted

Приглушенный цвет текста

@abbr-border-color

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

@headings-small-color

Цвет заголовков в рамках элемента small

@blockquote-small-color

Цвет цитаты в рамках элемента small

@blockquote-font-size

Размер шрифта блока цитат

@blockquote-border-color

Цвет рамки цитаты

@page-header-border-color

@dl-horizontal-offset

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

@dl-horizontal-breakpoint

Точка, в которой .дл-горизонтального горизонтального

@hr-border

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

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

Компилировать и скачать

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

Компоненты Less

Общие CSS

Компоненты

Компоненты JavaScript

jQuery Плагины

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

Magic

Производит два файла

Требуется jQuery

Less переменные