[[oktatas:web:angular|< Angular]]

====== Bootstrap ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu


===== Bootstrap =====



==== Telepítés ====
Webhely:
  * https://getbootstrap.com/

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:

<code javascript angular.json>

"build": {
    "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
    }
}
</code>



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

Vagy még rövidebb:
<code css>
@import "bootstrap";
</code>



A JavaScript része:
<code javascript angular.json>

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

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:
<code javascript>
<button class="btn btn-primary">Teszt</button>
</code>

===== Bootstrap ikonok =====

<note>
Angular 17-ben nincs ellenőrizve.
</note>

  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:

<code css style.css>
@import "~bootstrap-icons";
</code>


Példa:

<code html src/app/app.component.html>
<i class="bi bi-bug-fill"></i>
</code>



==== 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:
  * https://mdbootstrap.com/docs/b5/angular/

Hozzáadás:

  ng add mdbootstrap

<code css styles.css>
@import "~mdbootstrap/css/bootstrap.css";
</code>


A JavaScript beillesztése:
<code javascript angular.json>

"build": {
    "options": {
        "scripts": [
            "node_modules/mdbootstrap/js/jquery.js",
            "node_modules/mdbootstrap/js/propper.js",
            "node_modules/mdbootstrap/js/bootstrap.js"
        ]
    }
}
</code>

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:
  * 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.


==== Csomagnév séma ====

Ha nem a szokásos módon hivatkozunk az ng-bootstrap csomagra, ilyen figyelmeztetést kapunk:

<code>
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.
</code>

Ilyen figyelmeztetést kapunk például: <del>ng add ng-bootstrap</del> beírásakor.
Helyette használjuk:
  ng add @ng-bootstrap/ng-bootstrap