Legális puska - bootstrap

A Bootstrap 5 rácsrendszere hat osztályt tartalmaz:

col- (extra kicsi eszközök - képernyőszélesség 576px-nél kisebb)
col-sm- (kis eszközök - képernyőszélesség 576px vagy nagyobb)
col-md- (közepes eszközök - képernyőszélesség 768px vagy nagyobb)
col-lg- (nagy eszközök - képernyőszélesség 992px vagy nagyobb)
col-xl- (extra nagy eszközök - képernyőszélesség 1200px vagy nagyobb)
col-xxl- (dupla extra nagy eszközök - képernyőszélesség 1400px vagy nagyobb)

<!-- Szabályozd az oszlopok szélességét és azt, hogy hogyan jelenjenek meg különböző eszközökön -->
<div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
</div>
<div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
</div>

<!-- Vagy csak hagyd, hogy a Bootstrap automatikusan beállítsa -->
<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Hogyan és mit módosíthatsz a navbarban: 
    - navbar-expand-xxl|xl|lg|md|sm --> reszponzivításért felelős
    - navbar-expand-* --> ha eltávolítod ezt a részt, vertikális lesz a sáv
    - justify-content-center - középre állítod a tartalmát
    - bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark and bg-light --> ez módosítja a navbar színét
    - navbar-dark (fehér szöveg), .navbar-light(fekete szöveg)
    - navbar-brand - lógóhoz (a képet autmatikusan körré formálja)
    - fixed-top - ha legörgetsz az oldal tetején marad a navbar
    - active (nav-link után) -  kiemeli az adott linket
    - disabled - inaktívvá teszi a linket

<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

Hogyan és mit módosíthatsz a táblában: 
    - table - reszponzívvá teszi és minimálisan szépíti 
    - table-striped - a sorokat "zebrásítja"
    - table-bordered - minden oldalára szegélyt teszt
    - table-borderless - eltávolít minden szegélyt
    - table-hover - amelyik sor fölé viszed az egeret, beszürkül amíg afelett tartod
    - table-dark - sötét hátteret ad a táblának
    - tr class-ba kell írni: table-primary/table-success/table-danger/table-info/table-warning/table-active/table-secondary/table-light/table-dark - beszínezi az adott sort

<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Színek: text & background:
Text Colors:
    - text-muted, text-primary, text-succes, text-info, text-warning, text-danger, text-secondary, text-white, text-dark, text-body, text-light
    - text-black-50/text-white-50 - 50%os átlátszó fekete/fehér háttér a szövegnek

Background Colors:
    - bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark, bg-light
    - text-bg-primary, text-bg-succes ...


<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>


<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<p class="text-bg-primary">This text is important.</p>
<p class="text-bg-success">This text indicates success.</p>

Tulajdonság:

m - margó
p - padding

Oldal:

t - top
b - bottom
s - start/left
e - end/right 
x - left&right
y - top&bottom

Méret:
0-5 vagy auto

<div class="pt-5" style="width: 200px;">
    Belső felső margó 5 mérettel távolabb van
</div>

<div class="mx-auto" style="width: 200px;">
    Középre igazított elem
</div>

Mit addhatunk még hozzá:
    - fade - írjuk a modal mellé a legelső div class-ban, így tudunk animációt adni hozzá
    - modal-sm/lg/xl vagy modal-fullscreen - írjuk a modal-dialog mellé, megváltozatja a modal méretét
    - modal-dialog-centered - szintén a dialog mellé, ezzel állítjuk középre
    - modal-dialog-scrollable - dialog mellé, ha csak a modal-on belül szeretnénk görgetőt

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
            Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        </div>

        </div>
    </div>
</div>

Mit addhatunk még hozzá:
    - színek - card osztály mellé beírhatunk valamilyen színt pl: bg-primary
    - card-img-top/bottom - felül vagy alul helyezkedjen el a kép
    - card-img-overlay - card-body helyére, ha a szöveg a kép fölött legyen

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
</div>
                            
<div class="card" style="width:400px">
    <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-body">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
        <a href="#" class="btn btn-primary">See Profile</a>
    </div>
</div>

Mit addhatunk még hozzá:
    - show - alapjáraton rejtve van, de ezzel feldejük automatikusan a tartalmát
    - data-bs-parent = "valami" - ha szeretnéd, hogy mindig csak egy collapse legyen nyitva, írd úgy mint a példában

<div id="accordion">

    <div class="card">
        <div class="card-header">
            <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
                Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
            <div class="card-body">
                Lorem ipsum..
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
            <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                <div class="card-body">
                    Lorem ipsum..
                </div>
            </div>
    </div>

    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
                Collapsible Group Item #3
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
            <div class="card-body">
                Lorem ipsum..
            </div>
        </div>
    </div>

</div>

Így adhatsz hozzá címet és tartalmat:

<div class="carousel-item">
    <img src="la.jpg" alt="Los Angeles">
    <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>We had such a great time in LA!</p>
    </div>
</div>

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- Indicators/dots -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
    </div>

  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="ny.jpg" alt="New York" class="d-block w-100">
        </div>
  </div>

  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
  </button>
</div>

Kontextus fajták: alert-success, alert-info, alert-warning, alert-danger, alert-primary, alert-secondary, alert-light, alert-dark
Linkhez: alert-link
Bezárható alert: 

<div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

Animált bezárható alert:

<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

<div class="alert alert-success">
    <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-success">
    <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>