J'aimerais que le bouton m'affiche la liste du menu dans le code suivant. Malheureusement, cela ne fait rien ! Quelqu'un peut m'aider s'il vous plait ?
Je suis début, en formation depuis 2 mois en web-developpement.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rando-Iroise</title>
  <meta name="description" content="Retrouvez toutes nos randonnées dans le pays d'Iroise avec plan de parcours, description, cursiosités locales et bien plus encore !">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="container">
    <header class="row">
        <nav class="navbar navbar-dark navbar-expand-lg bg-primary">
            <a href="" class="navbar-brand">
                Rando Iroise
            </a>
                <button 
                    class="navbar-toggler" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#navbarSupportedContent" 
                    aria-controls="navbarSupportedContent" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                    </svg>
        </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Accueil</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Le pays d'Iroise</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Nos randonnées</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Qui sommes-nous ?</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>

                </div>
        </nav>
    </header>
    <main class="row">
        <div class="col-md-9">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel tincidunt eros, sed semper metus. Praesent egestas tortor quis mauris molestie pellentesque. Curabitur at nulla lacinia, consequat tellus et, imperdiet quam. Nunc eu urna a lectus gravida bibendum ac sit amet libero. Quisque pulvinar risus diam, at suscipit neque ullamcorper in. Aenean rutrum vestibulum neque, a molestie lacus. Praesent non pretium mi. Proin vitae arcu quam. Curabitur pharetra fermentum odio, nec accumsan dolor congue eu. Maecenas at feugiat dolor. Vivamus vitae cursus mauris. Integer interdum mi eu lacus posuere lacinia vitae vitae justo.
            </p>
        </div>
        <div class="col-md-3">Aside</div>
    </main>
    <footer class="row">
        <div class="col">Footer</div>
    </footer>
</body>
</html>

N'hésitez pas à m'avertir s'il y a d'autres erreurs. Merci !
Breizoo

1 réponse


bonjour
je pense qu´il faut charger bootstrap.js pour que le collapse fonctionne