Différences

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

--- drupal10:creation_theme_custom [2023/09/03 06:55]
marclebrun créée
+++ drupal10:creation_theme_custom [2023/09/03 07:46] (Version actuelle)
marclebrun [Intégrer Bootstrap]
@@ Ligne 53: / Ligne 53: @@
   css:
     theme:
-      css/elements.css: {}
+      css/main.css: {}
-      css/layout.css: {}
-      css/print.css: { media: print }
   js:
     js/main.js: {}
@@ Ligne 106: / Ligne 104: @@
     {{page.footer}}
 </div>
+</code>
+===== Intégrer Bootstrap =====
+Doc de Bootstrap 5.0 : [[https://getbootstrap.com/docs/5.0]]
+Télécharger **Bootstrap** sur [[https://getbootstrap.com/docs/5.3/getting-started/download/]]
+  * Prendre la version **Compiled CSS and JS**
+  * => **bootstrap-5.3.1-dist.zip**
+  * Décompresser ce fichier vers un dossier
+Copier **bootstrap.min.css** et **bootstrap.min.js** et les copier dans les dossiers
+**css** et **js** du thème.
+<code>
+themes
+    custom
+        mytheme
+            css
+                bootstrap.min.css
+                style.css
+            js
+                bootstrap.min.js
+                main.js
+</code>
+Référencer ces fichiers dans la librairie :
+<code yaml /themes/custom/mytheme/mytheme.libraries.yml>
+global-css:
+  version: VERSION
+  css:
+    theme:
+      css/bootstrap.min.css: {}
+      css/main.css: {}
+  js:
+    js/bootstrap.min.js: {}
+    js/main.js: {}
+  dependencies:
+    - core/jquery
 </code>

Cramnurbel