Bootstrap'in ızgara sistemi flexbox ile oluşturulmuştur ve sayfada 12'ye kadar sütuna izin verir.
12 sütunun tamamını ayrı ayrı kullanmak istemiyorsanız, daha geniş sütunlar oluşturmak için sütunları gruplandırabilirsiniz:
| 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 | |||||||||||
Izgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenecektir.
Toplamın toplamının 12 veya daha az olduğundan emin olun (sizin mevcut 12 sütunun tümünü kullanın).
Bootstrap 5 ızgara sisteminin altı sınıfı vardır:
.col- (ekstra küçük cihazlar - ekran genişliği 576 pikselden az)
.col-sm- (küçük cihazlar - ekran genişliği 576 piksele eşit veya daha büyük)
.col-md- (orta boy cihazlar - ekran genişliği 768 piksele eşit veya daha büyük)
.col-lg- (büyük cihazlar - ekran genişliği 992 piksele eşit veya daha büyük)
.col-xl- (xlarge cihazlar - ekran genişliği 1200 piksele eşit veya daha büyük)
.col-xxl- (xxlarge cihazlar - ekran genişliği 1400 piksele eşit veya daha büyük)
Yukarıdaki sınıflar daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.
İpucu: Her sınıfın ölçeği artar; dolayısıyla aynı genişlikleri ayarlamak isterseniz sm ve md, yalnızca sm belirtmeniz gerekir kodu >.
Bootstrap 5 ızgarasının temel yapısı aşağıdadır:
<!-- 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>İlk örnek: bir satır oluşturun:
<div class="row">Ardından istediğiniz sayıda sütunu ekleyin (uygun .col-*-* sınıflarına sahip etiketler). İlk yıldız (*) yanıt verebilirliği temsil eder: sm, md, lg, xl veya xxl, ikinci yıldız ise her satır için toplamı 12'ye ulaşması gereken bir sayıyı temsil eder.
İkinci örnek: her sütun'a bir sayı eklemek yerine, eşit genişlikte sütunlar oluşturmak için önyüklemenin düzeni yönetmesine izin verin: iki " sütun" öğeleri=her sütun için %50 genişlik, üç sütun=her sütun için %33,33 genişlik. Dört sütun=%25 genişlik vb. Sütunları duyarlı hale getirmek için .col-sm|md|lg|xl|xxl komutunu da kullanabilirsiniz.
Aşağıda temel Bootstrap 5 ızgara düzeninin bazı örneklerini topladık.
Aşağıdaki örnek, her birinde eşit genişlikte üç sütunun nasıl oluşturulacağını gösterir. cihazlar ve ekran genişlikleri:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Kendiniz Deneyin →
<!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şağıdaki örnek, tabletlerden başlayıp tabletlere kadar ölçeklenen dört eşit genişlikte sütunun nasıl oluşturulacağını gösterir. ekstra büyük masaüstü bilgisayarlar. 576 pikselden daha az genişliğe sahip cep telefonlarında veya ekranlarda sütunlar otomatik olarak yığılır üst üste:
<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>Kendiniz Deneyin →
<!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şağıdaki örnekte, şuradan başlayarak farklı genişlikte iki sütunun nasıl elde edileceği gösterilmektedir: tabletler ve büyük ekstra masaüstü bilgisayarlara ölçeklendirme:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Kendiniz Deneyin →
<!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>
İpucu: Bu eğitimin ilerleyen kısımlarında ızgara sistemi hakkında daha fazla bilgi edineceksiniz.