[[oktatas:web:angular|< Angular]]

====== Bootstrap 18 ======

  * **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:

  ng add bootstrap


A Bootstrap a következő helyre töltődik:
  node_modules/bootstrap

==== Használat ====

CSS importálása az Angular 17-ben nem volt lehetőség ilyen egyszerűen:

<code css>
@import "bootstrap";
</code>

Az Angular 18 verzióban azonban újra lehetséges.



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>

==== CDN linkelése ====


A link egyszerűen beírható az src/index.html fájlba.