Différences

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

--- info:css:bootstrap [2025/12/11 10:57] – radeff
+++ info:css:bootstrap [2026/03/26 09:00] (Version actuelle) – radeff
@@ Ligne 7: / Ligne 7: @@
   * http://getbootstrap.com/getting-started/
+===== GRID CSS =====
+avec les browsers modernes, on peut utiliser les propriétés [[gridcss|GRID CSS]]
+avec bootstrap on a bcp de flexibilité, voir p. ex. cet excellent tuto (bootstrap5)
+<html>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Wqu-d_b3K-0?si=HXShTdSnCSd75L7k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</html>
 ===== doc =====
-  * https://grafikart.fr/tutoriels/grid-css-1002#autoplay (comme d'hab, les meilleurs tutos sont chez grafikart)
+  * https://grafikart.fr/tutoriels/bootstrap (comme d'hab, les meilleurs tutos sont chez grafikart)
   * http://layoutit.com
   * http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
@@ Ligne 19: / Ligne 29: @@
   * https://openclassrooms.com/courses/prenez-en-main-bootstrap
-===== Grid =====
-  * voir tuto grafikart //supra/
-  * https://cssgridgarden.com/#fr - un jeu pour comprendre!
-  * https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout
-  * https://mozilladevelopers.github.io/playground/css-grid/
 ===== Glyphicons =====
   * https://getbootstrap.com/docs/3.3/components/
   * https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
 <html>
  <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
  <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
+</html>
    <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
    <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
-</html>
 ====== Image responsive ======
-<html><img class=img-responsive src=img/image.png/></html>
+  <img class=img-responsive src=img/image.png/>
 Cette classe ajoute les propriétés suivantes à l'image :
@@ Ligne 52: / Ligne 58: @@
   * [[https://datatables.net/examples/styling/bootstrap.html|js datatables+bootstrap]] pour intégrer [[info:jquery#datatables]]
-<code html>
   <table class="table table-striped table-bordered table-hover table-responsive">
-</code>
 //Note Fred//
 Les tables bootstrap sont pas mal, mais si on veut du vraiment //responsive// et qu'on est prêt à abandonner le scroll de défilement vertical, voir cette élégante solution de grakifart: https://www.grafikart.fr/tutoriels/html-css/table-responsive-1015
 ====== Forms / buttons ======
 {{ :info:css:bootstrap_buttons.webp |}}
@@ Ligne 78: / Ligne 81: @@
   * https://getbootstrap.com/docs/5.1/components/buttons/
 ====== Validation ======
-ajout **required**
 <code html>
 <div class="mb-3">
@@ Ligne 88: / Ligne 90: @@
 </div>
 </code>
+====== Dark mode ======
+ajouter
+<code html>
+data-bs-theme="dark"
+</code>
+à l'élément
+    <html>
+ou à un élément précis, p. ex.
+     <table class="table" data-bs-theme="dark">
+Doc: https://www.w3schools.com/bootstrap5/bootstrap_dark_mode.php