Bootstrap 4'te, bir navbar'ın arka plan rengini nasıl değiştirebilirim? Twbscolor'daki kod çalışmıyor. Arka plan rengini farklı bir renk ve yazı tipi rengini beyaz yapmak istiyorum.
<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Jordan Baron</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Güncelleme 2019
Bootstrap'in CSS'sini düzgün bir şekilde geçersiz kılmak için tanımladığınız CSS geçersiz kılmalarının aynı CSS özgüllüğü veya daha büyük olması gerektiğini unutmayın.
Bootstrap 4.1+
Navbar varsayılan olarak şeffaftır. Yalnızca arka plan rengini değiştirmek istiyorsanız, rengi <navbar class="bg-custom">
a uygulayarak yapabilirsiniz, ancak bunun bağlantılar, fareyle üzerine gelme ve açılır menü renkleri gibi diğer renkleri değiştirmeyeceğini unutmayın.
İşte Bootstrap 4'te herhangi bir ilgili Navbar rengini değiştirecek CSS...
/* change the background color */
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
Demo: http://www.codeply.com/go/U9I2byZ3tS
Navigasyon Çubuğunu Açık veya Koyu Olarak Geçersiz Kıl
Bootstrap 4 Navbar navbar-light
veya navbar-dark
sınıflarını kullanıyorsanız, bunu geçersiz kılmalarda kullanın. Örneğin, Navbar bağlantı renklerini değiştirmek...
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
color: #ffffff;
}
Herhangi bir Bootstrap özelleştirmesi yaparken CSS Spesifikliğini anlamanız gerekir. Özel CSS'nizdeki geçersiz kılmaların bootstrap.css kadar spesifik seçiciler kullanması gerekir. Read more
Şeffaf Navbar
Bootstrap 4 Navbar'ın varsayılan olarak şeffaf olduğuna dikkat edin. Koyu / kalın arka plan renkleri için navbar-dark
kullanın ve navbar daha açık bir renkse navbar-light
kullanın. Bu, metnin rengini ve burada açıklandığı gibi geçiş simgesinin rengini etkileyecektir.
Güncelleme 2019 - Bootstrap v4.1+
Navbar arka plan rengini değiştirmenin çok daha basit bir yolu var.
Sadece .navbar-light
yerine .navbar-dark
kullanın ve .bg-company-red
gibi özel arka plan renk sınıfınızı ekleyin
.navbar-dark` tüm bağlantılarınızı beyaz yapacaktır.
HTML
<nav class="navbar navbar-dark bg-company-red">
CSS stili...
.bg-company-red {
background-color: darkred !important;
}
Resmi belgeler için http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes adresine bakın.
Ben hallederim. Bu çok basit. bg` sınıfını kullanarak bunu kolayca başarabilirsiniz.
Sana göstereyim:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>
Bu size varsayılan mavi navbar
ı verir
Favori renginizi değiştirmek istiyorsanız, nav
içindeki stil etiketini kullanmanız yeterlidir:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">