CSS Bootstrap 2. rész

29.1. fejezet: Bootstrap táblázatok (Tables)

A Bootstrap táblázat alapvetően egy megfelelő helyhagyással és vízszintes elválasztó vonalakkal rendelkezik.
Az egyszerű .table osztály így név ki: (cssbootstrap12.html)

A használata is igen egyszerű:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap egyszerű táblázat</title>
<meta charset="utf-8">

A másik gyakran használt a váltott soros csíkozás. Itt a lényeget, a .table-striped paraméterre kell lecserélni ilyen formában:

Ennek hatása:

Bootstrap csíkos táblázat

A következő verzió a keretes táblázat, amely táblázat minden egyes cellájának minden oldalához ad keretet. Az osztály neve: .table-bordered.
A lebegő sorok (.table-hover) egy érdekes effektus, amely a sima táblázat adott sorát szürke hátterűvé váltja át, amikor az egér a sor fölé ér.
A sima táblázatot lehet kérni fekete háttérrel és fehér betűkkel is a .table-dark osztállyal.
A fekete hátteret és a csíkozást lehet kombinálni is a következő paraméterrel:
<table class="table table-dark table-striped">
Továbbá a fekete hátteret lehet kombinálni a lebegő csíkozással is, például:
<table class="table table-dark table-hover">
Ritkán alkalmazott verzió a keret nélküli táblázat:
<table class="table table-borderless">

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

29.2. fejezet: Képek és kereteik

