web-dev-qa-db-fra.com

Couleur Bootbar 4 navbar

Dans Bootstrap 4, comment puis-je changer la couleur de fond d'une barre de navigation? Le code de twbscolor ne fonctionne pas. Je souhaite que la couleur d'arrière-plan soit différente et que la police soit blanche.

<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>
bootstrap-4twitter-bootstrap-4
28
hiboo

Mise à jour 2018

Rappelez-vous que toute modification CSS que vous définissez doit correspondre à la même spécificité CSS ou supérieure afin de remplacer correctement les CSS de Bootstrap.

Bootstrap 4.1+ 

Si vous uniquement souhaitez modifier la couleur d'arrière-plan, vous pouvez le faire en appliquant simplement la couleur au <navbar class="bg-custom">, mais souvenez-vous que cela ne changera pas les autres couleurs telles que les couleurs des liens, du survol et du menu déroulant.

Voici les CSS qui modifieront les couleurs {toutes les} pertinentes de la barre de navigation dans Bootstrap 4 ...

/* 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;
}

Démo: http://www.codeply.com/go/U9I2byZ3tS

Substitue Navbar Light ou Dark

Si vous utilisez les classes Bootstrap 4 Navbar navbar-light ou navbar-dark, utilisez-les dans les substitutions. Par exemple, changer les couleurs du lien de la barre de navigation ...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #ffffff;
}

Lors de la personnalisation de Bootstrap, vous devez comprendre la spécificité CSS. Les remplacements dans votre code CSS personnalisé doivent utiliser des sélecteurs aussi spécifiques que le fichier bootstrap.css. Lire la suite

Barre de navigation transparente

Notez que la barre de navigation Bootstrap 4 est transparente par défaut. Utilisez navbar-dark pour les couleurs d'arrière-plan sombres/gras, et navbar-light si la barre de navigation est d'une couleur plus claire. Ceci affectera la couleur du texte et la couleur de l’icône du bascule comme expliqué ici .

Connexes: https://stackoverflow.com/a/18530995/171456

25
Zim

Mise à jour 2018 - Bootstrap v4.1 +

Voici un moyen beaucoup plus simple de changer la couleur d'arrière-plan de la barre de navigation.

Utilisez simplement .navbar-dark au lieu de .navbar-light et ajoutez votre classe de couleur d'arrière-plan personnalisée telle que .bg-company-red

.navbar-dark rendra tous vos liens blancs.

HTML

<nav class="navbar navbar-dark bg-company-red">

Style CSS ...

.bg-company-red {
    background-color: darkred !important;
}

Voir http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes pour la documentation officielle.

19
Chad

J? ai compris. C’est très simple… .. En utilisant la classe bg, vous pouvez y arriver facilement… .. Laissez-moi vous montrer:

 <nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

Cela vous donne la barre de navigation bleue par défaut

Si vous voulez changer votre couleur préférée, utilisez simplement la balise style dans la navigation:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">
0
INONAME

Si vous souhaitez remplacer la couleur de fond du bootstrap, vous devez ajouter! Important après la couleur.

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

Serait:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000!important">

Skål !! Berna

0
BernaAsis

Si vous lisez la documentation de bootstrap 4, Schémas de couleurs , cela répondra à vos questions.

0
antonjs

vous pouvez écrire! important devant la valeur de la propriété background-color comme ceciit changera la couleur des liens.

.nav-link {
    color: white !important;
}
0
Hamza Arshad