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

У вас уже есть конфигурация? Загрузите свой config.json, чтобы импортировать его.

Загрузить

Нет? Ничего страшного - просто начните настраивать поля ниже.

Настройте меньше переменных, чтобы определять цвета, размеры и многое другое внутри ваших пользовательских таблиц стилей 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

Идентификатор элемента в файле значка SVG.

Компоненты

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

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

@input-border

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

@input-border-radius

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

@input-border-radius-large

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

@input-border-radius-small

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

@input-border-focus

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

@input-color-placeholder

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

@input-height-base

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

@input-height-large

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

@input-height-small

Маленькая высота .form-control

@form-group-margin-bottom

.form-group margin

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

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

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

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

@tooltip-max-width

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

@tooltip-color

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

@tooltip-bg

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

@tooltip-opacity

@tooltip-arrow-width

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

@tooltip-arrow-color

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

Всплывающие сообщения (Popovers)

@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 <д class="help-block" id="help-block-@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

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

@progress-bar-warning-bg

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

@progress-bar-danger-bg

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

@progress-bar-info-bg

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

List group

@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

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

Wells

@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

Заголовки мелким цветом

@blockquote-small-color

Цитата мелкий цвет

@blockquote-font-size

Размер шрифта цитаты

@blockquote-border-color

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

@page-header-border-color

@dl-horizontal-offset

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

@dl-horizontal-breakpoint

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

@hr-border

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

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

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

Less файлы

Общий CSS

Компоненты

JavaScript компоненты

Плагины jQuery

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

Магия

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

jQuery обязателен

Переменные Less

Цвета

Скафолдинг

Типография

Иконография

Компоненты

Таблицы

Кнопки

Формы

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

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

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

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

Navbar

Инвертированная панель навигации

Навигация

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

Tabs

Pills

Пагинация

Пейджер

Джамботрон

Состояния форм и предупреждения

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

Всплывающие сообщения (Popovers)

Метки

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

Уведомления

Индикаторы прогресса

List group

Панели

Миниатюры

Wells

Значки

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

Карусель

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

Код

Тип

Скачать