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 17:36] – [La grille] dmassifformations:devweb_2 [06/10/2023 19:19] (Version actuelle) – [La grille] dmassif
Ligne 110: 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 128: 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 140: 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.3]]+  * [[https://getbootstrap.com/docs/5.3/layout/grid|Bootstrap 5.3]]
  
 ==== La Navbar ==== ==== La Navbar ====
Ligne 169: 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 206: 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 219: 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 244: 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 253: 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 304: 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 343: 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 381: 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> 
 + 
 +    <!-- 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>
-      </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>+    <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 450: 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.1695829009.txt.gz
  • Dernière modification : 27/09/2023 17:36
  • de dmassif