Mainīt bootstrap navigācijas joslas fona krāsu un fonta krāsu

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?

Shawn Taylor
Rediģēts jautājums 11priekšpusdienari2t jūnijā 2014 в 4:00
Programmēšana
css twitter-bootstrap-3 twitter-bootstrap
9pēcpusdienari0t jūnijā 2014 в 7:29
Pagaidām nav skatījumu
Risinājums

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*/
}
Ivar
Rediģēta atbilde 11priekšpusdienari2t aprīlī 2018 в 8:44
Komentāri (1)

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#

Komentāri (5)

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.

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.

Komentāri (0)