# 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="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/bootstrap/kezdo-lepesek.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.