Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
formations:devweb_2 [17/10/2022 19:22] – vbilla | formations:devweb_2 [28/06/2024 15:18] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 87: | Ligne 87: | ||
<file html index.html> | <file html index.html> | ||
< | < | ||
- | < | + | < |
- | < | + | <meta charset=" |
- | <title> | + | <meta name=" |
- | <meta name=" | + | < |
- | <meta charset=" | + | <link href=" |
- | <link href=" | + | </head> |
- | | + | < |
- | | + | < |
- | | + | <script src=" |
- | + | <script src=" | |
- | <script src=" | + | </ |
- | | + | |
- | </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 ! | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | La première étape est de télécharger les fichiers nécessaires à l' | + | |
- | * https:// | + | |
- | * https:// | + | |
- | + | ||
- | Il faut ensuite extraire le contenu pour avoir le contenu des dossiers css et js dans notre dossier web. | + | |
- | + | ||
- | L' | + | |
- | + | ||
- | < | + | |
- | 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 | + | |
- | </ | + | |
- | + | ||
- | <note important> | + | |
- | + | ||
- | Ensuite dans le fichier html il faut ajouter les parties suivantes pour inclure les fichiers : | + | |
- | + | ||
- | Dans le head : | + | |
- | <code html>< | + | |
- | + | ||
- | Avant la fin du body : | + | |
- | <code html>< | + | |
- | <script type=" | + | |
- | + | ||
- | Ce qui devrait donner quelque chose dans le genre : | + | |
- | <file html index.html> | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | <meta name=" | + | |
- | <link rel=" | + | |
- | <meta charset=" | + | |
- | </ | + | |
- | < | + | |
- | + | ||
- | < | + | |
- | < | + | |
- | </ | + | |
</ | </ | ||
</ | </ | ||
Ligne 173: | Ligne 110: | ||
<code html> | <code html> | ||
<div class=" | <div class=" | ||
- | | + | |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
</ | </ | ||
<div class=" | <div class=" | ||
Ligne 191: | Ligne 128: | ||
</ | </ | ||
<div class=" | <div class=" | ||
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
</ | </ | ||
<div class=" | <div class=" | ||
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
</ | </ | ||
</ | </ | ||
Ligne 203: | Ligne 140: | ||
produira le visuel suivant : | produira le visuel suivant : | ||
- | {{ : | + | {{: |
- | Voir l'exemple pour le changement sur mobile : https:// | + | On remarque que si la taille des colonnes n'est pas spécifiée celles-ci prendront |
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' | * si la somme est **inférieure à 12** alors les blocs n' | ||
+ | |||
Dans l' | Dans l' | ||
Pour BS5, la dernière version, les tailles d' | Pour BS5, la dernière version, les tailles d' | ||
- | |||
{{ : | {{ : | ||
=== Documentations === | === Documentations === | ||
Pour en savoir plus sur la grille, voir les documentations : | Pour en savoir plus sur la grille, voir les documentations : | ||
- | * [[https:// | + | * [[https:// |
==== La Navbar ==== | ==== La Navbar ==== | ||
Ligne 232: | Ligne 169: | ||
<!-- Just an image --> | <!-- Just an image --> | ||
<nav class=" | <nav class=" | ||
- | <div class=" | ||
<a class=" | <a class=" | ||
- | <img src="/ | + | <img src="/ |
</a> | </a> | ||
- | </ | ||
</ | </ | ||
</ | </ | ||
Ligne 269: | Ligne 204: | ||
=== Documentation === | === Documentation === | ||
- | Voir ici : https:// | + | Voir ici : https:// |
Ligne 282: | Ligne 217: | ||
<!-- Modal --> | <!-- Modal --> | ||
<div class=" | <div class=" | ||
- | | + | |
<div class=" | <div class=" | ||
- | | + | |
- | <h1 class=" | + | <h1 class=" |
<button type=" | <button type=" | ||
- | | + | |
- | <div class=" | + | <div class=" |
... | ... | ||
- | | + | |
- | <div class=" | + | <div class=" |
- | <button type=" | + | <button type=" |
- | <button type=" | + | <button type=" |
- | </ | + | </ |
+ | | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
</ | </ | ||
Ligne 307: | Ligne 242: | ||
<!-- Button trigger modal --> | <!-- Button trigger modal --> | ||
<button type=" | <button type=" | ||
- | Launch demo modal | + | Exemple de modal |
</ | </ | ||
</ | </ | ||
Ligne 316: | Ligne 251: | ||
=== Documentation === | === Documentation === | ||
- | Voir ici : https:// | + | Voir ici : https:// |
==== 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' | + | Bootstrap dispose d'un grand nombre de composants. Ces 3 exemples ne sont qu'une petite partie des possibilités qu' |
- | Il est possible de tous les trouver dans la section Components de la [[https:// | + | Il est possible de tous les trouver dans la section Components de la [[https:// |
===== Application : suite du CV ===== | ===== Application : suite du CV ===== | ||
Ligne 367: | Ligne 302: | ||
<file html index.html> | <file html index.html> | ||
<nav class=" | <nav class=" | ||
- | | + | |
- | <a class=" | + | <a class=" |
- | <button class=" | + | <button class=" |
- | <span class=" | + | |
- | </ | + | <span class=" |
- | <div class=" | + | </ |
- | <ul class=" | + | <div class=" |
- | <li class=" | + | <ul class=" |
- | <a class=" | + | <li class=" |
- | </ | + | <a class=" |
- | <li class=" | + | </ |
- | <a class=" | + | <li class=" |
- | </ | + | <a class=" |
- | <li class=" | + | </ |
- | <a class=" | + | <li class=" |
- | </ | + | <a class=" |
- | <li class=" | + | </ |
- | <a href="#" | + | <li class=" |
- | </ | + | <a href="#" |
- | </ul> | + | </ |
+ | </ul> | ||
+ | </div> | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
</ | </ | ||
Ligne 395: | Ligne 331: | ||
On va intégrer un modal avec les informations suivantes : | On va intégrer un modal avec les informations suivantes : | ||
* Nom/prénom | * Nom/prénom | ||
- | * Titre (étudiant à centrale Marseille | + | * Titre (étudiant à Centrale Méditerranée |
* Adresse mail | * Adresse mail | ||
* Numéro de téléphone | * Numéro de téléphone | ||
Ligne 406: | Ligne 342: | ||
<code html> | <code html> | ||
- | | + | <div class=" |
- | <div class=" | + | <div class=" |
<div class=" | <div class=" | ||
- | | + | |
- | <h1 class=" | + | <h1 class=" |
- | <button type=" | + | <button type=" |
- | <span aria-hidden=" | + | </ |
- | | + | <div class=" |
- | | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
- | <div class=" | + | <img src=" |
- | <div class=" | + | </div> |
- | <img src=" | + | </ |
- | </ | + | </ |
+ | <div class=" | ||
+ | <button type=" | ||
</ | </ | ||
- | </ | ||
- | <div class=" | ||
- | <button type=" | ||
- | </ | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
+ | </ | ||
</ | </ | ||
Sans oublier le lien à ajouter dans la navbar : | Sans oublier le lien à ajouter dans la navbar : | ||
<code html> | <code html> | ||
- | | + | <li class=" |
- | <a href="#" | + | <a href="#" |
- | </li> | + | </li> |
</ | </ | ||
Ligne 444: | Ligne 378: | ||
Un petit texte de bienvenue, basé sur l' | Un petit texte de bienvenue, basé sur l' | ||
- | <code html> | + | <code html> |
- | <div class=" | + | <div class=" |
+ | <div class=" | ||
<div class=" | <div class=" | ||
- | | + | |
- | < | + | < |
- | <p class=" | + | <p class=" |
- | <img src=" | + | <img src=" |
- | </p> | + | |
+ | </p> | ||
</ | </ | ||
- | | + | |
- | </ | + | </ |
+ | | ||
=== La page au complet === | === La page au complet === | ||
<file html index.html> | <file html index.html> | ||
< | < | ||
- | < | + | < |
- | | + | <meta charset=" |
- | <title> | + | < |
- | < | + | < |
- | <link href=" | + | <link href=" |
- | <link href=" | + | |
- | </head> | + | </head> |
- | <body> | + | |
- | + | <body> | |
- | | + | <!-- Navbar --> |
- | <div class=" | + | <nav class=" |
- | <a class=" | + | <div class=" |
- | <button class=" | + | <a class=" |
- | <span class=" | + | <button class=" |
- | </ | + | |
- | <div class=" | + | <span class=" |
- | <ul class=" | + | </ |
- | <li class=" | + | <div class=" |
- | <a class=" | + | <ul class=" |
- | </ | + | <li class=" |
- | <li class=" | + | <a class=" |
- | <a class=" | + | </ |
- | </ | + | <li class=" |
- | <li class=" | + | <a class=" |
- | <a class=" | + | </ |
- | </ | + | <li class=" |
- | </ | + | <a class=" |
- | </ | + | </ |
- | </ | + | < |
- | </ | + | <a href="#" |
- | + | </ | |
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <!-- Petit texte de bienvenue --> | ||
<div class=" | <div class=" | ||
- | | + | |
- | <div class=" | + | <div class=" |
- | < | + | < |
- | < | + | < |
- | <p class=" | + | <p class=" |
- | <img src=" | + | <img src=" |
- | </p> | + | |
+ | </p> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <!-- Modal --> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <button type=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <button type=" | ||
+ | </ | ||
+ | </div> | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
- | | ||
- | <script src=" | ||
- | <script src=" | ||
- | | + | <script src=" |
+ | integrity=" | ||
+ | crossorigin=" | ||
+ | <script src=" | ||
+ | integrity=" | ||
+ | </ | ||
</ | </ | ||
</ | </ | ||
Ligne 513: | Ligne 485: | ||
==== La gallerie d' | ==== La gallerie d' | ||
- | Voir [[https:// | + | Voir [[https:// |
==== La page musique ==== | ==== La page musique ==== |