Bootstrap 5 İzleme Ağı Örnekleri
- Önceki sayfa BS5 ağ XXL
- Sonraki sayfa BS5 temel şablonu
Aşağıda Bootstrap 5 grid düzeni örneklerini topladık.
Üç eşit bölüşüm sütunu
Belirtilen element sayısında .col Bootstrap, ne kadar element olduğunu tespit eder (ve eşit genişlikli sütunlar oluşturur). Aşağıdaki örnekte, her birinin genişliği %33.33 olan üç col elementi kullandık.
Örnek
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Rakamlarla kullanılan üç eşit sütun
Sütun genişliğini kontrol etmek için rakamları kullanabilirsiniz. Sadece toplam 12'ye veya daha az olmalıdır (tüm 12 mevcut sütun kullanılmaz):
Örnek
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Üç farklı bölüşüm sütunu
Farklı sütunlar oluşturmak için rakamları kullanmanız gerekmektedir. Aşağıdaki örnek, 25%/50%/25% bölüşümü oluşturacaktır:
Örnek
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Bir sütun genişliğini ayarlamak
Ancak, sadece bir sütunun genişliğini ayarlamak yeterlidir ve kardeş sütunların etrafındaki boyutları otomatik olarak ayarlamaları sağlanır. Aşağıdaki örnek, 25%/50%/25% bölüşümü oluşturacaktır:
Örnek
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Daha fazla eşit sütun
Örnek
<!-- iki eşit sütun --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- dört eşit sütun --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- altı eşit sütun --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Ayrıca .row-cols-* Sınıf kontrolü, birbirlerinin yanındaki sütun sayısında (kaç sütun olursa olsun) olmalıdır:
Örnek
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Daha fazla farklı sütun
Örnek
<!-- iki farklı sütun --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Two column widths setting --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Aynı yükseklik
Bir sütun diğerinden daha yüksekse (metin veya CSS yüksekliği nedeniyle), geri kalanı onu takip eder:
Örnek
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Dahili sütunlar
Aşağıdaki örnek, bir sütunda diğer iki sütun içeren iki sütun düzeninin nasıl oluşturulduğunu gösterir:
Örnek
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Yanıt sınıfları
Bootstrap 5 grid sistemi beş sınıfa sahiptir:
.col-(Çok küçük cihaz - ekran genişliği 576px'dan küçük).col-sm-(Küçük cihaz - ekran genişliği 576px veya daha büyük).col-md-(Orta cihaz - ekran genişliği 768 piksel veya daha büyük).col-lg-(Büyük cihaz - ekran genişliği 992 piksel veya daha büyük).col-xl-(xlarge cihaz - ekran genişliği 1200px veya daha büyük).col-xxl-(xxlarge cihaz - ekran genişliği 1400px veya daha büyük)
Yukarıdaki sınıfları birleştirerek daha dinamik ve esnek düzenler oluşturabilirsiniz.
İpucu:Her sınıf oransal olarak büyütülür, bu yüzden eğer sm ve md Aynı genişliği ayarlamak istiyorsanız, sadece sm.
Katmanlıdan yatay
Aşağıdaki örnek, sütun düzeninin nasıl oluşturulduğunu gösterir, düzen küçük cihazlarda katmanlı başlar, ardından büyük cihazlarda (sm, md, lg ve xl) yatay düzen haline gelir:
Örnek
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Karıştır ve eşle
Örnek
<!-- Çok küçük cihazlarda 50%/50% bölme, büyük cihazlarda 75%/25% bölme --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Çok küçük, küçük, orta cihazlarda 58%/42% bölme, büyük ve çok büyük cihazlarda 66.3%/33.3% bölme --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Küçük cihazlarda 25%/75% bölme, orta cihazlarda 50%/50% bölme, büyük ve çok büyük cihazlarda 33%/66% bölme. Çok küçük cihazlarda otomatik olarak yığınır (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
gutter olmayan
Sütunlar arasındaki boşluğu (ekstra alan) değiştirmek için .g-1|2|3|4|5 sınıf (.g-4 öntanımlı değerdir).
Tamamen demir parçacıklarını (gutter) silmek için .g-0：
Örnek
<div class="row g-0">
- Önceki sayfa BS5 ağ XXL
- Sonraki sayfa BS5 temel şablonu
