Navbar bootstrap par LokyLab - page 1

Bonjour,j'ai un petit soucis avec les navbar sous bootstrap!Que les navbar de couleur inverse fonctionnent, c'est pas le cas pour les primary, success et autre alors que je prends le code telle qu'elle est!

le voici

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LIME</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container banner">
        <div class="row">
            <div class="col-sm-4">
                <img src="images/2.JPG" style="width: 200px; height: 200px;">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
            <nav class="navbar navbar-success ">
                <div class="navbar-header">
                    <a class="navbar-brand" href="Index1.html">G-BAG</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="pages/XB.html">
                            Xbox <b class="caret"></b>
                        </a>
                        <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
                            <li><a href="pages/XB.html">Consoles</a></li>
                            <li><a href="pages/XBJ.html">Jeux</a></li>
                            <li><a href="pages/XBA.html">Accessoires</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="#">
                            Playstation <b class="caret"></b>
                        </a>
                        <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
                            <li><a href="pages/PL.html">Consoles</a></li>
                            <li><a href="pages/PLJ.html">Jeux</a></li>
                            <li><a href="pages/PLA.html">Accessoires</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="pages/XB.html">
                            PC <b class="caret"></b>
                        </a>
                        <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
                            <li><a href="pages/PC.html">Consoles</a></li>
                            <li><a href="pages/PCJ.html">Jeux</a></li>
                            <li><a href="pages/PCA.html">Accessoires</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="pages/XB.html">
                            Wii <b class="caret"></b>
                        </a>
                        <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
                            <li><a href="pages/WI.html">Consoles</a></li>
                            <li><a href="pages/WIJ.html">Jeux</a></li>
                            <li><a href="pages/WIA.html">Accessoires</a></li>
                        </ul>
                    </li>
                    <li> <a href="#">Infos-Sortie</a> </li>
                    <li> <a href="#">Contact Us</a> </li>
                    <li> <a href="#">Se Connecter</a> </li>

                </ul>
                <form class="navbar-form pull-right">
                    <input type="text" style="width:150px" class="input-sm form-control"
                           placeholder="Recherche">
                    <button<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span></a></button>
                </form>
            </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <center>
                <img src="images/1.JPG" alt="">
                </center>
            </div>
        </div>

    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

LokyLab

20 avril 2017 à 12:40:08

Lord Morpheus

20 avril 2017 à 14:29:33

C'est simplement .bg-success, il suffit de lire la documentation : https://getbootstrap.com/css/#helper-classes-backgrounds

La balise <center> est à bannir à vie. Elle est obselète depuis de nombreuse années. Pour centrer un élément, ici une <img>, il y a la classe .center-block associée à .img-responsive (et ainsi passer l'image en block en block pour la centrer).
Sinon, .text-center sur son parent suffit à la centrer.

-
Edité par Lord Morpheus 20 avril 2017 à 14:30:45

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

23 avril 2017 à 18:32:37

Merci,je vois et je peux savoir pourquoi çà ne marche pas si par exemple je ne mets que navbar navbar-danger ou success??

-
Edité par LokyLab 23 avril 2017 à 18:33:12

EmmanuelBeziat

23 avril 2017 à 20:05:54

Parce que les classes navbar-danger ou navbar-success n'existent pas dans le code css de bootstrap.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

23 avril 2017 à 22:19:25

AHH la je comprends plus rien. Sur ce site :http://bootstrap-doc.prauds.fr/index3.php#navbar , la documentation montre qu'on peut utiliser des navbar navbar-success et autre!!

23 avril 2017 à 23:51:22

Ce n'est pas la version officielle de bootstrap : http://getbootstrap.com/getting-started/

-
Edité par EmmanuelBeziat 23 avril 2017 à 23:53:05

24 avril 2017 à 1:54:13

ok d'accord,merci encore!!

Navbar bootstrap

Navbar bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs