Bootstrap Bileşenler Helpers

Bootstrap'in bileşen yardımcıları (helpers), kullanıcıların bileşenlerin görünümünü ve davranışını kolayca değiştirebilmelerini sağlayan CSS sınıflarıdır. Bu sınıflar, belirli stilleri, hizalamaları, ekran boyutlarına göre düzenlemeleri ve diğer yaygın CSS işlemlerini hızlı bir şekilde uygulamaya yarar. İşte bazı yaygın Bootstrap bileşen yardımcıları:

1. Display Helpers

• Ekran boyutlarına göre görünürlük ve gizlenme işlemlerini yönetmek için kullanılır. Örneğin:
  • .d-none: Bileşeni tamamen gizler.
  • .d-block: Bileşeni blok düzeyinde görüntüler.
  • .d-md-none: Orta boyutlu ekranlarda gizler.
  • .d-lg-block: Büyük ekranlarda blok olarak gösterir.

2. Spacing Helpers

• Kenar boşluklarını (margin) ve dolgu alanlarını (padding) yönetmek için kullanılır. Spacing yardımcıları dört yönlü çalışır: t (üst), b (alt), s (sol), e (sağ).
• Örneğin:
  • .m-3: Her yöne 3 birim margin ekler.
  • .pt-2: Üste 2 birim padding ekler.
  • .mx-auto: Yatayda otomatik margin sağlar (merkezleme için kullanılır).

3. Text Helpers

• Metin biçimlendirmesi ve hizalamalarını yönetmek için kullanılır.
• Örnekler:
  • .text-center: Metni ortalar.
  • .text-uppercase: Metni büyük harfe dönüştürür.
  • .text-muted: Metni soluk gösterir.

4. Background Helpers

• Arka plan renklerini değiştirmek için kullanılır.
• Örneğin:
  • .bg-primary: Birincil renk temasını uygular.
  • .bg-light: Açık renk arka plan ekler.

5. Flex Helpers

• Esnek kutu düzeni ile ilgili hizalama ve düzenleme işlemlerini kolayca yapmayı sağlar.
• Örnekler:
  • .d-flex: Elemanı esnek kutu düzeyine getirir.
  • .justify-content-center: İçeriği yatayda ortalar.
  • .align-items-start: Elemanları dikeyde üstte hizalar.

6. Position Helpers

• Konumlandırmayı yönetmek için kullanılan sınıflardır.
• Örneğin:
  • .position-relative: Nispi konumlandırma sağlar.
  • .top-0: Üst kenarı başlangıç noktasına taşır.
  • .start-50: Sol kenarı %50’ye taşır.

7. Visibility Helpers

• Elemanların görünürlüğünü ayarlamak için kullanılır.
• .visible ve .invisible sınıfları ile elemanlar gösterilip gizlenebilir.

Bu yardımcı sınıflar sayesinde, CSS kodu yazmaya gerek kalmadan hızlıca ve pratik bir şekilde sayfa tasarımı yapabilirsiniz.