formations:devweb_2

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
formations:devweb_2 [27/09/2023 16:49] – dmassifformations:devweb_2 [06/10/2023 19:19] (Version actuelle) – [La grille] dmassif
Ligne 87: Ligne 87:
 <file html index.html> <file html index.html>
 <!DOCTYPE html> <!DOCTYPE html>
-<head> +    <head> 
-    <meta charset="UTF-8"> +        <meta charset="UTF-8"> 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> +        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Titre de ma page</title> +        <title>Titre de ma page</title> 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> +        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> 
-</head> +    </head> 
-<body> +    <body> 
-    <h1>Ma super page</h1> +        <h1>Ma super page</h1> 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> +        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> 
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> +        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> 
-</body> +    </body>
-</html> +
- +
-</file> +
- +
-=== Installation (via téléchargement) === +
- +
-<WRAP center round alert 60%> +
-Vieille méthode, à ne pas utiliser, pour la forma utiliser les CDN ! +
-</WRAP> +
- +
- +
-La première étape est de télécharger les fichiers nécessaires à l'installation de Bootstrap. En plus de ceux-ci, la librairie JQuery est nécessaire. Les fichiers sont donc disponibles ici :  +
-  * https://getbootstrap.com/docs/4.3/getting-started/download/ +
-  * https://jquery.com/download/ (clic droit sur **Download the compressed, production jQuery 3.4.1** et enregistrer la cible sous)  +
- +
-Il faut ensuite extraire le contenu pour avoir le contenu des dossiers css et js dans notre dossier web.  +
- +
-L'architecture des dossiers devrait  ressembler à ceci :  +
- +
-<code> +
-css/ +
-├── bootstrap.css +
-├── bootstrap.css.map +
-├── bootstrap.min.css +
-└── ... +
-js/ +
-├── bootstrap.bundle.js +
-├── bootstrap.bundle.js.map +
-├── bootstrap.bundle.min.js +
-├── ... +
-└── jquery.min.js +
-index.html +
-</code> +
- +
-<note important>Pour faire vos essais réenommez votre fichier de la dernière fois (en cv.html par exemple). </note> +
- +
-Ensuite dans le fichier html il faut ajouter les parties suivantes pour inclure les fichiers :  +
- +
-Dans le head :  +
-<code html><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></code> +
- +
-Avant la fin du body : +
-<code html><script type="text/javascript" src="js/jquery.min.js"></script> +
-<script type="text/javascript" src="js/bootstrap.min.js"></script></code> +
- +
-Ce qui devrait donner quelque chose dans le genre :  +
-<file html index.html> +
-<!DOCTYPE html> +
-<html> +
- <head> +
- <title>Titre de ma page</title> +
-                <meta name="viewport" content="width=device-width, initial-scale=1"> +
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> +
-                <meta charset="UTF-8" /> +
- </head> +
- <body> +
- +
- <script type="text/javascript" src="js/jquery.min.js"></script> +
- <script type="text/javascript" src="js/bootstrap.min.js"></script> +
- </body>+
 </html> </html>
 </file> </file>
Ligne 170: Ligne 110:
 <code html> <code html>
 <div class="row"> <div class="row">
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div> +    <div class="col-md">.col-md</div> 
-  <div class="col-md-1">.col-md-1</div>+    <div class="col-md">.col-md</div>
 </div> </div>
 <div class="row"> <div class="row">
Ligne 188: Ligne 128:
 </div> </div>
 <div class="row"> <div class="row">
-  <div class="col-md-4">.col-md-4</div> +  <div class="col-md">.col-md</div> 
-  <div class="col-md-4">.col-md-4</div> +  <div class="col-md">.col-md</div> 
-  <div class="col-md-4">.col-md-4</div>+  <div class="col-md">.col-md</div>
 </div> </div>
 <div class="row"> <div class="row">
-  <div class="col-md-6">.col-md-6</div> +  <div class="col-md">.col-md</div> 
-  <div class="col-md-6">.col-md-6</div>+  <div class="col-md">.col-md</div>
 </div> </div>
 </code>  </code> 
Ligne 200: Ligne 140:
 produira le visuel suivant :  produira le visuel suivant : 
  
-{{ :formations:bootstrapgrid1.png |}}+{{:formations:gridbootstrap.png|}}
  
