< Angular

Bootstrap

Szerző: Sallai András

Copyright © 2024, Sallai András

Szerkesztve: 2024

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

"build": { "options": { "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css" ], } }
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á.

Használatbavételhez az src/styles.css fájl elejére írjuk:

Vagy még rövidebb:

@import "bootstrap";

A JavaScript része:

"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>

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:

@import "~bootstrap-icons";

Példa:

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

npm paranccsal

Telepítés:

npm i bootstrap-icons

CDN linkelése

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