Es gribu mainīt fona un teksta krāsu bootstrap navbar
, bet tas nemainās, kā paredzēts... Šeit ir mans pielāgotais CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Un attiecīgais HTML:
<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
<div class="navbar-header">
<div class="collapse navbar-collapse">
ul and li
</div>
</div>
</div>
Es nevaru saprast, kāpēc tas nemaina fona un teksta krāsu - vai kāds var palīdzēt?
Esmu veiksmīgi izveidojis savu Bootstrap navigācijas joslu, izmantojot šādu CSS. Arī jūs neesat definējis nevienu fontu savā CSS, tāpēc tas ir iemesls, kāpēc fonts nemainās. Vietni, kurā ir izmantots šis CSS, var atrast šeit.
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
Nav nepieciešams, lai jūsu CSS lietojumprogrammā būtu īpašība .navbar-default
. Fona krāsai nepieciešams background-color:#cc333333
(vai vienkārši background:#cc333333
). Visbeidzot, iespējams, vislabāk ir apvienot visus pielāgojumus vienā klasē, kā norādīts turpmāk:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Piemērs: http://www.bootply.com/OusJAAvFqR#
Visticamāk, šīs klases jau ir definētas ar Bootstrap, pārliecinieties, ka jūsu CSS fails, ar kuru vēlaties pārrakstīt klases, tiek saukts PĒC Bootstrap CSS.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Pretējā gadījumā jūs varat ievietot !important
jūsu CSS beigās, piemēram, šādā veidā: Es ieteiktu nekādā gadījumā neizmantot !important
, bet es ieteiktu neizmantot !important
.