28.3. fejezet: A legelső Bootstrap 4-es oldal összeállítása
A Bootstrap 4 HTML-kódokat és CSS tulajdonságokat használ, amelyek feltételezik a HTML5-ös verziójának használatát. Szóval minden esetben a HTML5-ös alapjait kell használni. Célszerű már rögtön az oldal legelején megadni a következőket: (cssbootstrap02.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
A Bootstrap 4 alapvetően mobil platformokra tervezett eszköztár, így a reszponzív megjelenés az alapvető részét képezi. A megfelelő rendereléshez és nagyításhoz érdemes a következő sort hozzáadni a <head> elembe:
<meta name="viewport" content="width=device-width, ">
Itt a width=device-width úgy állítja be az oldal szélességét, hogy alkalmazkodjon a képernyő szélességéhez. Továbbá az initial-scale=1 beállítja a böngészőben a kezdeti nagyítást az alapértelmezett szintre.
A Bootstrap alapvetően két fajta konténert alkalmaz a tartalmak megfelelő megjelenítése végett:
A .container osztály fix szélességű megjelenítést tesz lehetővé.
A .container-fluid osztály kiterjeszti a megjelenítést a teljes szélességre, tehát alkalmazkodó szélességű.
Elsőnek nézzünk egy állandó szélességű elemet! (cssbootstrap03.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container példa</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">
<h1>Bootstrap minta</h1>
<p>Fix szélességű .container rész, amely csak adott szélességben jelenik meg.</p> </div>
</body>
</html>
Most pedig egy alkalmazkodó szélességűt! (cssbootstrap04.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container példa</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-fluid">
<h1>Bootstrap minta</h1>
<p>Alkalmazkodó szélességű .container rész, amely kitölti a vízszintesen rendelkezésre álló helyet.</p>
</div>
</body>
</html>
A téma részletesebb tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp