5568 sujets

Sémantique web et HTML

Bonjour tous le monde, je dois actuellement réaliser un site web pour un lycée .
Il contient actuellement une barre de navigation et un dropdown et tous est mis en responsive avec bootstrap 3.3.7

Cependant un soucis se pose j'appelle donc des script js, celui de bootstrap et celui de Jquery mais mon dropdown ne marche pas après plusieurs essais et solution je viens de voir que j'ai besoin d'un double appel de script dans ma page .
Je ne sais absolument pas pourquoi quelqu'un a t-il une idée de ce besoin de double appel ?

(PS: le tout est héberger sur serveur)


<htlm>

    <head>
        <title>Lycée Cyfflé</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="msapplication-TileColor" content="#b0d139">
        <meta name="msapplication-TileImage" content="chemin/Logo.png">
        <meta name="application-name" content="Lycée Cifflé">
        <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="icon" href="http://ebialec.bialec.fr/Ciffle/css/images/Logo.png">

    </head>

    <body>
        <script src="css/bootstrap/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                    <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Page 1-1</a></li>
                            <li><a href="#">Page 1-2</a></li>
                            <li><a href="#">Page 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>
        <script src="css/bootstrap/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
</htlm>

Re bonjour je viens d'avoir ma solution en trainant sur Alsacréation.

Dans mon code les scripts sont déclarer comme cela/

        
        <script src="css/bootstrap/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Sauf qu'il suffit d'inverser et ça donne ça:


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="css/bootstrap/js/bootstrap.min.js"></script>

Modifié par Tryno (31 May 2018 - 10:00)
Meilleure solution
Ah oui j'avais pas trop trop lu l'introduction x)
Je vais déplacer tous ça.
Pour popper j'en ai pas vraiment l'utilité pour l'instant donc si jamais ça venais à arriver je le prendrais sans souci
Modifié par Tryno (31 May 2018 - 13:09)