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">
<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>Egyszerű táblázat</h2>
<table class="table">
<thead>
<tr>
<th>Vezetéknév</th>
<th>Keresztnév</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Antal</td>
<td>Béla</td>
<td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
</tr>
<tr>
<td>Cirmos</td>
<td>Cica</td>
<td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
</tr>
<tr>
<td>Daliás</td>
<td>Diána</td>
<td>Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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:
<table class="table-striped">
Ennek hatása:
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)
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:
<img src="/valami.jpg" class="float-left">
<img src="/valami.jpg" class="float-right">
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:
<img src="/valami.jpg" class="mx-auto d-block">
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:
<img class="img-fluid" src="/valami">
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:
<div class="jumbotron jumbotron-fluid">
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.
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:
<!-- Orange -->
<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:
É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.