Bootstrap 5 Işıklandırma

Bootstrap 5 İzleme Ağı

Bootstrap ağ sistemi flexbox ile inşa edilmiştir, sayfada en fazla 12 sütun izin verilir.

Eğer tüm 12 sütunu ayrı ayrı kullanmak istemiyorsanız, bu sütunları birleştirerek daha geniş sütunlar oluşturabilirsiniz:

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ğ sistemi hızlı yanıt verir, sütunlar ekran boyutuna göre otomatik olarak yeniden dizilir.

Toplamın 12'ye veya daha az olmasına dikkat edin (tüm 12 mevcut sütunları kullanmamak gerekirse).

Ağ sınıfları

Bootstrap 5 ağ sistemi altı sınıfa sahiptir:

  • .col- (olumsuz 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 boyutlu 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)

Daha dinamik ve esnek bir düzen oluşturmak istiyorsanız, yukarıdaki sınıfları birleştirebilirsiniz.

İpucu:Her sınıf oransal olarak genişletilir, bu yüzden eğer sm ve md Aynı genişliği ayarlamak için yalnızca belirtmeniz gerekecek sm。

Bootstrap 5 ağ yapısının temel yapısı

Aşağıda Bootstrap 5 ağ yapısının temel yapısı verilmiştir:

Sütun genişliğini ve farklı cihazlardaki görünümlerini kontrol edin.
<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>
Bootstrap'un otomatik olarak düzenlemesini yapmasını sağlayın.
<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">). Gerekli sayıda sütun ekleyin (uygun .col-*-* etiketine verin). İlk yıldız (*) yanıtlayıcılığı temsil eder: sm, md, lg, xl veya xxl, ikinci yıldız ise rakamı temsil eder ve her satırda 12 toplamına ulaşmalıdır.

İkinci örnek: Her birine değil col Bir numara eklemek yerine, Bootstrap'un düzenlemesini işleyerek eş genişlikli sütunlar oluşturun: iki "col" Element = Her col 50% genişliğe sahipken, üç col = her col 33.33% genişliğe sahiptir. Dört sütun = 25% genişlik, vb. Ayrıca, Bootstrap'u düzenlemek için bir numara ekleyebilir ve her satırda 12 toplamına ulaşabilirsiniz. .col-sm|md|lg|xl|xxl Sütunların yanıtlayıcılığını sağlayın.

Aşağıda, temel Bootstrap 5 ağ düzeni örneklerini topladık.

Üç Bölümlü Sütunlar

Aşağıdaki örnek, tüm cihazlarda ve ekran genişliklerinde üç eş genişlikteki sütun nasıl oluşturulacağını gösterir:

Örnek

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Kişisel olarak deneyin

Yanıtlayıcı Sütunlar

Aşağıdaki örnek, tabletten başlayarak dört eş genişlikteki sütunları nasıl oluşturacağınızı ve büyük masaüstü ekranlara nasıl genişleyeceğinizi gösterir.Genişliği 576px'dan küçük olan telefon veya ekranlarda, sütunlar otomatik olarak bir araya gelir:

Örnek

<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>

Kişisel olarak deneyin

İki Farklı Genişlikteki Yanıtlayıcı Sütunlar

Aşağıdaki örnek, tablette iki farklı genişlikteki sütunları nasıl elde edeceğinizi ve büyük masaüstü ekranlara nasıl genişleyeceğini gösterir:

Örnek

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Kişisel olarak deneyin

İpucu:Bu dersin sonunda, ilgili konuları öğreneceksiniz Ağ Sistemi Daha Fazla İçerik.