Bootstrap¶

A bootstrap egy mobileszközökre kifejlesztett keretrendszer, amely elsősorban mobil eszközökre reszponzív weblapokat lehet fejleszteni. Eredetileg a Twitternél fejlesztették.

Egy Bootstrap oldal váza:

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <!-- Bootstrap js és css betöltése -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

A konténerek¶

.container - minden töréspontnál beállít egy max-width értéket.
.container-fluid - minden töréspontnál 100%.
.container-{töréspont} - a max-width megadott töréspontig 100%.

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.</p>
</div>

A container-fluid az oldal teljes szélességében mgjelenik.

<div class="container-fluid">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.

    </p>
</div>

Karakter- és háttérszínek¶

text-primary

text-success

text-info

text-warning

text-danger

text-secondary

text-white

text-dark

text-light

Háttér színek:

bg-primary

bg-success

bg-info

bg-warning

bg-danger

bg-secondary

bg-dark

bg-light

<div class="container text-danger bg-warning">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper, justo suscipit scelerisque placerat, augue turpis commodo nisl, ut malesuada quam lacus ut arcu.</p>
</div>

Karakterformázások¶

Fejezetek (címek):

.display-1

.display-2

.display-3

.display-4

Szövegbeállítások

font-weight-bold

font-weight-normal

font-weight-light

font-italic

lead - kiemelés

Igazítás

text-left

text-justify

text-right

text-center

Szöveg alakítása

text-lowercase

text-uppercase

text-capitalize

Tördelés

text-nowrap

text-truncate

Függőleges igazítás

align-baseline

align-top

align-middle

align-middle

align-bottom

align-text-top

align-text-bottom

Inline:

<ul class="list-inline">
  <li class="list-inline-item">Elem 1</li>
  <li class="list-inline-item">Elem 2</li>
  <li class="list-inline-item">Elem 3</li>
</ul>

A rács¶

A Bootstrap egy grid rendszert kínál az oldalak felépítéséhez. Stílusok:

col-sm-<N>

col-md-<N>

col-lg-<N>

col-xl-<N>

col-xxl-<N>

<div class="row">
    <div class="col-sm-3 bg-primary">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-sm-3 bg-success">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-sm-3 bg-info">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-sm-3 bg-warning">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-md-4 col-xs-12 bg-primary">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-xs-12 col-md-4 col-xs-12 bg-success">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-xs-12 col-md-4 col-xs-12 bg-info">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-xs-12 col-md-4 col-xs-12 bg-warning">
       Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
</div>

<div class="row">
    <div class="col-sm-3 bg-primary">
       Col1: Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-sm-6 bg-success">
       Col2: Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
    <div class="col-sm-3 bg-info">
       Col3: Duis sit amet dui cursus, varius purus gravida, tempus tortor.
    </div>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-6">
    <h3>Oszlop1</h3>
    <p>Lorem ipsum</p>
    </div>
    <div class="col-sm-6">
    <h3>Oszlop2</h3>
    <p>Lorem ipsum</p>
    </div>
</div>
</div>

Szegélyek¶

border

border-top

border-right

border-bottom

border-left

border .border-primary

border .border-secondary

rounded

rounded-top

rounded-right

Táblázatok¶

<table class="table-striped border-primary table-bordered">
    <thead class="thead-dark">
    <tr class="border border-warning">
        <th>#</th>
        <th>First</th>
        </tr>
    </thead>
    <tr class="border border-warning">
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.1</td>
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.2</td>
    </tr>
    <tr class="border border-warning">
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.3</td>
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.11</td>
    </tr>
    <tr class="border border-warning">
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.5</td>
        <td>Duis sit amet dui cursus, varius purus gravida, tempus tortor.4</td>
    </tr>
</table>

Képek¶

<img src="https://hasznaltauto.medija.hu/16544/18744849_1.jpg?v=1666088392" class="rounded float-left" style="max-width: 150px;" alt="1">
<img src="https://ktmcentrum.hu/adat/jarmu/135/gyorskep/nagykep/abt_119417939507040571nzgzodgwng.png" class="rounded float-right" style="max-width: 150px;" alt="2">
<img src="http://www.ktmkecskemet.hu/wp-content/uploads/2017/11/378294_450-EXC-F-MY22-90-Right.jpg"
  class="img-fluid rounded mx-auto d-block" alt="KTM 2022">

Űrlapok¶

<form>
    <label>Név</label>
    <input class="form-control">
    <br>
    <button class="btn btn-primary">Küldés</button>
</form>

Gombok:

<button class="btn btn-primary">Bootstrap gomb</button>

Css módosítása:

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <!-- Bootstrap js és css betöltése -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        .btn-primary {
            background-color: purple;
            border-color: purple;
        }
    </style>
</head>
<body>

</body>
</html>