Можно ли изменить исходный цвет начальной загрузки в соответствии с цветом бренда? Я использую тему загрузки bootswatch в моем случае.
Как изменить начальный цвет начальной загрузки?
Ответ 1
Обновление 2018 для Bootstrap 4
Чтобы изменить основной или любой из цветов темы в Bootstrap 4 SASS, установите соответствующие переменные перед импортом bootstrap.scss. Это позволяет вашему пользовательскому scss переопределять значения! Default...
$primary: purple;
$danger: red;
@import "bootstrap";
Демо: https://www.codeply.com/go/f5OmhIdre3
В некоторых случаях вы можете захотеть установить новый цвет из другой существующей переменной Bootstrap. Для этого @import функции и переменные сначала, чтобы они могли ссылаться в настройках...
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: (
primary: $purple
);
/* finally, import Bootstrap */
@import "bootstrap";
Демо: https://www.codeply.com/go/lobGxGgfZE
Также см. Этот ответ или этот ответ для изменения цвета кнопки в (CSS или SASS)
Также возможно изменить основной цвет только с помощью CSS, но это требует большого количества дополнительного CSS, поскольку существует множество вариаций -primary (btn -primary, alert -primary, bg -primary, текст -primary, таблица [ CN00], border -primary и т.д.), А некоторые из этих классов имеют небольшие цветовые вариации на границах, при наведении и активных состояниях. Поэтому, если вам нужно использовать CSS, лучше использовать целевой компонент, например, изменить цвет основной кнопки.
Ответ 2
есть два способа перехода на
http://getbootstrap.com/customize/
и измените цвет в этих настройках и загрузите настраиваемый бутстрап.
Или вы можете использовать sass с этой версией https://github.com/twbs/bootstrap-sass и импортировать в свои sass assets/stylesheets/_bootstrap.scss, но перед импортом вы может изменять значения цветов по умолчанию
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff !default;
//** Global text color on `<body>`.
$text-color: $gray-dark !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
и скомпилировать результат
Ответ 3
Я создал этот инструмент: https://lingtalfi.com/bootstrap4-color-generator, Вы просто помещаете основной в первое поле, затем выбираете свой цвет и нажимаете "генерировать".
Затем скопируйте сгенерированный код scss или css и вставьте его в файл с именем my-colors.scss или my-colors.css (или любым другим именем).
Как только вы скомпилируете scss в css, вы можете включить этот файл css ПОСЛЕ загрузочного CSS, и все будет хорошо.
Весь процесс занимает около 10 секунд, если вы понимаете его суть, при условии, что файл my-colors.scss уже создан и включен в тег head.
Примечание. Этот инструмент можно использовать для переопределения цветов по умолчанию при начальной загрузке (основной, дополнительный, опасный,...), но вы также можете создавать собственные цвета (синий, зеленый, троичный,...).
Примечание 2: этот инструмент был создан для работы с начальной загрузкой 4 (то есть пока не любой последующей версией).
Ответ 4
Любой элемент с тегом "primay" имеет цвет @brand-primary. Один из вариантов его изменения - добавление настраиваемого файла CSS, как показано ниже:
.my-primary{
color: lightYellow ;
background-color: red;
}
.my-primary:focus, .my-primary:hover{
color: yellow ;
background-color: darkRed;
}
a.navbar-brand {
color: lightYellow ;
}
.navbar-brand:hover{
color: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<br>
<nav class="navbar navbar-dark bg-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Default (navbar-dark bg-primary)</a>
</div>
</nav>
<button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
</div>
<br>
<div class="container">
<nav class="navbar my-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Customized (my-primary)</a>
</div>
</nav>
<button type="button" class="btn my-primary">Customized (btn my-primary)</button>
</div>Ответ 5
Правильный способ изменить основной цвет по умолчанию в Bootstrap 4.x с помощью SASS или любых других цветов, таких как вторичный, успешный и т.д.
Создайте следующий файл SASS и импортируйте Bootstrap SASS, как указано:
// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
$primary: blue;
$secondary: green;
$my-color: red;
$theme-colors: (
primary: $primary,
secondary: $secondary,
my-color: $my-color
);
// Add below your SASS or CSS code
// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
Ответ 6
Использование SaSS Изменение цвета бренда
$brand-primary:#some-color;
это изменит основной цвет по всему пользовательскому интерфейсу.
Использование css-
Предположим, вы хотите изменить основной цвет кнопки. Так что
btn.primary{
background:#some-color;
}
найдите элемент и добавьте новый css/sass правило в новом файле и присоединить его после загрузки загрузочного буфера css.
Ответ 7
Это может быть немного старый вопрос, но я хочу поделиться лучшим способом, который я нашел для настройки начальной загрузки.
Там онлайн инструмент под названием bootstrap.build https://bootstrap.build/app. Он отлично работает и не требует установки или установки инструментов!
Ответ 8
Бутстрап 4
Вот что сработало для меня:
Я создал свой собственный файл _custom_theme.scss с содержанием, похожим на:
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
Добавил его в начало файла bootstrap.scss и перекомпилировал (в моем случае он был в папке с именем! scss)
@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
Ответ 9
Начиная с Bootstrap 4, вы можете легко изменить основной цвет вашего Bootstrap, загрузив простой файл CSS на BootstrapColor.net. Вам не нужно знать SASS, и файл CSS готов к использованию для вашего сайта. Вы можете выбрать желаемый цвет: синий, индиго, фиолетовый, розовый, красный, оранжевый, желтый, зеленый, бирюзовый или голубой.
Ответ 10
Это очень простое решение.
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
замените класс bg-dark на bg-custom.
В CSS
.bg-custom {
background-color: red;
}
Ответ 11
- Вы не можете изменить цвет в файле CDN.
- Загрузите файл начальной загрузки.
- Поиск файла bootstrap.css.
- Откройте этот файл (bootstrsap.css) и найдите "основной".
- измените его на цвет, который вы хотите.
Ответ 12
Да, Я предлагаю открыть файл .css, осмотреть страницу и найти цветовой код, который вы хотите изменить, и найти все и заменить (в зависимости от вашего текстового редактора) цвет, который вы хотите. Сделайте это со всеми цветами, которые вы хотите изменить