| Les deux révisions précédentes Révision précédente | |
| formations:devweb_3 [18/10/2022 18:34] – [A gérer] nbert | formations:devweb_3 [20/10/2022 20:08] (Version actuelle) – Update Caroussel Bootstrap 5 frauline |
|---|
| <title>Galerie de Jean-Otter de la strret des famiy</title> | <title>Galerie de Jean-Otter de la strret des famiy</title> |
| <meta charset="UTF-8" /> | <meta charset="UTF-8" /> |
| <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | <link rel="stylesheet" type="text/css" href="css/style.css"> |
| </head> | </head> |
| <body> | <body> |
| | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | <nav class="navbar navbar-expand-lg navbar-light bg-light"> |
| <a class="navbar-brand" href="#">Site de Jean-Loutre</a> | <a class="navbar-brand" href="#">Site de Jean-Loutre</a> |
| | |
| <!-- Bouton affiché uniquement sur mobile pour dérouler --> | <!-- Bouton affiché uniquement sur mobile pour dérouler --> |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
| <span class="navbar-toggler-icon"></span> | <span class="navbar-toggler-icon"></span> |
| </button> | </button> |
| | |
| <!-- Les éléments de la navbar --> | <!-- Les éléments de la navbar --> |
| <div class="collapse navbar-collapse" id="navbarNav"> | <div class="collapse navbar-collapse" id="navbarNav"> |
| </div> | </div> |
| </nav> | </nav> |
| | |
| <div class="container"> | <div class="container"> |
| <div class="row"> | <div class="row"> |
| <div class="col-md-12"> | <div class="col-md-12"> |
| <h1>Bienvenue sur mon site perso</h1> | <h1>Bienvenue sur mon site perso</h1> |
| <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> | <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> |
| <div class="carousel-inner"> | <div class="carousel-inner"> |
| | |
| <?php | <?php |
| $fichiers = glob('galerie/*'); // Liste les fichiers du dossier galerie | $fichiers = glob('galerie/*'); // Liste les fichiers du dossier galerie |
| $i = 0; | $i = 0; |
| foreach($fichiers as $fichier){ | foreach($fichiers as $fichier){ |
| | |
| ?> | ?> |
| <div class="carousel-item <?php if($i == 0){ ?>active<?php } ?>"> | <div class="carousel-item <?php if($i == 0){ ?>active<?php } ?>"> |
| ?> | ?> |
| </div> | </div> |
| <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> | <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev"> |
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | <span class="carousel-control-prev-icon" aria-hidden="true"></span> |
| <span class="sr-only">Previous</span> | <span class="sr-only">Previous</span> |
| </a> | </a> |
| <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> | <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next"> |
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | <span class="carousel-control-next-icon" aria-hidden="true"></span> |
| <span class="sr-only">Next</span> | <span class="sr-only">Next</span> |
| </div> | </div> |
| </div> | </div> |
| | |
| <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true"> | <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true"> |
| <div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> |
| </div> | </div> |
| | |
| <script type="text/javascript" src="js/jquery.min.js"></script> | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> |
| <script type="text/javascript" src="js/bootstrap.min.js"></script> | <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> |
| </body> | </body> |
| </html> | </html> |