11
Önyükleme şeridi birincil rengini marka rengine uyacak şekilde değiştirmek mümkün müdür? Benim durumumda bootswatch'un kağıt temasını kullanıyorum.Önyükleme birincil rengi nasıl değiştirilir?
A
cevap
-6
Evet, Evet, .css dosyasını açmanızı, sayfayı incelemenizi ve değiştirmek istediğiniz renk kodunu bulmanızı ve Bul ve Değiştir'i (metin düzenleyicinize bağlı olarak) istediğiniz renge ayarlamanızı öneririm. Bütün renkleri ile size
http://getbootstrap.com/customize/
gidip bu ayarlamaları rengini değiştirmek ve özelleştirilmiş ön yükleme alanı indirebilirsiniz iki yol vardır
+1
Bu aslında en iyi uygulama değildir. Tabii ki işe yarayacaktır, ancak çerçeveyi her yükselttiğinizde, değişiklikleriniz ortadan kalkar (ve işlemi tekrar etmeniz gerekir * her bir tek seferde * yükseltme yaparsınız) - Bunun yerine, özelleştirici aracını kullanın (http: // getbootstrap. com/customize /) veya özel değişikliklerinizi ayrı bir .css dosyasına (geçersiz kılmak istediğiniz sınıfları geçersiz kılarak) ekleyin. – ochi
9
değiştirmek istediğinizi yapın.
Yoksa bu ayarları varsayılan değişken renkler
//== 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;
1
Sass
değişiklik marka renk
değişiklik marka renk
$brand-primary:#some-color;
bu th değişecek kullanma
Tüm kullanıcı arayüzünde ana renk. css-
kullanma
u önyükleme css yüklemek sonra eleman arama düğmesi birincil color.So
btn.primary{
background:#some-color;
}
değiştirip yeni bir dosyaya yeni bir css/küstahlık kural eklemek ve eklemek istediğinizi varsayalım.
3
'primay' etiketli tüm öğeler, color @ marka-birincil değerine sahiptir. seçeneklerden biri aşağıdaki gibi bir özelleştirilmiş css dosyası ekliyor değiştirmek için:
.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>bootstrap ile özelleştirilmiş css dosyaları hakkında daha fazla bilgi için buraya yararlı bir bağlantı: https://bootstrapbay.com/blog/bootstrap-button-styles/.
Olası çoğaltması [Bootstrap'te btn rengini değiştirme] (http://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap) – TylerH
Evet, yalnızca bunu geçersiz kılın. Özel CSS dosyası, ancak öğelerin her biri için çok farklı kurallar uygulamanız gerekecek ve bunların durumları (etkin, vurgulu, odak vb.) – Lee
CSS'yi geçersiz kılmak yerine, http: // getbootstrap özelleştirme aracını kullanmanızı öneririz. com/customize/ – ochi