A Bootstrap rácsrendszere flexbox-szal épül fel, és akár 12 oszlopot is lehetővé tesz az oldalon.
Ha nem szeretné mind a 12 oszlopot külön-külön használni, csoportosíthatja az oszlopokat szélesebb oszlopok létrehozásához:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
A rácsrendszer érzékeny, és az oszlopok a képernyő méretétől függően automatikusan átrendeződnek.
Ügyeljen arra, hogy az összeg 12 vagy kevesebb legyen (nem szükséges, hogy Ön használja mind a 12 elérhető oszlopot).
A Bootstrap 5 grid rendszer hat osztályból áll:
.col- (extra kis eszközök - a képernyő szélessége kevesebb, mint 576 képpont)
.col-sm- (kis eszközök - képernyő szélessége 576 képpont vagy nagyobb)
.col-md- (közepes eszközök - képernyő szélessége 768 képpont vagy nagyobb)
.col-lg- (nagy eszközök - a képernyő szélessége 992 képpont vagy nagyobb)
.col-xl- (xnagy eszközök - képernyő szélessége 1200 képpont vagy nagyobb)
.col-xxl- (xxnagy eszközök - képernyő szélessége 1400 képpont vagy nagyobb)
A fenti osztályok kombinálhatók dinamikusabb és rugalmasabb elrendezések létrehozásához.
Tipp: Minden osztály skálázódik, így ha ugyanazt a szélességet szeretné beállítani sm és md, csak az sm értéket kell megadnia kód>.
A következő egy Bootstrap 5 rács alapstruktúrája:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Első példa: hozzon létre egy sort:
<div class="row">Ezután adja hozzá a kívánt számú oszlopot (a megfelelő .col-*-* osztályú címkéket). Az első csillag (*) a válaszkészséget jelöli: sm, md, lg, xl vagy xxl, míg a második csillag egy számot jelöl, amely soronként 12-t jelent.
Második példa: ahelyett, hogy minden egyes colhoz egy számot adna, hagyja, hogy a bootstrap kezelje az elrendezést, hogy egyenlő szélességű oszlopokat hozzon létre: két " col" elemek=50% szélesség minden oszlophoz, míg három oszlop=33,33% szélesség minden oszlophoz. Négy oszlop=25% szélesség stb. A .col-sm|md|lg|xl|xxl használatával is alkalmazhatja az oszlopokat.
Az alábbiakban összegyűjtöttünk néhány példát a Bootstrap 5 alapvető rácselrendezéseire.
A következő példa bemutatja, hogyan hozhat létre három egyenlő szélességű oszlopot eszközök és képernyőszélességek:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Próbálja ki Ön is →
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
A következő példa bemutatja, hogyan lehet négy egyenlő szélességű oszlopot létrehozni, a táblagépektől kezdve a méretezésig extra nagy asztali számítógépek. Az 576 képpontnál kisebb szélességű mobiltelefonokon vagy képernyőkön az oszlopok automatikusan egymásra halmozódnak egymás tetején:
<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>Próbálja ki Ön is →
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
A következő példa bemutatja, hogyan lehet két különböző szélességű oszlopot előállítani táblagépek és méretezés nagy extra asztali számítógépekre:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Próbálja ki Ön is →
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
Tipp: Ebben az oktatóanyagban később többet is megtudhat a rácsrendszerről.