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 [01/10/2023 11:56] – [La Navbar] dmassif | formations:devweb_2 [28/06/2024 15:18] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
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 220: | 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 245: | Ligne 242: | ||
<!-- Button trigger modal --> | <!-- Button trigger modal --> | ||
<button type=" | <button type=" | ||
- | Launch demo modal | + | Exemple de modal |
</ | </ | ||
</ | </ | ||
Ligne 257: | Ligne 254: | ||
==== 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:// | ||
Ligne 305: | 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 333: | 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 344: | 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 382: | 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=" | ||
+ | </ | ||
</ | </ | ||
</ | </ |