-Voir l'exemple pour le changement sur mobile : https://getbootstrap.com/docs/3.4/css/#grid-example-mixed (utiliser l'inspecteur pour changer la taille du device) +On remarque que si la taille des colonnes n'est pas spécifiée celles-ci prendront la taille adéquate automatiquement.
  
 Pour former une ligne complète, il suffit donc que la somme des valeurs des **col** fasse 12.  Pour former une ligne complète, il suffit donc que la somme des valeurs des **col** fasse 12. 
   * Si la somme **dépasse 12** alors le dernier bloc sera passé à la ligne.    * Si la somme **dépasse 12** alors le dernier bloc sera passé à la ligne. 
   * si la somme est **inférieure à 12** alors les blocs n'ocuperont pas toute la ligne.    * si la somme est **inférieure à 12** alors les blocs n'ocuperont pas toute la ligne. 
 +
  
 Dans l'exemple, le **md** de col-**md**-X signifie **medium device**. Dès que la taille de l'écran passe en dessous de ce que bootstrap considère comme un medium device, l'affichage se fait en ligne au lieu d'en colonne. Cette caractérisque permet d'organiser simplement les éléments selon la taille du device.  Dans l'exemple, le **md** de col-**md**-X signifie **medium device**. Dès que la taille de l'écran passe en dessous de ce que bootstrap considère comme un medium device, l'affichage se fait en ligne au lieu d'en colonne. Cette caractérisque permet d'organiser simplement les éléments selon la taille du device. 
  
 Pour BS5, la dernière version, les tailles d'écran sont définies comme ça : Pour BS5, la dernière version, les tailles d'écran sont définies comme ça :
- 
 {{ :formations:capture_d_ecran_du_2022-10-17_17-38-32.png?nolink |}} {{ :formations:capture_d_ecran_du_2022-10-17_17-38-32.png?nolink |}}
  
 === Documentations === === Documentations ===
 Pour en savoir plus sur la grille, voir les documentations :  Pour en savoir plus sur la grille, voir les documentations : 
