28.5. fejezet: Konténer helyhagyás, vastagság, színek
Alapértelmezés szerint a konténerek bal és jobb oldalán van egy 15 képpontos hely (container padding), de ez nem létezik a felső és az alsó helyekre. Éppen ezért a jobb megjelenés kedvéért gyakori a kiegészítő paraméterek használata, pl. a .pt-3 jelentése: adjon a felső helyhez 16 képpontot. Konkrét példa:
<div class="container pt-3">Konténer belseje</div>
Nem nehéz megérteni a keret vastagságának, illetve színének paraméterezését sem. A két paramétert gyakran egyszerre használjuk. Nézzük az alábbi kódrészletet:
<div class="container p-3 my-3 bg-dark text-white">
Értelmezés paraméterenként a következő:
- p-3: felső helyhagyás 16 képpont. (padding)
- my-3: keret létezik. (border)
- bg-dark: sötét háttérszín (dark background color)
- text-white: fehér szövegszín (text color white)
A teljes kód: (cssbootstrap07.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap keretek és színek 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 p-3 my-3 border">
<h1>Bootstrap minta</h1>
<p>Ennek a konténernek van kerete (border) és némi extra helyhagyása (padding), valamint margója (margin) is. </p>
</div>
<div class="container p-3 my-3 bg-dark text-white">
<h1>Bootstrap következő minta</h1>
<p>Sötét háttér (bg-dark), fehér szövegszín (text-white), valamint némi helyhagyás (padding) és margó (margin) is.</p>
</div>
<div class="container p-3 my-3 bg-primary text-white">
<h1>Újabb minta</h1>
<p>Kék háttér (bg-primary), fehér szöveg (text-white), valamint némi helyhagyás (padding) és margó (margin) is.</p>
</div>
</body>
</html>
Fontos! A CSS Bootstrap színeihez érdemes használni a következő fejezetet:
https://www.w3schools.com/bootstrap4/bootstrap_colors.asp
Hasonlóan a keretek pontos paraméterezése a következő helyen található (érthető példákkal):
https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp
A fentieken kívül használhatunk reszponzív méretezésű konténereket is, melyek a megfelelő angol szavak rövidítései:
- sm = small = kicsi
- md = medium = közepes
- lg = large = nagy
- xl = extra large = igen nagy
A fentiekre egy működő példa: (cssbootstrap08.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.0/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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Reszponzív konténerek</h1>
<p>Méretezze át a böngészőt az effektus megjelenéséért!</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
</body>
</html>
A téma részletesebb tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_containers.asp