oktatas:web:angular:angular_17_bootstrap
Tartalomjegyzék
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:
Telepítés:
npm install --save bootstrap
A Bootstrap a következő helyre töltődik:
node_modules/bootstrap
Használat
Használatbavételhez az src/styles.css fájl elejére írjuk:
Vagy még rövidebb:
@import "bootstrap";
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>
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:
- style.css
@import "~bootstrap-icons";
Példa:
- src/app/app.component.html
<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.
oktatas/web/angular/angular_17_bootstrap.txt · Utolsó módosítás: 2024/08/15 16:05 szerkesztette: admin