Bootstrap Grid Sistemi

Bootstrap grid sistemi, web sayfalarında içeriklerin düzenlenmesi ve düzenli bir şekilde hizalanması için kullanılan duyarlı (responsive) bir tasarım sistemidir. Bu sistem, satırlar (rows) ve sütunlar (columns) üzerinden çalışır ve ekran boyutuna göre düzenlenebilir bir yapı sunar.

Grid Sisteminin Temel Özellikleri

1. 12 Kolonluk Düzen: Bootstrap grid sistemi, her satırı 12 eşit sütuna böler. İçerikler bu sütunlar arasında esnek bir şekilde dağıtılır.
2. Duyarlılık (Responsive): Ekran boyutlarına göre sütun genişlikleri dinamik olarak ayarlanır.
3. Breakpoints (Kırılma Noktaları): Grid düzeni, farklı cihaz boyutlarında farklı tasarımlar oluşturmak için kullanılır.
   • sm (≥576px)
   • md (≥768px)
   • lg (≥992px)
   • xl (≥1200px)
   • xxl (≥1400px)

Grid Sistemi Yapısı

Grid sistemi container, row, ve column yapı taşlarından oluşur.

Temel Kullanım

<div class="container">
  <div class="row">
    <div class="col">Sütun 1</div>
    <div class="col">Sütun 2</div>
    <div class="col">Sütun 3</div>
  </div>
</div>

Açıklama:

• .container: Grid sistemini kapsayan alan.
• .row: Sütunların yerleştirildiği satır.
• .col: Sütunları temsil eden yapı. Varsayılan olarak eşit genişlikte sütunlar oluşturur.

Grid Sistemiyle Kırılma Noktaları

Kırılma noktaları, farklı ekran boyutlarına göre düzen oluşturmayı sağlar.

Örnek:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Sütun 1</div>
    <div class="col-sm-6 col-md-4">Sütun 2</div>
    <div class="col-md-4">Sütun 3</div>
  </div>
</div>

Açıklama:

• col-sm-6: Küçük ekranlarda sütun genişliğini 6 birim (yarım ekran) yapar.
• col-md-4: Orta ekranlarda sütun genişliğini 4 birim yapar.

Grid Sisteminde Sütun Genişlikleri

Her satır toplamda 12 birime bölünür. Sütunlar, bu birimlere göre ayarlanır.

Örnek:

<div class="container">
  <div class="row">
    <div class="col-4">4 Birim</div>
    <div class="col-8">8 Birim</div>
  </div>
</div>

Açıklama:

• col-4: Sütun genişliği 12 birimden 4’ünü kaplar.
• col-8: Sütun genişliği 12 birimden 8’ini kaplar.

Boşluklar (Gutters)

Bootstrap grid sistemi, sütunlar arasına otomatik olarak boşluk (gutter) ekler. Boşluklar aşağıdaki şekilde özelleştirilebilir:

Örnek:

<div class="container">
  <div class="row g-3">
    <div class="col">Sütun 1</div>
    <div class="col">Sütun 2</div>
  </div>
</div>

Açıklama:

• g-3: Sütunlar arasındaki boşluğu ayarlar (3 birim).

Grid Sistemiyle Hizalama

Grid sisteminde içerik hizalama aşağıdaki şekilde yapılabilir:

Dikey Hizalama (Align Items)

<div class="container">
  <div class="row align-items-center">
    <div class="col">Sütun 1</div>
    <div class="col">Sütun 2</div>
  </div>
</div>

• align-items-center: İçeriği dikeyde ortalar.

Yatay Hizalama (Justify Content)

<div class="container">
  <div class="row justify-content-between">
    <div class="col-4">Sütun 1</div>
    <div class="col-4">Sütun 2</div>
  </div>
</div>

• justify-content-between: Sütunlar arasına boşluk ekler.

Nested Grid (İç İçe Grid)

Grid sistemi içerisinde başka bir grid sistemi kullanabilirsiniz.

Örnek:

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6">İç Sütun 1</div>
        <div class="col-6">İç Sütun 2</div>
      </div>
    </div>
    <div class="col-6">Dış Sütun 2</div>
  </div>
</div>

Grid Sisteminin Avantajları

1. Esneklik: Farklı ekran boyutlarına göre dinamik düzen oluşturur.
2. Kolay Kullanım: Önceden tanımlı sınıflar sayesinde hızlıca düzen oluşturulabilir.
3. Hizalama Seçenekleri: İçeriklerin düzgün hizalanması sağlanır.

Grid Sistemi Özet Tablosu