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. A részletes dokumentáció itt érhető el.

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>

Színek

Különböző objektumok színeinek beállítására az alábbi színek alkalmazhatók.

  1. text-primary

  2. text-success

  3. text-info

  4. text-warning

  5. text-danger

  6. text-secondary

  7. text-white

  8. text-dark

  9. text-light

Háttér színek:

  1. bg-primary

  2. bg-success

  3. bg-info

  4. bg-warning

  5. bg-danger

  6. bg-secondary

  7. bg-dark

  8. 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):

  1. .display-1

  2. .display-2

  3. .display-3

  4. .display-4

Szövegbeállítások

  1. font-weight-bold

  2. font-weight-normal

  3. font-weight-light

  4. font-italic

  5. lead - kiemelés

Igazítás

  1. text-left

  2. text-justify

  3. text-right

  4. text-center

Szöveg alakítása

  1. text-lowercase

  2. text-uppercase

  3. text-capitalize

Tördelés

  1. text-nowrap

  2. text-truncate

Függőleges igazítás

  1. align-baseline

  2. align-top

  3. align-middle

  4. align-middle

  5. align-bottom

  6. align-text-top

  7. 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:

  1. col-sm-<N>

  2. col-md-<N>

  3. col-lg-<N>

  4. col-xl-<N>

  5. 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

  1. border

  2. border-top

  3. border-right

  4. border-bottom

  5. border-left

  6. border .border-primary

  7. border .border-secondary

  8. rounded

  9. rounded-top

  10. 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>

Feladatok

Készítsük el az alábbi oldalt: KTM motor áruház Készítse el a gyakorlat-1