Bootstrap

• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2023, 2024, 2025
• 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

@import "bootstrap";

A JavaScript része:

angular.json

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

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 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()

Egy másik bootstrap:

Használjuk a saját dokumentációját:

• https://mdbootstrap.com/docs/b5/angular/

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.

Az ng-bootstrap néhány saját komponenst kínál.

Webhely:

• https://ng-bootstrap.github.io/

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.

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