Bootstrap Düzen Oluklar

Bootstrap'te düzen olukları (gutter), grid sistemindeki sütunlar arasındaki boşluğu veya aralığı ifade eder. Bu oluklar, içeriğin daha düzenli görünmesini sağlamak için kullanılır ve responsive tasarımda önemli bir rol oynar. Bootstrap, hem satırların hem de sütunların arasındaki bu boşluğu otomatik olarak yönetir.

1. Olukların Temel Yapısı

Oluklar, grid sistemindeki sütunlar arasında varsayılan bir boşluk sağlar. Bu boşluk, içeriğin birbirine yakın görünmemesini ve daha temiz bir düzen elde etmenizi sağlar. Olukların genişliği, Bootstrap'ın varsayılan stil ayarlarına göre belirlenir.

2. Varsayılan Oluk Genişliği

Bootstrap 4 ve 5 sürümlerinde, varsayılan oluk genişliği genellikle 30 piksel (15 piksel sol ve 15 piksel sağ) olarak ayarlanmıştır. Bu değer, tasarımın özelleştirilmesine izin vermek için CSS ile değiştirilmesi mümkündür.

3. Olukları Yönetme

Bootstrap, olukları yönetmek için bazı sınıflar sunar:

• Olukları Kaldırma: Eğer sütunlar arasındaki boşluğu kaldırmak isterseniz, .g-0 sınıfını kullanabilirsiniz.

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

• Özel Oluk Genişlikleri: Oluk genişliklerini ayarlamak için .g-* sınıflarını kullanabilirsiniz. * kısmında 0'dan 5'e kadar değerler kullanabilirsiniz. Örneğin:

  • .g-1: 0.25 rem (4 piksel)
  • .g-2: 0.5 rem (8 piksel)
  • .g-3: 1 rem (16 piksel)
  • .g-4: 1.5 rem (24 piksel)
  • .g-5: 3 rem (48 piksel)

  Örnek kullanım:

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

4. Responsive Oluklar

Bootstrap, responsive tasarımlar için olukları ekran boyutlarına göre özelleştirmenize olanak tanır. Belirli ekran boyutları için farklı oluk değerleri belirlemek için g-{breakpoint}-{value} formatını kullanabilirsiniz. Örneğin:

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

Bu örnekte:

• Küçük ekranlarda (sm) 2 birim boşluk,
• Orta ekranlarda (md) 3 birim boşluk,
• Büyük ekranlarda (lg) 4 birim boşluk sağlanır.

5. Kullanım Örnekleri

Bootstrap'ın olukları, grid düzenini temiz ve düzenli tutmak için idealdir. Kullanıcı arayüzlerinde daha estetik bir görünüm elde etmenizi sağlar. Aşağıdaki örnek, farklı sütun genişlikleri ve oluk sınıfları kullanarak oluşturulmuş bir yapı sunmaktadır:

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

Sonuç

Bootstrap'ın düzen olukları, responsive tasarımlarda önemli bir rol oynar. Sütunlar arasındaki boşluğu yönetmek, içeriğinizi düzenli ve estetik bir şekilde sunmanıza yardımcı olur. Oluk sınıflarını kullanarak, tasarımınıza esneklik ve profesyonellik katabilirsiniz.