-  * [[https://getbootstrap.com/docs/5.2/layout/grid|Bootstrap 5.2]]+  * [[https://getbootstrap.com/docs/5.3/layout/grid|Bootstrap 5.3]]
  
 ==== La Navbar ==== ==== La Navbar ====
Ligne 229: Ligne 169:
 <!-- Just an image --> <!-- Just an image -->
 <nav class="navbar bg-light"> <nav class="navbar bg-light">
-  <div class="container"> 
     <a class="navbar-brand" href="#">     <a class="navbar-brand" href="#">
-      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">+      <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="45" height="36">
     </a>     </a>
-  </div> 
 </nav> </nav>
 </code> </code>
Ligne 266: Ligne 204:
  
 === Documentation === === Documentation ===
-Voir ici : https://getbootstrap.com/docs/5.2/components/navbar/+Voir ici : https://getbootstrap.com/docs/5.3/components/navbar/
  
  
Ligne 279: Ligne 217:
 <!-- Modal --> <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog">+    <div class="modal-dialog">
     <div class="modal-content">     <div class="modal-content">
-      <div class="modal-header"> +        <div class="modal-header"> 
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>+        <h1 class="modal-title fs-5" id="exampleModalLabel">Titre du Modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div> +        </div> 
-      <div class="modal-body">+        <div class="modal-body">
         ...         ...
-      </div> +        </div> 
-      <div class="modal-footer"> +        <div class="modal-footer"> 
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> +        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> 
-        <button type="button" class="btn btn-primary">Save changes</button> +        <button type="button" class="btn btn-primary">Sauvegarder   </button> 
-      </div>+        </div> 
 +    </div>
     </div>     </div>
-  </div> 
 </div> </div>
 </code> </code>
Ligne 304: Ligne 242:
 <!-- Button trigger modal --> <!-- Button trigger modal -->
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch demo modal+    Exemple de modal
 </button> </button>
 </code> </code>
Ligne 313: Ligne 251:
  
 === Documentation ===  === Documentation === 
-Voir ici : https://getbootstrap.com/docs/5.2/components/modal/+Voir ici : https://getbootstrap.com/docs/5.3/components/modal/
  
 ==== Les autres composants ==== ==== Les autres composants ====
-Bootstrap dispose d'un grand nombre de composants. Ces 3 exemples ne sont qu'une petite partie des possibilités qu'offre BS4.  +Bootstrap dispose d'un grand nombre de composants. Ces 3 exemples ne sont qu'une petite partie des possibilités qu'offre BS5.  
-Il est possible de tous les trouver dans la section Components de la [[https://getbootstrap.com/docs/5.2/getting-started/introduction/|documentation]]. +Il est possible de tous les trouver dans la section Components de la [[https://getbootstrap.com/docs/5.3/getting-started/introduction/|documentation]]. 
  
 ===== Application : suite du CV ===== ===== Application : suite du CV =====
Ligne 364: Ligne 302:
 <file html index.html> <file html index.html>
 <nav class="navbar navbar-expand-lg bg-light"> <nav class="navbar navbar-expand-lg bg-light">
-  <div class="container-fluid"> +    <div class="container-fluid"> 
-    <a class="navbar-brand" href="#">Navbar</a> +        <a class="navbar-brand" href="#">Navbar</a> 
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> +        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
-      <span class="navbar-toggler-icon"></span> +            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
-    </button> +            <span class="navbar-toggler-icon"></span> 
-    <div class="collapse navbar-collapse" id="navbarNav"> +        </button> 
-      <ul class="navbar-nav"> +        <div class="collapse navbar-collapse" id="navbarNav"> 
-        <li class="nav-item"> +            <ul class="navbar-nav"> 
-          <a class="nav-link active" href="cv.html">Mon CV</a> +                <li class="nav-item"> 
-        </li> +                    <a class="nav-link active" href="cv.html">Mon CV</a> 
-        <li class="nav-item"> +                </li> 
-          <a class="nav-link" href="galerie.html">De belles images</a> +                <li class="nav-item"> 
-        </li> +                    <a class="nav-link" href="galerie.html">De belles images</a> 
-        <li class="nav-item"> +                </li> 
-          <a class="nav-link" href="musique.html">Ce que j'aime</a> +                <li class="nav-item"> 
-        </li> +                    <a class="nav-link" href="musique.html">Ce que j'aime</a> 
-        <li class="nav-item"> +                </li> 
-          <a href="#" class="nav-link" data-bs-toggle="modal" data-target="#contactModal">Contact</a> +                <li class="nav-item"> 
-        </li> +                    <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#contactModal">Contact</a> 
-      </ul>+                </li> 
 +            </ul> 
 +        </div>
     </div>     </div>
-  </div> 
 </nav> </nav>
 </file> </file>
Ligne 403: Ligne 342:
  
 <code html> <code html>
-    <div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true"> +<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true"> 
-      <div class="modal-dialog">+    <div class="modal-dialog">
         <div class="modal-content">         <div class="modal-content">
-          <div class="modal-header"> +            <div class="modal-header"> 
-            <h1 class="modal-title fs-5">Contactez moi</h1> +                <h1 class="modal-title fs-5">Contactez moi</h1> 
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> +                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
-              <span aria-hidden="true">&times;</span> +            </div> 
-            </button> +            <div class="modal-body"> 
-          </div> +                <div class="row"> 
-          <div class="modal-body"> +                    <div class="col-md-6">Jean <b>Loutre</b></div> 
-            <div class="row"> +                    <div class="col-md-6"> <i>Loutre professionnelle</i> </div> 
-              <div class="col-md-6">Jean <b>Loutre</b></div> +                    <div class="col-12">jean.loutre@centrale-med.fr</div> 
-              <div class="col-md-6"> <i>Loutre professionnelle</i> </div> +                    <div class="col-12">+33 6 12 34 56 78</div> 
-              <div class="col-12">jean.loutre@centrale-assos.fr</div> +                    <div class="col-12 text-center"> 
-              <div class="col-12">+33 6 12 34 56 78</div> +                        <img src="images/qrcode.png" alt="QRCODE"> 
-              <div class="col-12 text-center"> +                    </div> 
-                <img src="images/qr.png" alt=""> +                </div> 
-              </div>+            </div> 
 +            <div class="modal-footer"> 
 +                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">C'est noté</button>
             </div>             </div>
-          </div> 
-          <div class="modal-footer"> 
-            <button type="button" class="btn btn-primary" data-dismiss="modal">C'est noté</button> 
-          </div> 
         </div>         </div>
-      </div> 
     </div>     </div>
 +</div>
 </code> </code>
  
 Sans oublier le lien à ajouter dans la navbar :  Sans oublier le lien à ajouter dans la navbar : 
 <code html> <code html>
-          <li class="nav-item"> +<li class="nav-item"> 
-            <a href="#" class="nav-link" data-bs-toggle="modal" data-target="#contactModal">Contact</a> +    <a href="#" class="nav-link" data-bs-toggle="modal" data-target="#contactModal">Contact</a> 
-          </li>+</li>
 </code> </code>
  
Ligne 441: Ligne 378:
 Un petit texte de bienvenue, basé sur l'utilisation de la grille ! Un petit texte de bienvenue, basé sur l'utilisation de la grille !
  
-<code html>    <div class="container"> +<code html> 
-      <div class="row">+<div class="container"> 
 +    <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> 
-          <p>J'aime bien le poisson, et le GInfo !</p> +            <p>J'aime bien le poisson, et le GInfo !</p> 
-          <p class="text-center"> +            <p class="text-center"> 
-            <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" alt=""> +                <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" 
-          </p>+                    alt=""> 
 +            </p>
         </div>         </div>
-      </div> +    </div> 
-    </div></code>+</div> 
 +    </code>
  
 === La page au complet === === La page au complet ===
 <file html index.html> <file html index.html>
 <!DOCTYPE html> <!DOCTYPE html>
-<html> +<head> 
-  <head> +    <meta charset="UTF-8"> 
-    <title>Site de Jean-Loutre</title> +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <meta charset="UTF-8" /> +    <title>Titre de ma page</title> 
-    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
-    <link href="css/style.css" rel="stylesheet" /> +        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> 
-  </head> +</head> 
-  <body> + 
-   +<body> 
-  <nav class="navbar navbar-expand-lg bg-light"> +    <!-- Navbar --> 
-    <div class="container-fluid"> +    <nav class="navbar navbar-expand-lg bg-light"> 
-      <a class="navbar-brand" href="#">Navbar</a> +        <div class="container-fluid"> 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> +            <a class="navbar-brand" href="#">Navbar</a> 
-        <span class="navbar-toggler-icon"></span> +            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
-      </button> +                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
-      <div class="collapse navbar-collapse" id="navbarNav"> +                <span class="navbar-toggler-icon"></span> 
-        <ul class="navbar-nav"> +            </button> 
-          <li class="nav-item"> +            <div class="collapse navbar-collapse" id="navbarNav"> 
-            <a class="nav-link active" href=cv.html">Mon CV</a> +                <ul class="navbar-nav"> 
-          </li> +                    <li class="nav-item"> 
-          <li class="nav-item"> +                        <a class="nav-link active" href="cv.html">Mon CV</a> 
-            <a class="nav-link" href="galerie.html">De belles images</a> +                    </li> 
-          </li> +                    <li class="nav-item"> 
-          <li class="nav-item"> +                        <a class="nav-link" href="galerie.html">De belles images</a> 
-            <a class="nav-link" href="musique.html">Ce que j'aime</a> +                    </li> 
-          </li> +                    <li class="nav-item"> 
-        </ul> +                        <a class="nav-link" href="musique.html">Ce que j'aime</a> 
-      </div> +                    </li> 
-    </div> +                    <li class="nav-item"> 
-  </nav> +                        <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#contactModal">Contact</a> 
-  +                    </li> 
 +                </ul> 
 +            </div> 
 +        </div> 
 +    </nav> 
 +     
 +    <!-- Petit texte de bienvenue -->
     <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> 
-          <p>J'aime bien le poisson, et le GInfo !</p> +                <p>J'aime bien le poisson, et le GInfo !</p> 
-          <p class="text-center"> +                <p class="text-center"> 
-            <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" alt=""> +                    <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" 
-          </p>+                        alt=""> 
 +                </p> 
 +            </div>
         </div>         </div>
-      </div> 
     </div>     </div>
-   
-    <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 src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> 
  
-  </body>+    <!-- Modal --> 
 +    <div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true"> 
 +        <div class="modal-dialog"> 
 +            <div class="modal-content"> 
 +                <div class="modal-header"> 
 +                    <h1 class="modal-title fs-5">Contactez moi</h1> 
 +                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
 +                </div> 
 +                <div class="modal-body"> 
 +                    <div class="row"> 
 +                        <div class="col-md-6">Jean <b>Loutre</b></div> 
 +                        <div class="col-md-6"> <i>Loutre professionnelle</i> </div> 
 +                        <div class="col-12">jean.loutre@centrale-med.fr</div> 
 +                        <div class="col-12">+33 6 12 34 56 78</div> 
 +                        <div class="col-12 text-center"> 
 +                            <img src="images/qrcode.png" alt="QRCODE"> 
 +                        </div> 
 +                    </div> 
 +                </div> 
 +                <div class="modal-footer"> 
 +                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">C'est noté</button> 
 +                </div> 
 +            </div> 
 +        </div> 
 +    </div> 
 + 
 +    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
 +        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
 +        crossorigin="anonymous"></script> 
 +    <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
 +        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> 
 +</body>
 </html> </html>
 </file> </file>
Ligne 510: Ligne 485:
  
 ==== La gallerie d'images ====  ==== La gallerie d'images ==== 
-Voir [[https://getbootstrap.com/docs/5.2/components/carousel/#with-controls|le carousel bootstrap]]+Voir [[https://getbootstrap.com/docs/5.3/components/carousel/#with-controls|le carousel bootstrap]]
  
 ==== La page musique ====  ==== La page musique ==== 
  • formations/devweb_2.1695826188.txt.gz
  • Dernière modification : 27/09/2023 16:49
  • de dmassif