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> |