> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/bootstrap/kezdo-lepesek.md).
# Kezdő lépések
## Bootstrap beágyazása külső szolgáltatótól (CDN)
A Bootstrap külső szolgáltatónál elhelyezett **CSS** állományát egyszerűen beemelhetjük HTML állományainkba egy **link** segítségével (ezt a HTML dokumentum fejlécében kell elhelyezni):
```markup
```
Egyes interaktív szolgáltatások eléréséhez szükség van a Bootstrap **JavaScript** állományára is, ehhez a következő 3 sort el kell helyezni a HTML állomány lezáró `body` eleme előtt:
```markup
```
Amennyiben nem használunk interaktív elemeket, mint például a felugró ablakok, vagy lenyíló menük, akkor nem szükséges beemelni a JavaScript állományokat.
A következő példa dokumentumba be van emelve az összes **CSS** és **JavaScript** állomány:
{% code title="bootstrap-cdn.html" %}
```markup
Bootstrap CDN
Hello Bootstrap!
```
{% endcode %}
## Bootstrap bemelése a HTML állomány mellé
A Bootstrap állományait direkt módon beemelhetjük a HTML állományaink mellé. Ehhez [töltsük le](https://getbootstrap.com/docs/4.4/getting-started/download/) a Bootstrap csomagot, a kapott zip állományt kicsomagolva igény szerint helyezzük el a HTML állomány mellett a CSS állományokat és ha interaktív elemeket is használunk, a JavaScritp állományokat is.
A **CSS** állomány bekötéséhez a HTML dokumentum fejlécében helyezzünk el egy **link**-et:
```markup
```
Válasszuk a `bootstrap.min.css` elnevezésű állományt, ez ez összes szolgáltatást tartalmazza, és tömörített formátumú.
A **JavaScript** állományok beemeléséhez a Bootstrap állományain kívül szükségünk lesz a **jQuery** keretrendszerre, és a **popper.js** felugró ablak kezelőre is. Az összes JavaScript állományt helyezzük el a html dokumentum mellett (a Bootstrap js mappája erre megfelel), és a `body` elem záró része előtti sorban helyezzük el a következő 3 hivatkozást:
```markup
```
A következő példa dokumentumba be van emelve az összes CSS és JavaScript állomány:
{% code title="bootstrap.html" %}
```markup
Bootstrap CDN
Hello Bootstrap!
```
{% endcode %}
Bootstrap 4 letöltés link: \
jQuery letöltés link: \
Popper.js letöltés link: [https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.j](https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js)
Az alábbi linken a fenti példa HTML dokumentum, és az összes hivatkozott állomány egyben letölthető:
{% file src="/files/-M1HjWY4QagXENxJxaid" %}
bootstrap.zip
{% endfile %}
## Hasznos eszközök
### Bootstrap témák
A Bootstrap keretrendszer könnyen témázható, mi is létre tudunk belőle hozni egyedi témát, ehhez a Bootstrap forrásállományait szükséges szerkeszteni. A forrásállományok szerkesztése haladó nehézségű feladat, szerencsére elérhetőek előre elkészített színsémák a **Bootswatch.com** weboldalon a témák menüpontban.
A téma használatba vételéhez töltsük le a témához kapcsolódó bootstrap.min.css állományt, és kössük be a HTML állományunkba.
{% embed url="" %}
### Bootstrap Modulháló Chrome böngészőhöz
Ezzel az eszközzel a bootstrap modulhálóját jeleníthetjük meg a Chrome böngészőben, ami könnyíti a felület kialakítását.
Hogy helyi, a számítógépünkön található állományokon is használni tudjuk ezt a bővítményt, engedélyeznünk kell a következő opciót (Chrome-ban bővítmények kezelése):
{% embed url="" %}
### Bootstrap kódkiegészítő VScode bővítmény
A Visual Studio Code alapból nem kezeli a Bootstrap kód részleteket, ezzel a bővítménnyel elérhetővé válnak a Bootstrap HTML struktúrái a `b4` kulcsszóra.
{% embed url="" %}