28.4. fejezet: A Konténerek tulajdonságai (Container)
Az előző fejezetben láttuk a két alapvető konténer-típust. Most nézzük meg a fontosabb paramétereiket!
Fix szélességű konténert kell használni, ha megjelenés-érzékeny, de állandó szélességű tárolót akartunk használni. A max-width tulajdonság alkalmazkodni fog a különféle képernyőkhöz.
Példák:
| max-width |
Extra kicsi <576px 100% |
Kicsi >=576px |
Közepes >=768px |
Nagy >=992px |
Extra nagy >=1220px |
Nézzük meg az alábbi példában, hogy a böngésző hogyan alkalmazkodik a különféle méretekhez menet közben (lépésenkénti!) átrendezéssel. (cssbootstrap05.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>Ez a rész a .container osztály belsejében van.</p>
<p>A .container osztály a reszponzív állandó szélességű tartalom megjelenését teszi lehetővé.</p>
<p>Méretezze át a böngésző ablakát, hogy láthassa a különféle szélességű (max-width elemmel szabályozott) megjelenést lépésenként.</p>
</div>
</body>
</html>
Ezzel ellentétben használjuk a .container-fluid osztályt az olyan konténer létrehozásához, amely mindig (alkalmazkodóan!) kitölti a rendelkezésre álló helyet. Magyarázatként: a width értéke itt mindig 100%. (cssbootstrap06.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container-fluid 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>Ez a rész a .container-fluid osztály belsejében van.</p>
<p>A .container-fluid osztály minden esetben, folyamatosan, teljes szélességben kitölti a rendelkezésére áló helyet, nem csupán lépésenként. </p>
</div>
</body>
</html>
A téma részletesebb tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_containers.asp