28.6. fejezet: Rácsozás (grid)
A Bootstrap rácsrendszere alkalmazkodó flexbox rendszerű és legfeljebb 12 oszlop megjelenését teszi lehetővé. Ha nem akarjuk a 12 oszlopot külön-külön használni, akkor csoportosíthatóak, akár szélesebb oszlopok létrehozását is elősegítve.
Mivel a rácsrendszer maga is reszponzív, így annak újraméretezése függ a képernyő méretétől. Ennek ellenére a rendszer használatakor fontos, hogy meggyőződjünk arról, hogy a használt oszlopok mennyisége nem haladja meg a 12-t, habár nem szükséges mind a 12-t használni.
Ezt mutatja be az alábbi példa: (cssbootstrap09.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap rácsozat</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>Bootstrap rácsozat</h1>
</div>
<div class="container bg-light border">
<div class="row">
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 6</div></div>
<div class="col"><div class="text-center">span 6</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 12</div></div>
</div>
</div>
</body>
</html>
A CSS Bootstrap 4 rácsrendszernek öt alapvető osztálya van (méret szerint):
.col- (extra kicsi eszköz, kép szélessége kisebb, mint 576 képpont)
.col-sm- (kis eszköz, kép szélessége nagyobb, vagy egyenlő, mint 576 képpont)
.col-md- (közepes eszköz, kép szélessége nagyobb, vagy egyenlő, mint 768 képpont)
.col-lg- (nagy eszköz, kép szélessége nagyobb, vagy egyenlő, mint 992 képpont)
.col-xl- (extra nagy eszköz, kép szélessége nagyobb, vagy egyenlő, mint 1200 képpont)
A rácsrendszer alapvető struktúrája:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
Ebben a példában először létrehozzuk a sort (<div class="row">), majd a kívánt számú oszlopot (a .col-*-* segítségével). Itt az első csillag (*) a méretezhetőséget jelenti (sm/md/lg/xl), míg a második csillag egy számot jelent, melynek 12-t kell adnia.
Íme egy gyakorlati megvalósítás két nem egyforma oszloppal:
<div class="container bg-light border">
<div class="row">
<div class="col-sm-9">nagy</div>
<div class="col-sm-3">kicsi</div>
</div>
</div>
A következő példában az oszloponkénti méretezés helyett engedélyezzük a Bootstrapnek, hogy ő maga végezze a méretezést: két ”col” elemet használva a méret 50% lesz darabonként, három ”col” elemet használva már 33,33%-ra csökken ez a méret, stb. Itt is használhatóak a .col-sm/md/lg/xl paraméterek az oszlopok reszponzív méretezéséért. Íme egy reszponzív példa:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
A téma részletesebb tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp