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 [27/09/2023 18:00] – [La grille] dmassif | formations:devweb_2 [06/10/2023 19:19] (Version actuelle) – [La grille] dmassif | ||
---|---|---|---|
Ligne 110: | Ligne 110: | ||
<code html> | <code html> | ||
<div class=" | <div class=" | ||
- | <div class =" | ||
<div class=" | <div class=" | ||
<div class=" | <div class=" | ||
Ligne 123: | Ligne 122: | ||
<div class=" | <div class=" | ||
<div class=" | <div class=" | ||
- | <div class=" | ||
- | </ | ||
</ | </ | ||
<div class=" | <div class=" | ||
Ligne 136: | Ligne 133: | ||
</ | </ | ||
<div class=" | <div class=" | ||
- | <div class=" | + | <div class=" |
- | <div class=" | + | <div class=" |
</ | </ | ||
</ | </ | ||
Ligne 143: | 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' | ||
- | |||
{{ : | {{ : | ||
Ligne 172: | 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 209: | Ligne 204: | ||
=== Documentation === | === Documentation === | ||
- | Voir ici : https:// | + | Voir ici : https:// |
Ligne 222: | 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 247: | Ligne 242: | ||
<!-- Button trigger modal --> | <!-- Button trigger modal --> | ||
<button type=" | <button type=" | ||
- | Launch demo modal | + | Exemple de modal |
</ | </ | ||
</ | </ | ||
Ligne 256: | 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 307: | 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 346: | 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 384: | 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 453: | Ligne 485: | ||
==== La gallerie d' | ==== La gallerie d' | ||
- | Voir [[https:// | + | Voir [[https:// |
==== La page musique ==== | ==== La page musique ==== |