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

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Преимущества и недостатки фреймворка Bootstrap

Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:

• высокая скорость создания качественной адаптивной вёрстки даже начинающими веб-разработчиками (достигается это благодаря использованию готовых классов и компонентов, созданных профессионалами);
• кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
• наличие большого количество готовых хорошо продуманных компонентов, протестированных огромным сообществом веб-разработчиков на различных устройствах;
• возможность настройки под свой проект, достигается это посредством изменения SCSS переменных и использования миксинов (можно изменить количество колонок, цвета, радиус скруглений, отступы между колонками и т.д.);
• низкий порог вхождения; для работы с фреймворком не обязательно иметь «глубокие» знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы этих технологий);
• однородность дизайна и его согласованность между различными компонентами (в Bootstrap все компоненты выполнены в едином стиле);
• наличие огромных сообществ и обучающих материалов; при желании это поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые вопросы.

Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно бесплатно использовать как в открытых, так и в коммерческих проектах.

Bootstrap, конечно, хороший инструмент, но на нём верстают далеко не всё. Его, например не имеет смысла использовать для:

• создания фронтендов проектов с уникальным дизайном;
• разработки проектов, в которых заказчик готов платить за проект на «чистом» CSS и JavaScript (в большинстве случаях такая разработка осуществляется в команде, в которой каждый её участник выполняет какой-то свой определенный набор функций);
• вёрстки личных проектов, если у вас есть достаточно количество времени и ваш уровень знаний по HTML, CSS и JavaScript является достаточным, чтобы это осуществить.

Bootstrap, как и большинство подобных фреймворков, имеет недостатки. Среди них можно отметить следующие:

• более большой размер конечных css и js-файлов проекта, чем они получились, если бы мы всё это создавали самостоятельно (это связано с тем, что стили фреймворка и его js-код содержат универсальный код (на все случаи жизни), а по факту для конкретного проекта из всего этого может потребоваться только часть);
• сложность использования Bootstrap для вёрстки сайтов с уникальным дизайном, т.к. разработка в этом случае будет сопровождаться значительным переписыванием его кода и простой настройкой Bootstrap переменных тут уже не обойтись.

Первый недостаток можно немного «сгладить», если выполнить самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нам нужны. В этом случае код этого фреймворка будет значительно меньше. Как это выполнить в Bootstrap 4 можно посмотреть здесь, а в Bootstrap 3 — тут.

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ.

Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.

Мобильных устройств

Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию

Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются

	Chrome	В Firefox	Safari
Android	Supported	Supported	N/A
iOS	Supported	Supported	Supported

Браузеры для ПК

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

	Chrome	В Firefox	Internet Explorer	Opera	Safari
Mac	Supported	Supported	N/A	Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not supported

В Windows мы поддерживаем Internet Explorer 8-11.

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также интернет Эксплорер 7, а также Microsoft края, хотя они официально не поддерживаются.

Список некоторых ошибок в брузере, с чем Bootstrap может столкнуться, смотрите наш Баги в браузере.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. для уточнений.

Respond.js и

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). для уточнений.

Respond.js и

Respond.js не работает с CSS, на которые ссылаются как . В частности, некоторые конфигурации Drupal, как известно, используют . для уточнений.

Тип

@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

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

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from to . Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Equal-width columns can be broken into multiple lines, but there was a that prevented this from working without an explicit or . There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column

Column
Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

Use classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a where you want the columns to break to a new line. Make the breaks responsive by mixing the with some responsive display utilities.

col
col

col
col

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while sets the width for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in (not , , or ).

Как это работает

На высоком уровне, блочная система работает так:

• Существует три основных компонента—контейнера, строки и столбцы.
• Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
• «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
• Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
• Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
• Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
• Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
• Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
• Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
• Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

• Follow @getbootstrap on Twitter.
• Read and subscribe to The Official Bootstrap Blog.
• Join the official Slack room.
• Chat with fellow Bootstrappers in IRC. On the server, in the channel.
• Implementation help may be found at Stack Overflow (tagged ).
• Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Печать

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

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. и Ошибке Chrome #273306. Рекомендуемые обходные пути:

• Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
• Настройка значения Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
• Добавить Пользовательское медиа запросы изменение грид Размер точки останова для печати медиа только.

Также, как Сафари и v8.0, фиксированной ширины может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? for background, terminology, guidelines, and code snippets.

One of three columns

One of three columns

One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .

Breaking it down, here’s how it works:

• Containers provide a means to center and horizontally pad your site’s contents. Use for a responsive pixel width or for across all viewport and device sizes.
• Rows are wrappers for columns. Each column has horizontal (called a gutter) for controlling the space between them. This is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
• In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
• Thanks to flexbox, grid columns without a specified will automatically layout as equal width columns. For example, four instances of will each automatically be 25% wide from the small breakpoint and up. See the section for more examples.
• Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .
• Column s are set in percentages, so they’re always fluid and sized relative to their parent element.
• Columns have horizontal to create the gutters between individual columns, however, you can remove the from rows and from columns with on the .
• To make the grid responsive, there are five grid breakpoints, one for each : all breakpoints (extra small), small, medium, large, and extra large.
• Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., applies to small, medium, large, and extra large devices, but not the first breakpoint).
• You can use predefined grid classes (like ) or for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the .

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

