Tartalomjegyzék
Bootstrap
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2023, 2024, 2025
- Licenc: CC BY-SA 4.0
- Web: https://szit.hu
Bootstrap
Telepítés
Webhely:
Telepítés:
ng add bootstrap
A Bootstrap a következő helyre töltődik:
node_modules/bootstrap
Használat
@import "bootstrap";
A JavaScript része:
- angular.json
"build": { "options": { "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ] } }
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>
Modális ablak
A feladat, modális ablak megjelenítése scriptből.
Telepítsük a @types/bootstrap csomagot.
npm install @types/bootstrap
Ahol szeretnénk használni, importáljuk:
import * as bootstrap from 'bootstrap';
A modális ablak megjelenítése:
const modal = new bootstrap.Modal( document.getElementById('failLoginModal')! ) modal.show()
mdbootstrap
Egy másik bootstrap:
Használjuk a saját dokumentációját:
Hozzáadás:
ng add mdbootstrap
- styles.css
@import "~mdbootstrap/css/bootstrap.css";
A JavaScript beillesztése:
- angular.json
"build": { "options": { "scripts": [ "node_modules/mdbootstrap/js/jquery.js", "node_modules/mdbootstrap/js/propper.js", "node_modules/mdbootstrap/js/bootstrap.js" ] } }
A szervert újra kell indítani, ha már el volt indítva.
ng-bootstrap
Az ng-bootstrap néhány saját komponenst kínál.
Webhely:
Telepítés parancssorból:
ng add @ng-bootstrap/ng-bootstrap
Használható még az ngx-bootstrap. A ng-bootstrap és az ngx-bootstrap közötti különbség, hogy az utóbbi több modulból áll, hogy ezzel is csökkenthessük a webszerverre feltöltött weboldal méretét.
Tudnivalók:
- A parancs automatikusan importálja src/app/app.module.ts fájlba az ng-bootstrap-t.
- A bootstrap is telepszik, de nem lesz importálva a JavaScript fájl.
Csomagnév séma
Ha nem a szokásos módon hivatkozunk az ng-bootstrap csomagra, ilyen figyelmeztetést kapunk:
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.
Ilyen figyelmeztetést kapunk például: ng add ng-bootstrap beírásakor.
Helyette használjuk:
ng add @ng-bootstrap/ng-bootstrap