Bootstraps rutsystem är byggt med flexbox och tillåter upp till 12 kolumner över sidan.
Om du inte vill använda alla 12 kolumner individuellt kan du gruppera kolumnerna för att skapa bredare kolumner:
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 |
Rutnätssystemet är lyhört och kolumnerna kommer att omarrangeras automatiskt beroende på skärmstorleken.
Se till att summan blir 12 eller färre (det krävs inte att du använd alla 12 tillgängliga kolumner).
Bootstrap 5-rutnätssystemet har sex klasser:
.col-
(extra små enheter - skärmbredd mindre än 576px)
.col-sm-
(små enheter - skärmbredd lika med eller större än 576px)
.col-md-
(medelstora enheter - skärmbredd lika med eller större än 768px)
.col-lg-
(stora enheter - skärmbredd lika med eller större än 992px)
.col-xl-
(xlarge enheter - skärmbredd lika med eller större än 1200px)
.col-xxl-
(xxlarge enheter - skärmbredd lika med eller större än 1400px)
Klasserna ovan kan kombineras för att skapa mer dynamiska och flexibla layouter.
Tips: Varje klass skalas upp, så om du vill ställa in samma bredder för sm
och md
, du behöver bara ange sm
kod>.
Följande är en grundläggande struktur för ett Bootstrap 5-rutnät:
<!-- 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>
Första exemplet: skapa en rad:
<div class="row">
Lägg sedan till önskat antal kolumner (taggar med lämpliga .col-*-*
-klasser). Den första stjärnan (*) representerar lyhördheten: sm, md, lg, xl eller xxl, medan den andra stjärnan representerar ett tal, som ska läggas till 12 för varje rad.
Andra exemplet: istället för att lägga till ett nummer till varje col
, låt bootstrap hantera layouten för att skapa lika breda kolumner: två " col"
element=50 % bredd för varje kolumn, medan tre kolumner=33,33 % bredd för varje kol. Fyra kolumner=25 % bredd, etc. Du kan också använda .col-sm|md|lg|xl|xxl
för att göra kolumnerna responsiva.
Nedan har vi samlat några exempel på grundläggande Bootstrap 5-rutnätslayouter.
Följande exempel visar hur man skapar tre lika breda kolumner, på alla enheter och skärmbredder:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Prova själv →
<!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>
Följande exempel visar hur du skapar fyra lika breda kolumner som börjar på surfplattor och skalar till extra stora stationära datorer. På mobiltelefoner eller skärmar som är mindre än 576px breda staplas kolumnerna automatiskt ovanpå varandra:
<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>
Prova själv →
<!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>
Följande exempel visar hur man får två kolumner med olika bredd som börjar kl surfplattor och skalning till stora extra stationära datorer:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Prova själv →
<!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>
Tips: Du kommer att lära dig mer om rutnätssystemet senare i den här självstudien.