Bootstrap

Oldalrendezés

Reszponzív:

class="container"

Mindig 100% Szélesség:

class="container-fluid"

Sorok és oszlopok

class="row": egy új sort készít
class="col": egy új oszlopot csinál ("row"-on belül használandó)

Egyenletes elrendezés

<div class="container">
    <div class="row">
        <div class="col">Lorem ipsum dolor sit amet.</div>
        <div class="col">Lorem ipsum dolor sit amet.</div>
        <div class="col">Lorem ipsum dolor sit amet.</div>
        <div class="col">Lorem ipsum dolor sit amet.</div>
    </div>
</div>

Itt a sorok csak "col" osztályt kaptak ezért mindegyik ugyan akkor lesz.

Nem azonos méretű oszlopok használata

<div class="container">
    <div class="row">
        <div class="col-3">3 egység</div>
        <div class="col-6">6 egység</div>
        <div class="col-3">3 egység</div>
    </div>
</div>

Egy oszlop max 12 sort tud tartalmazni, ha többet adunk meg, túl fog csordulni.

Méretek

sm	md	lg	xl	xxl
okostelefonok	tabletek	notebookok	nagy monitorok	hatalmas monitorok

Ha nincs semmelyik megadva, az alapértelmezett érték az "sm" lesz.

Példa

<div class="row">
    <div class="col-12">Lorem ipsum.</div>
    <div class="col-12 col-lg-6">Lorem ipsum.</div>
    <div class="col-12 col-lg-6">Lorem ipsum.</div>
</div>

Itt, ha telefon méretű a weboldal, akkor az oszlopok egymás alatt lesznek, de ha a monitor méreten van, akkor az utolsó kettő 6 egység lesz.

Szövegformázások

• text-start: balra igazítás

• text-center: középre igazítás

• text-end: jobbra igazítás

• text-lowercase: kisbetűs megjelenítés

• text-uppercase: nagybetűs megjelenítés

• text-capitalize: nagy kezdőbetűs megjelenítés

• fw-bold: félkövér megjelenítés

• fst-normal: normál megjelenítés

• fst-italic: megjelenítés dőlt stílussal

Színek

• Szövegszín állítása: text-primary
• Háttérszín állítása: bg-primary

<p class="text-primary">Kék szövegszín</p>
<p class="text-secondary">Szürke szövegszín</p>
<p class="text-success">Zöld szövegszín</p>
<p class="text-danger">Piros szövegszín</p>
<p class="text-warning">Sárga szövegszín</p>
<p class="text-info">Ciánkék szövegszín</p>
<p class="text-light bg-dark">Világos szövegszín, sötét háttér</p>
<p class="text-dark">Sötét szövegszín</p>
<p class="text-white bg-dark">Fehér szövegszín, sötét háttér</p>

Margó, belső margó

Szegélyek

• border: szegély mind a 4 oldalon
• border-top: szegély felül
• border-end: szegély jobb oldalon
• border-bottom: szegély alul
• border-start: szegély bal oldalon

Példa

<div class="border border-primary rounded-circle">kék kör alakú szegély</div>
<div class="border border-secondary border-3">szürke 3 egység vastagságú szegély</div>

Kép

• Előképnek nevezzük azokat a kisméretű képeket, amelyekre kattintva a kép nagyobb változata töltődik be.

• class="img-thumbnail"

• Folyékonyan átméretezett kép

• class="img-fluid"

Kép középreigazítása

• A d-block osztállyal blokkos megjelenítést adunk neki és az mx-auto osztállyal középreigazítjuk

Margin, padding

Felépítése

• m: margó
• p: padding

Oldalak:

• t: top
• b: bottom
• s: start (bal)
• e: end (jobb)
• x: vízszintes
• y: függőleges

Az ha nincs megadva az oldal, akkor mind a 4 oldalra érvényes.

Példák

<div class="mt-2 p-3"></div>

2 egységnyi felső margó, 3 egységnyi belső margó

<div class="m-2 pt-3"></div>

2 egységnyi margó, 3 egységnyi felső belső margó

<div class="mx-auto p-0"></div>

Vízszintes auto margó, 0 egységnyi belső margó

Méretezés

• w-25: 25% szélesség

• w-100: 100% szélesség

• w-auto: automatikus szélesség

• h-25: 25% magasság

• h-100: 100% magasság

• h-auto: automatikus magasság

Megjelenítés

• d-block: blokkos megjelenítés
• d-inline: sorbeli megjelenítés
• d-none: elem megjelenésének letiltása

Példák

• d-sm-none: az elem eltűnik, ha telefonos méretben nézzük
• d-md-block: az elem tabletnézetben blokkos megjelenítést kap

Arányok

Használat: class="ratio ratio-2x3"**

• ratio-1x1: 1:1 arány
• ratio-16x9: 16x9 arány

Lebegtetés

• float-start/center/end: lebegtetés

Táblázatok

Táblázat szerkesztéséhez mindig hozzá kell adni a table osztályt!**

• table-responsive: Vízszintesen gördíthető
• table-striped: csíkozott soros megjelenítés
• table-bordered: Szegélyes megjelenítés
• table-dark/light: Sötét vagy világos megjelenítés

Bootstrap komponensek

• Gombok: class="btn btn-primary"
• Navigációs sor: class="navbar"