Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_17_bootstrap [2024/07/17 23:18] – [Használat] admin
+++ oktatas:web:angular:angular_17_bootstrap [2025/03/02 16:01] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:angular|< Angular]]
-====== Bootstrap ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2024, Sallai András
-  * Szerkesztve: 2024
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
-  * Web: https://szit.hu
-===== Bootstrap =====
-==== Telepítés ====
-Webhely:
-  * https://getbootstrap.com/
-Telepítés:
-  npm install --save bootstrap
-A Bootstrap a következő helyre töltődik:
-  node_modules/bootstrap
-==== Használat ====
-A CSS beállítása az angular.json fájlban:
-<code javascript angular.json>
-"build": {
-    "options": {
-            "styles": [
-              "src/styles.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.css"
-            ],
-    }
-}
-</code>
-<note tip>
-CSS-hez, erre a beállításra nincs szükség Angular 16 és 18 verziója esetén. A 17 verzió esetén szükség van rá.
-</note>
-Használatbavételhez az **src/styles.css** fájl elejére írjuk:
-Vagy még rövidebb:
-<code css>
-@import "bootstrap";
-</code>
-A JavaScript része:
-<code javascript angular.json>
-"build": {
-    "options": {
-        "scripts": [
-            "node_modules/bootstrap/dist/js/bootstrap.js"
-        ]
-    }
-}
-</code>
-A sor érvényesítéséhez újra kell indítani az ng server-t.
-Minden itt felsorolt JavaScript kódot az Angular egyetlen **script.js** fájlba gyűjt össze,
-amit automatikusan belinkel weboldalba.
-Ellenőrizzük, például az app.component.html fájlba írt mintával:
-<code javascript>
-<button class="btn btn-primary">Teszt</button>
-</code>
-===== Bootstrap ikonok =====
-  ng add bootstrap-icons
-Amire szükség van, a node_modules/bootstrap-icons/font/bootstrap-icons.css fájl. De elég ha
-a bootstrap-icons könyvtárat megadom ~ jellel:
-<code css style.css>
-@import "~bootstrap-icons";
-</code>
-Példa:
-<code html src/app/app.component.html>
-<i class="bi bi-bug-fill"></i>
-</code>
-==== npm paranccsal ====
-Telepítés:
-  npm i bootstrap-icons
-==== CDN linkelése ====
-A link egyszerűen beírható az src/index.html fájlba.