[Bootstrap 4.3] rendu menu navbar

**Sebastien31t** · 30/08/2019, 13h48

Bonjour,

Je me permets de poster car je rencontre un petit problème, mes navbar avec bootstrap me donne une simple liste ul li et pas une barre de navigation.
Pouvez vous m'aider et me dire d’où vient mon erreur.
d'avance merci

voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link type="text/css" rel="stylesheet" href="/dist/bootstrap-4.3.1-dist/css/bootstrap.css">
        <link type="text/css" rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 
        <title>Note</title>
    </head>
 
    <!-- ===== deconnexion ===== -->
    <div class="container container-padding">
        <div class="row">
 
    <form action="fonc/deconn.php">
        <input type="text" disabled value="Obierti">
        <button>Déconnexion</button>
    </form>
        </div>
    </div>
 
    <!-- ===== Menu ===== -->
 
    <div class="navbar">    
        <nav class="navbar pull-right" >
            <ul class="nav nav-pills">
                <li><a href="accueil.php" class="text-white"><span class="glyphicon glyphicon-home"></span> Accueil</a></li>
                <li><a href="moncompte.php" class="text-white"><span class="glyphicon glyphicon-user"></span> Mon compte</a></li>
                <li><a href="moncompte.php" class="text-white"><span class="glyphicon glyphicon-user"></span> Ajouter note</a></li>
                <li><a href="nouprojet.php" class="text-white"><span class="glyphicon glyphicon-pencil"></span> Nouveau projet </a></li>
                <li><a href="archive.php" class="text-white"><span class="glyphicon glyphicon-inbox"></span> Archive </a></li>
            </ul>
 
            <form class="form-inline my-2 my-lg-0" style="padding-top:20px">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </nav>
    </div>
    <body>
    </body>
    <footer>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="dist/jquery.js"></script>
    <script type="text/javascript" src="dist/bootstrap-4.3.1-dist/js/bootstrap.js"></script>
</html>

Invité · 30/08/2019, 15h29

Bonjour,

**Sebastien31t** · 30/08/2019, 22h59

Merci pour ton aide mais je sais ou trouver la doc, d'ailleur ma navbar est une copie simplifié de l’exemple du site officiel.

Invité · 30/08/2019, 23h19

La preuve que non...

2 scripts jquery.....js ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
...
...
    <script type="text/javascript" src="dist/jquery.js"></script>

2 scripts bootstrap.....js ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
...
    <script type="text/javascript" src="dist/bootstrap-4.3.1-dist/js/bootstrap.js"></script>

Chaque .min.js est la version "minifiée" du .js.
Il n'en faut qu'1 de chaque.

**Sebastien31t** · 30/08/2019, 23h24

Merci

je vens de trouver le problème qui était dans la balise head.

code qui fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
        <link type="text/css" rel="stylesheet" href="dist/bootstrap-4.3.1-dist/css/bootstrap.css">>
        <link type="text/css" rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 
        <title>Note</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[Bootstrap 4.3] rendu menu navbar

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager