Bootstrap 4 navbar couleur

Dans le Bootstrap 4, comment puis-je changer la couleur de fond d'une barre de navigation? Le code de twbscolor ne fonctionne pas. Je veux faire de la couleur d'arrière-plan de couleur différente et la couleur de police 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>

source d'informationauteur hiboo

  1. 11

    Ici est beaucoup plus simple façon de changer la barre de navigation couleur d'arrière-plan.

    Sur votre .navbar utilisation .navbar-dark et de créer un style pour votre couleur de fond personnalisée comme .bg-company-red. .navbar-dark fera de tous vos liens de blanc.

    HTML

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

    De style CSS...

    .bg-company-red {
    background-color: darkred;
}
  2. 10

    Mise à jour 2018

    Bootstrap 4.0.0:

    Voici le CSS qui va changer la barre de navigation de couleur dans le 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:hover .nav-link {
    color: #ffffff;
}

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

    Rappelez-vous aussi que BS4 est encore en alpha pour ces classes peuvent changer. Aussi, le bg-danger dans votre balisage remplacer l'ensemble de la couleur d'arrière-plan.

    Avis que le Bootstrap 4 barre de navigation est transparent par défaut. Utilisation navbar-dark sombre/gras couleurs d'arrière-plan, et l'utilisation navbar-light si la barre de navigation est d'une couleur plus claire. Ce sera en effet la couleur du texte et la couleur de l'activation /désactivation de l'icône, comme expliqué ici.

  3. 2

    Si vous lisez le bootstrap 4 documentation, Schémas de couleursil répondra à vos questions.

  4. -1

    Je l'ai eu. C'est très simple.
    L'utilisation de la classe bg vous pouvez atteindre cet objectif facilement.
    Permettez-moi de vous montrer:

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

    Cela vous donne le bleu par défaut navbar

    Si vous voulez changer votre couleur préférée, puis il suffit d'utiliser la balise à l'intérieur de la valeur liquidative:

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