• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

Webhely:

• https://getbootstrap.com/

Telepítés:

ng add bootstrap

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

node_modules/bootstrap

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

@import "bootstrap";

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

A JavaScript része:

angular.json

"build": {
    "options": {
        "scripts": [
            "node_modules/bootstrap/dist/js/bootstrap.js"
        ]
    }
}

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:

<button class="btn btn-primary">Teszt</button>

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:

style.css

@import "bootstrap-icons";

Példa:

src/app/app.component.html

<i class="bi bi-bug-fill"></i>

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