Mřížkový systém Bootstrapu je postaven na flexboxu a umožňuje až 12 sloupců přes stránku.
Pokud nechcete používat všech 12 sloupců jednotlivě, můžete je seskupit a vytvořit širší sloupce:
| 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 | |||||||||||
Systém mřížky reaguje a sloupce se automaticky přeuspořádají v závislosti na velikosti obrazovky.
Ujistěte se, že součet je 12 nebo méně (není nutné, abyste použijte všech 12 dostupných sloupců).
Mřížkový systém Bootstrap 5 má šest tříd:
.col- (extra malá zařízení - šířka obrazovky menší než 576 pixelů)
.col-sm- (malá zařízení - šířka obrazovky 576 pixelů nebo větší)
.col-md- (střední zařízení - šířka obrazovky rovna nebo větší než 768 pixelů)
.col-lg- (velká zařízení - šířka obrazovky 992 pixelů nebo větší)
.col-xl- (xlarge zařízení - šířka obrazovky rovna nebo větší než 1200 pixelů)
.col-xxl- (xxlarge zařízení - šířka obrazovky rovna nebo větší než 1400 pixelů)
Výše uvedené třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Tip: Každá třída se zvětší, pokud tedy chcete nastavit stejné šířky sm a md, stačí zadat pouze sm.
Níže je uvedena základní struktura mřížky Bootstrap 5:
<!-- 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>První příklad: vytvořte řádek:
<div class="row">Poté přidejte požadovaný počet sloupců (značky s příslušnými třídami .col-*-*). První hvězdička (*) představuje odezvu: sm, md, lg, xl nebo xxl, zatímco druhá hvězdička představuje číslo, jehož součet by měl být 12 pro každý řádek.
Druhý příklad: místo přidávání čísla do každého sloupce nechte rozvržení zvládnout bootstrap, aby vytvořil sloupce stejné šířky: dva " col" prvky=50 % šířka na každý sloupec, zatímco tři sloupce=33,33 % šířka na každý sloupec. Čtyři sloupce=25 % šířka atd. Můžete také použít .col-sm|md|lg|xl|xxl, aby byly sloupce responzivní.
Níže jsme shromáždili několik příkladů základních rozložení mřížky Bootstrap 5.
Následující příklad ukazuje, jak vytvořit tři sloupce stejné šířky zařízení a šířky obrazovky:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Zkuste to sami →
<!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>
Následující příklad ukazuje, jak vytvořit čtyři sloupce o stejné šířce počínaje tabletami a škálovat na extra velké pracovní plochy. Na mobilních telefonech nebo obrazovkách o šířce menší než 576 pixelů se sloupce automaticky skládají nad sebou:
<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>Zkuste to sami →
<!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>
Následující příklad ukazuje, jak získat dva sloupce různé šířky začínající na tablety a škálování na velké extra plochy:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Zkuste to sami →
<!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>
Tip: Více o systému mřížky se dozvíte později v tomto tutoriálu.