A Bootstrap 4 többféle képmegjelenítési lehetőséggel rendelkezik. A legelső a hagyományos CSS-ben már meglévő sarkok kerekítése. Vegyünk egy alapvető képet, például a székesfehérvári Országalma egyik fotóját:
(Kép eredetije: https://turizmus.szekesfehervar.hu/latnivalok/orszagalma-es-varoshaz-ter)

Országalma

Az alapvető téglalapnál le tudjuk kerekíteni a széleket (.rounded), körré formálhatjuk a képet (.rounded-circle), vagy keretet is adhatunk hozzá (.img-thumbnail). Mindhárom effektus szerepel az alábbi fájlban: (cssbootstrap13.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap képek</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Bootstrap képek</h2>
<table class="table" width="100%">
    <thead>
      <tr>
        <th>rounded</th>
        <th>rounded-circle</th>
        <th>img-thumbnail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="/cssbootstrap13.jpg" class="rounded"></td>
        <td><img src="/cssbootstrap13.jpg" class="rounded-circle"></td>
        <td><img src="/cssbootstrap13.jpg" class="img-thumbnail"></td>
      </tr>
    </tbody>
</table>

</div>

</body>
</html>

A megszokottak szerint a képet lehet balra és jobbra rendezni az alábbi minta szerint:

A kép középre helyezésekor érdemes hozzáadni az automatikus margót (.mx-auto) és a kijelző blokkba (.d-block) helyezését. Minta:

Talán a legfontosabb maradt a legvégére, a képek átméretezése. A reszponzivitás egyik lényege, hogy a képek automatikusan kitöltsék a rendelkezésükre álló helyet a képernyőn. Az .img-fluid osztály használata egyszerre jelenti a .max-width: 100%; és a height: auto; használatát. Minta:

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_images.asp

29.3. fejezet: Jumbotron

A jumbotron egy nagy, szürke mezőt jelez, így külön ki lehet emelni valami speciális tartalmat vagy információt. Megjegyzés: a jumbotron belsejében bármilyen HTML-kódot, vagy akár más Bootstrap elemeket/osztályokat is el lehet helyezni.

Nézzünk egy egyszerű példát a jumbotron használatára: (cssbootstrap14.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap jumbotron</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
    <h1>Bootstrap jumbotron</h1>
    <p>A Bootstrap a legnépszerűbb HTML-, CSS- és JS-keretrendszer a reszponzív, elsősorban mobilra fejlesztett weboldalak között.</p>
</div>
<p>Ez egy sima szöveg</p>
<p>Ez egy másik sima szöveg.</p>
</div>

</body>
</html>

A kiemelési jumbotron mezőt lehet teljes szélességűvé is tenni a következő minta szerint:

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp

29.4. fejezet: Figyelmeztetések (Alerts)

A Bootstrap számos lehetőséget nyújt a különféle figyelmeztetések használatára. Ezek ugyanazok a színek, amik összefüggésben voltak a tartalommal. Minta:

És a fenti lap kódja: (cssbootstrap15.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Figyelmeztetések (Alerts)</h2>
<p>Figyelmeztetéseket létre lehet hozni a .alert osztállyal a következő minták szerint:</p>
<div class="alert alert-success">
    <strong>Success</strong> Pozitív, vagy sikeres figyelmeztetés.
</div>
<div class="alert alert-info">
    <strong>Info</strong> Semleges információ vagy akció.
</div>
<div class="alert alert-warning">
    <strong>Warning</strong> Olyan figyelmeztetés, amely valamilyen reakciót igényel.
</div>
<div class="alert alert-danger">
    <strong>Danger</strong> Veszélyes vagy alapvetően negatív akció.
</div>
<div class="alert alert-primary">
    <strong>Primary</strong> Fontos figyelmeztetés.
</div>
<div class="alert alert-secondary">
    <strong>Secondary</strong> Kevésbé fontos interakció.
</div>
<div class="alert alert-dark">
    <strong>Dark</strong> Sötétszürke figyelmeztetés.
</div>
<div class="alert alert-light">
    <strong>Light</strong> Világosszürke figyelmeztetés.
</div>
</div>

</body>
</html>

Kicsit látványosabbá tehetőek az egyes sorok, ha az .alert-link osztályt használjuk a linkek kiemelésére. Minta:
<div class="alert alert-success">
<strong>Success</strong> Pozitív vagy sikeres
<a href="#" class="alert-link">figyelmeztetés</a>.
</div>

A normál ablakoknál megszokott jobb felső sarokban lévő „x” szimbólum is létrehozható, mint az egyes elemek becsukó indikátora. Osztály pontos neve: .alert-dismissible.
Minta:
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<strong>Success</strong> Pozitív vagy sikeres figyelmeztetés.
</div>

Halványító hatást lehet elérni a .fade és .show osztályok használatával. Minta:
<div class="alert alert-danger alert-dismissible fade show">

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

Az összes variáns teljes leírása itt található:
https://www.w3schools.com/bootstrap4/bootstrap_ref_js_alert.asp

29.5. fejezet: Nyomógombok (Buttons)

A Bootstrap 4 számos nyomógombtípust ajánl. Ezek megfelelnek a jól ismert tartalomfüggő színeknek.

Ezt a sorozatot az alábbi kóddal hoztam létre:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap nyomógombok</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Nyomógomb stílusok</h2>
<button type="button" class="btn">Alapértelmezett</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>

</body>
</html>

Ezeket a gomb-stílusokat a hagyományos HTML-nek megfelelően lehet használni az <a>, a <button>, illetve az <input> elemek belsejében is. Megfelelő kódrészlet:
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Az egyes nyomógombokat meg lehet jeleníteni némi animációval is. Minta:
<button type="button" class="btn btn-outline-primary">Primary</button>
Itt az outline osztály jelzi az animációt.

Az alapértelmezetthez eltérő méretezéshez két kiegészítő paraméter áll rendelkezésre:
.btn-lg: (large) nagyobb nyomógomb
.btn-sm: (small) kisebb nyomógomb

Kódrészlet:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Alapértelmezett</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp

29.6. fejezet: Nyomógomb csoportok (Button Groups)

A Bootstrap 4 megengedi nyomógombok csoportjának létrehozását. (.btn-group) Ez pl. weblapok tetején vagy oldalán nagyon hasznos lehet. Alapvetően a gombok vízszintesen jelennek meg. Kódrészlet:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Érdemes kihasználni a gombok méretezhetőségét is a .btn-group-lg, továbbá a .btn-group-sm osztályokkal. A lényeges sor mintája:
<div class="btn-group btn-group-lg">

Egyes weboldalakra függőlegesen is létre lehet hozni a nyomógombok csoportját .btn-group-vertical paraméterrel. Minta:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_button_groups.asp

29.7. fejezet: Kitűzők (Badges)

Újabb kiemelési, illetve figyelemfelhívási lehetőség a kitűzők használata. A téglalap alakú .badge osztály használatával tartalomfüggő jelzéseket tudunk létrehozni a <span> elemeken belül. Fontos megjegyzés, hogy a .badge elemek mérete függ az őt tartalmazó (szülő)elemtől.

Bootstrap kitűzők

A teljes kód: (cssbootstrap17.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Badges</h2>
<h3>Címsor minta <span class="badge badge-secondary">Kitűző</span></h3>
</div>

</body>
</html>

Itt is lehet bővíteni a megszokott tartalomfüggő színekkel, például:
<span class="badge badge-primary">Primary</span>
Az egyes kitűzőket le lehet kerekíteni a sarkainál, például:
<span class="badge badge-pill badge-secondary">Secondary</span>

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_badges.asp

29.8. fejezet: Haladásjelző sáv (progress bar)

Egyes weboldalak betöltésekor igen hasznos, ha különféle haladásjelzőket használunk. Erre való a .progress osztály, valamint a .progress-bar elem. Minta:
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>

Az egyes elemek magasságát is lehet szabályozni a már megszokott height paraméterrel. Minta:
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>

A csík belsejébe feliratot, pl. %-értéket is lehet írni. Minta:
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>

A Bootstrap 4-ben megszokott színeket is lehet használni. Minta:

<div class="progress">
<div class="progress-bar bg-warning" style="width:40%">40%</div>
</div>

További érdekesség lehet a csíkozott (.progress-bar-striped), illetve az animált (.progress-bar-animated) haladásjelző. Ez utóbbira egy minta:
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp

29.9.fejezet: Oldalszámozás (Pagination)

Ha elég sok tartalom van egy weblapon, akkor érdemes sorszámok mögé rejteni a lapokat.
Az alapvető számozás elkészítéséhez a .pagination osztály és a .ul elem megléte szükséges. Minta:

Oldalszámozás

És a forráskód: (cssbootstrap18.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap számozás</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Oldalszámozás</h2>

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Előző</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Következő</a></li>
</ul>
</div>

</body>
</html>

Bármelyik elemek aktívvá lehet tenni egy kiemeléssel (.active paraméter). Minta:
<li class="page-item active"><a class="page-link" href="#">2</a></li>

Tiltani is lehet. Ez akkor hasznos, ha az illető oldal nem létezik. (.disable paraméter) Minta:
<li class="page-item disabled">
<a class="page-link" href="#">Előző</a></li>

Méretezés a már megszokott nagy (.pagination-lg) és kicsi (.pagination-sm) paraméterrel lehetséges. Minta:
<ul class="pagination pagination-lg">

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp

29.10. fejezet: Legördülő menü (Dropdown)

Használata igen egyértelmű. Sokfelé és sokan használják, ha több lehetőség van egy weblapon, mint hely (pl. a tetején). Minta:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Nyomógomb</button>
<div class="dropdown-menu">
    <a class="dropdown-item" href="#">1.Link</a>
    <a class="dropdown-item" href="#">2.Link</a>
    <a class="dropdown-item" href="#">3.Link</a>
</div>
</div>

A felsorolt menük közé el lehet rejteni egy osztó(csíkot) is. Minta:
<div class="dropdown-divider"></div>

Ha nem pont a nyomógomb alatt szeretnénk a menüt legördíteni, akkor balra vagy jobbra is elrakhatjuk. Minta:
<div class="dropdown dropleft">
illetve:
<div class="dropdown dropright">

A menüt lehet felfelé is aktiválni. Minta:
<div class="dropup">

További lehetőségek találhatók az alábbi címen: (tényleg sok!)
https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp

Tisztelt felhasználók, olvasók és CSS iránt érdeklődők!

A legfontosabb elemeken immáron túljutottunk, bár tudom, hogy még igen sok értelmes ötlet maradt. Remélem, hogy ez a fordítás, illetve újraértelmezés kedvet csinált a Bootstrap használatához. Sok sikert a hozzá!

Még egyszer a forrás, ahonnan dolgoztam:

https://www.w3schools.com/bootstrap4/default.asp

Köszönettel:

Tamás Ferenc, 2020. nov.