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

Настройте 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 переменные