Как изменить начальный цвет начальной загрузки?

Можно ли изменить основной цвет бутстрапа в соответствии с цветом бренда? В моем случае я использую бумажную тему Bootswatch.Как изменить начальный цвет начальной загрузки?

источник

2016-08-05 ashishjmeshram

Возможный дубликат [Как изменить цвет btn в Bootstrap] (http://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap) – TylerH

Да, просто переопределите его в своем пользовательский CSS-файл, но вам нужно применить множество разных правил для каждого из элементов и их состояния (активный, наведение, фокус и т. д.). – Lee

Вместо того чтобы переопределять CSS, я рекомендую использовать инструмент настройки http: // getbootstrap. com/customize/ – ochi

-6

Да, Я предлагаю открыть файл .css, осмотреть страницу и найти цветовой код, который вы хотите изменить, и найти все и заменить (в зависимости от вашего текстового редактора) цвет, который вы хотите. Сделайте это со всеми цветами вы хотите изменить

источник

2016-08-05 14:46:18

Это на самом деле не лучшая практика. Конечно, это сработает, но всякий раз, когда вы обновляете фреймворк, ваши изменения исчезнут (и вам придется повторять процесс * каждый раз, когда вы выполняете обновление). Вместо этого используйте инструмент настройки (http: // getbootstrap. com/customize /) или добавить свои пользовательские изменения в отдельный .css-файл (переопределяя классы, которые вы хотите переопределить) – ochi

Есть два пути вы можете пойти в

http://getbootstrap.com/customize/

и изменить цвет этой корректировки и скачать начальную загрузку настроенной.

Или вы можете использовать дерзость с этой версией https://github.com/twbs/bootstrap-sass и импортом в вашем SASS активы/таблицах стилей/_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;

и скомпилировать результат

источник

2016-08-05 14:52:28

Использование Sass
изменить цвет бренда

$brand-primary:#some-color;

это изменится тыс e основной цвет по всему пользовательскому интерфейсу.

Использование css-
предположим, что вы хотите изменить кнопку первичного color.So

btn.primary{ 
    background:#some-color; 
}

поиск элемента и добавить новое правило CSS/дерзость в новом файле и прикрепить его после того, как у загрузки начальной загрузки CSS.

источник

2017-01-02 08:11:47

Любой элемент с тегом '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> 
 
    <p>Using the default primary</p> 
 
    <nav class="navbar navbar-dark bg-primary mb-3"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="/">navbar-dark bg-primary</a> 
 
    </div> 
 
    </nav> 
 
    <button type="button" class="btn btn-primary">btn btn-primary</button> 
 
    </div> 
 

 

 
<br> 
 

 
<div class="container"> 
 
    <p>Using customized color</p> 
 
    <nav class="navbar my-primary mb-3"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="/">my-primary</a> 
 
    </div> 
 
    </nav> 
 
    <button type="button" class="btn my-primary">btn my-primary</button> 
 
    </div>

Для дополнительной информации о пользовательских CSS-файлов с начальной загрузки, здесь полезно ссылка: https://bootstrapbay.com/blog/bootstrap-button-styles/.

источник

2017-10-06 17:37:59

Как изменить начальный цвет начальной загрузки?

ответ

Смежные вопросы