Tartalomjegyzék

< Angular

Bootstrap

Bootstrap

Telepítés

Webhely:

Telepítés:

ng add bootstrap

vagy:

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:

angular.json
"build": {
    "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
    }
}

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

Angular 17-ben nincs ellenőrizve.
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.

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:

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