Настройка BS лучше всего достигается, когда вы рассматриваете его как дополнение в развитии вашего проекта. Это гарантирует, последующие обновления как можно проще в то же время Вы сможете самостоятельно ознакомиться с тонкостями фреймворка.
После скачивания и включения файлов Bootstrap'а в Ваш проект, Вы можете перейти к кастомизации. Для этого, - создайте новый файл стилей (LESS или CSS) для сохранения Ваших изменений.
Скомпилированный или минифицированный?
Если Вы не планируете читать Ваш код, - используйте минифицированный. По сути это тот же самый код только компактный (без пробелов и переноса строк). Меньший размер - лучше, особенно при использовании на продакшене.
Настройка компонентов
Существует несколько способов кастомизции компонентов, но все из можно разделить на два: легкое изменение внешнего вида и полная переработка.
Легкое изменение внешнего вида - это изменение цвета, шрифта, размера. В качестве примера мы разберем создание кнопки, .btn-ttc, которую мы используем в документации.
Вместо использования кнопок поставляемых в Bootstrap, которые требуют использования класса, .btn, мы создадим наш собственный класс - .btn-ttc.
<button type="button" class="btn btn-ttc">Сохранить изменения</button>
В кастомный CSS-файл добавьте следующие правила:
/* Custom button
-------------------------------------------------- */
/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
}
/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
...
}
/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
background-position: 0 -15px;
}
Настройка компонентов Bootstrap'а занимает время, но при этом это достаточно просто. Посмотрите на исходный код, изменяйте и дублируйте селекторы, в соответствии с Вашей модификацией. Подключите Ваш CSS-файл после Bootstrap'овских файлов для того что бы переписать правила. Шпаргалка, для изменения компонентов:
- Для каждого элемента, который вы хотите настроить, найдите код в скомпилированном CSS. Скопируйте и вставьте селектор для компонента как есть. Например, для настройки панели навигации, просто используйте
.navbar.
- Добавляйте все кастомные CSS-правила в отдельные файлы для каждого селектора взятого из исходного кода. Нет необходимости в использовании дополнительных классов или
!important.
- Все CSS-файлы идущие после Bootstrap'овских файлов будут переписывать правила фреймовка.
Альтернативные методы настройки
Это не рекомендуется для новичков в работе с Bootstrap, Вы можете использовать один из двух альтернативных способов кастомизации. Первый это изменение .less файлов, второй сопоставление LESS кода с Вашими классами через mixins.
Устранение наворотов
Не все сайты и приложения нуждаются в том что поставляется в Bootstrap, особенно на продакшене где траффик и все приложения играют большую материальную роль. Мы предлагаем выбрать только необходимое среди плагинов и компонентов через Изменить и скачать.