• Подключить компилированные файлы c помощью BootstrapCDN.
• Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
• Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
• Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке. Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h1>Привет, мир!</h1>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

• bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
• bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
• bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

• bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
• bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css" >

</head>

<body>

    <h1>Привет, мир!</h1>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>    

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами

Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

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

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

@dropdown-bg

Фон для выпадающего menu.

@dropdown-border

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

@dropdown-fallback-border

Выпадающее меню для 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

Устаревшее по состоянию на v3.1.0

III. Дополнительно

глава шестая

Примеры

• Создание галереи изображений
• Динамическое создание модальных окон
• Форма обратной связи
• Как создать таймлайн (timeline)?
• Виджеты для выбора даты и времени
• Галереи для представления статей или новостей на
  сайте
• Как можно оформить комментарии на
  сайте
• Валидация HTML формы
• Графическая капча для защиты
  сайта от спама

глава седьмая

Разное

• Как изменить
  оформление Navbar (меню)
• Offcanvas (изменение мобильного вида меню
  navbar)
• Сторонние компоненты для реализации
  основного меню
• Создание своих адаптивных
  контейнеров
• Инструкция по созданию
  дополнительных стилей к компонентам
• Оформление заголовков
• Набор шрифтовых иконок Font Awesome
• Шрифтовые иконки погоды
• Сайты, c которых можно бесплатно загрузить
  шаблоны и темы Bootstrap
• Справочник по CSS классам Bootstrap
  3
• Инструменты для визуального проектирования
  макетов веб-страниц
• Как оформить контент в виде выноски
• Оформление элементов Bootstrap
  в стиле Modern UI (Metro)
• Создание сайта визитки (Часть 1)

• Создание сайта визитки (Часть 2)

• Создание сайта визитки (Часть 3)

• Создание сайта визитки (Часть 4)

• Создание сайта визитки (Часть 5)

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

• Follow @getbootstrap on Twitter.
• Read and subscribe to The Official Bootstrap Blog.
• Join the official Slack room.
• Chat with fellow Bootstrappers in IRC. On the server, in the channel.
• Implementation help may be found at Stack Overflow (tagged ).
• Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Список группы

@list-group-bg

Цвет фона в

@list-group-border

Цвет рамок

@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

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

One of three columns

One of three columns

One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .

Breaking it down, here’s how it works:

• Containers provide a means to center your site’s contents. Use for fixed width or for full width.
• Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on to ensure all your content is aligned properly down the left side.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of will each automatically be 25% wide for small breakpoints.
• Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .
• Column s are set in percentages, so they’re always fluid and sized relative to their parent element.
• Columns have horizontal to create the gutters between individual columns, however, you can remove the from rows and from columns with on the .
• There are five grid tiers, one for each : all breakpoints (extra small), small, medium, large, and extra large.
• Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., applies to small, medium, large, and extra large devices).
• You can use predefined grid classes or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the .

Sounds good? Great, let’s move on to seeing all that in an example.

Настройка грид

Используя наш встроенного грид Sass переменные и карты, можно полностью настроить предопределенные грид классов. Изменение количества уровней, в медиа Размеры запроса и ширину контейнера—то перекомпилировать.

Столбцы и промежутки

Число грид столбцами и горизонтальными внутренний отступ (ака, промежутки) может быть изменен через Sass переменные. используется для создания ширины (в процентах) каждого отдельного столбца в то время как делятся поровну между и для водостоков колонки.

Грид уровней

Перемещение за пределы самих колонок, Вы также можете настроить количество грид уровнях. Если вы хотели всего лишь три грид уровней, вы бы обновление и Что-то вроде этого:

При внесении любых изменений в файл Sass переменные или карты, Вам необходимо сохранить изменения и перекомпилировать. Это будет совершенно новый набор предопределенных грид классы для ширины столбцов, смещение, толкает и тянет. Адаптивный ЖКХ видимости также будут обновлены, чтобы использовать пользовательские точки останова.

Формы

@input-bg

Цвет фона

@input-bg-disabled

Цвет фона

@input-color

Цвет текста для

@input-border

Цвет рамок

@input-border-radius

Default border radius

@input-border-radius-large

Large border radius

@input-border-radius-small

Small border radius

@input-border-focus

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

@input-color-placeholder

Цвет текста Placeholder

@input-height-base

Высота по умолчанию

@input-height-large

Большая высота

@input-height-small

Малая высота

@form-group-margin-bottom

отступ

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