Обновление 2018 - Bootstrap 4
Я снова рассматриваю этот вопрос о настройке Bootstrap для 4.x, который теперь использует SASS вместо LESS.В общем, есть 2 способа настройки Bootstrap ...
1.Простые переопределения CSS
Одним из способов настройки является простое использование CSS для переопределения Bootstrap CSS.Для удобства обслуживания настройки CSS помещаются в отдельный файл custom.css, поэтому bootstrap.css остается неизменным.Ссылка на custom.css следует после bootstrap.css для работы переопределений ...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
Просто добавьте все необходимые изменения в пользовательский CSS.Например ...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
До (bootstrap.css)
После (с custom.css)
При настройке вы должны понимать CSS Specificity .Переопределения в custom.css требуют использования таких специфических селекторов, как bootstrap.css.
Обратите внимание, что нет необходимости использовать !important в пользовательском CSS, если только вы не переопределяете один Bootstrap Utility классов . Специфика CSS всегда работает для одного класса CSS, чтобы переопределить другой.
2.Настройка с использованием SASS
Если вы знакомы с SASS (и вам следует использовать этот метод), вы можете настроить Bootstrap с помощью собственного custom.scss.В документации Bootstrap есть раздел , который объясняет это, однако документы не объясняют , как использовать существующие переменные в вашем custom.scss.Например, давайте изменим цвет фона тела на #eeeeee, а изменим / переопределим синий primary контекстный цвет на переменную Bootstrap $purple ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
Это также работает для создания новых пользовательских классов .Например, здесь я добавляю purple к цветам темы, что создает все CSS для btn-purple, text-purple, bg-purple, alert-purple и т. Д. *
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://www.codeply.com/go/7XonykXFvP
С помощью SASS вы должны @ import bootstrap после настроек , чтобы заставить их работать!Как только SASS скомпилирован в CSS ( это должно быть сделано с помощью компилятора SASS node-sass, gulp-sass, npm webpack и т. Д. ), в результате CSS становится настроенной Bootstrap.Если вы не знакомы с SASS, вы можете настроить Bootstrap, используя инструмент, подобный этому построитель тем , который я создал.
Custom Bootstrap Demo(SASS)
Примечание. В отличие от 3.x, Bootstrap 4.x не предлагает официальный инструмент настройки.Однако вы можете загрузить только сетку CSS или использовать другой 4.x пользовательский инструмент сборки , чтобы перестроить Bootstrap 4 CSS по своему усмотрению.
Похожие:
Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS
Как изменить основной цвет начальной загрузки?
Как создать новый набор цветовых стилей в Bootstrap 4 с помощью sass
Как настроить Bootstrap