Кастомизация и скачивание

Внимание! Значение по умолчанию для @brand-primary изменено в последнем релизе для улучшения контрастности и доступности. Пожалуйста, проверьте ваш скомпилированный CSS при обновлении.

Уже есть конфигурация? Загрузите ваш 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

Скелетон

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

@body-bg

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

@text-color

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

@link-color

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

@link-hover-color

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

@link-hover-decoration

Декорация ссылки при наведении.

Типографика

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

@font-family-sans-serif

@font-family-serif

@font-family-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

Единичный line-height для использования в компонентах, таких как кнопки.

@line-height-computed

Вычисленный line-height (font-size * line-height) для использования с margin, padding и т.д.

@headings-font-family

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

@headings-font-weight

@headings-line-height

@headings-color

Иконки

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

@icon-font-path

Загружает шрифты из этой директории.

@icon-font-name

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

@icon-font-svg-id

ID элемента в SVG файле иконок.

Компоненты

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

@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

Глобальный цвет для активных элементов (например, навигация или выпадающие меню).

@component-active-bg

Глобальный цвет фона для активных элементов (например, навигация или выпадающие меню).

@caret-width-base

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

@caret-width-large

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

Таблицы

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

@table-cell-padding

Отступы для <th> и <td>.

@table-condensed-cell-padding

Отступы для ячеек в .table-condensed.

@table-bg

Стандартный цвет фона для всех таблиц.

@table-bg-accent

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

@table-bg-hover

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

@table-bg-active

@table-border-color

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

Кнопки

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

@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

Стандартный радиус границы для .form-control

@input-border-radius-large

Большой радиус границы для .form-control

@input-border-radius-small

Малый радиус границы для .form-control

@input-border-focus

Цвет границы для <input> при фокусе

@input-color-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-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 начиная с v3.1.0

Точки переключения медиа-запросов

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

@screen-xs

Устарел @screen-xs начиная с v3.0.

@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

Отступ между колонками. Получается разделенным пополам для левого и правого.

@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

Вкладки

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

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

@popover-title-bg

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

@popover-arrow-width

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

@popover-arrow-color

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

@popover-arrow-outer-width

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

@popover-arrow-outer-color

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

@popover-arrow-outer-fallback-color

Цвет внешней стрелки всплывающей подсказки для IE8

Метки

@label-default-bg

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

@label-primary-bg

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

@label-success-bg

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

@label-info-bg

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

@label-warning-bg

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

@label-danger-bg

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

@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

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

@progress-bar-bg

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

@progress-bar-success-bg

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

@progress-bar-warning-bg

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

@progress-bar-danger-bg

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

@progress-bar-info-bg

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

Списки

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

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

@thumbnail-bg

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

@thumbnail-border

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

@thumbnail-border-radius

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

@thumbnail-caption-color

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

@thumbnail-caption-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

Цвет текста 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

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

@hr-border

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

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

Кастомизация и скачивание

Less-файлы

Common CSS

Components

JavaScript components

jQuery плагины

Linked to components

Magic

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

Требуется jQuery

Переменные Less

Цвета

Скелетон

Типографика

Иконки

Компоненты

Таблицы

Кнопки

Формы

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

Точки переключения медиа-запросов

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

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

Навигационное меню

Инвертированное навигационное меню

Навигация

Общие стили навигации

Вкладки

Таблетки

Пагинация

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

Джомботрон

Состояния формы и оповещения

Подсказки

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

Метки

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

Оповещения

Полосы прогресса

Списки

Панели

Миниатюры

Выделенные блоки

Метки

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

Карусель

Закрытие

Код

Тип

Скачать