1
votes

mon code css ne transforme pas ma barre de navigation en une couleur spécifique

ce programme est censé rendre la barre de navigation bleue mais elle reste blanche, que dois-je faire? indice: c'est bootstrap 3.4.1 indice: il ne devrait rien faire alors n'essayez pas de réparer ça ipsum lorem ipsum

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-default bg-blue">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
.navbar-default {
  background-color: #2c3e50;
}


0 commentaires

5 Réponses :


0
votes

Vous avez:

navbar navbar-default bg-blue

Essayez de supprimer le bg-blue . Vous ne pouvez pas voir la définition de cette classe css, mais par son nom, il semble qu'elle remplacerait également la couleur d'arrière-plan.


0 commentaires

0
votes

Vous pouvez utiliser! important si vous voulez remplacer les valeurs réelles

.navbar-default {
  background-color: darkcyan !important;
}
.navbar a{
   color: white !important; 
}

Cherchez-vous ceci?

Démo en direct


2 commentaires

@why_u_wanna_no_me_name si la réponse vous est utile, veuillez accepter / voter.


je ne peux pas en dessous de 15 rep



1
votes

Le problème est ici

<nav class="navbar navbar-default bg-primary">

Les classes Bootstrap ne supportent rien comme bg-blue. Il prend en charge bg-primary pour la couleur bleue.

Essayez de changer la classe ci-dessus en:

<nav class="navbar navbar-default bg-blue">

J'espère que cela vous aidera.


0 commentaires

0
votes

Lorsque vous utilisez la barre de navigation, il y aura peu de couleurs fournies par l'équipe Bootstrap. PAS besoin d'attribuer une couleur css pour la barre de navigation par défaut.

Vous devez ajouter navbar navbar-default bg-primary pour la couleur bleue lorsque vous définissez navbar.

Vous pouvez vérifier ce s pour plus de navabr - https://getbootstrap.com/docs /4.0/components/navbar/


0 commentaires

1
votes

Essayez ce navbar navbar-default bg-blue . si cela ne fonctionne pas, créez une nouvelle classe et utilisez une balise importante pour cela.

.navbar-default {
  background-color: red !important;
}
.navbar a{
   color: white !important; 
}


1 commentaires

nav a {couleur: blanc! important; }