Bootstrap Kutucuk Ekleme: Kapsamlı Bir Kılavuz
Bootstrap, web geliştirmeyi kolaylaştıran popüler bir CSS çerçevesidir. Kutucuk ekleme, Bootstrap’in en temel özelliklerinden biridir ve web sayfalarınıza yapı ve stil kazandırmak için kullanılabilir. Bu kapsamlı kılavuz, Bootstrap’te kutucuk eklemeyi adım adım açıklayacak ve konuyla ilgili faydalı kaynaklar sağlayacaktır.
Kutucuk Oluşturma
Bootstrap’te bir kutucuk oluşturmak için .container sınıfını kullanın. Bu sınıf, sayfanın genişliğini sınırlar ve içeriğin ortalanmasına yardımcı olur.
“`html
“`
Kutucuk Boyutları
Bootstrap, önceden tanımlanmış bir dizi kutucuk boyutuna sahiptir. Bu boyutlar, sayfanın genişliğinin yüzdesi olarak belirtilir. En yaygın kullanılan boyutlar şunlardır:
.container: Sayfanın genişliğinin %100’ü.container-fluid: Sayfanın genişliğinin %100’ü, kenar boşluğu yok.container-sm: Sayfanın genişliğinin %540’ı.container-md: Sayfanın genişliğinin %720’si.container-lg: Sayfanın genişliğinin %960’ı.container-xl: Sayfanın genişliğinin %1140’ı.container-xxl: Sayfanın genişliğinin %1320’si
Kutucuk boyutunu belirtmek için ilgili sınıfı .container sınıfına ekleyin. Örneğin, orta boy bir kutucuk oluşturmak için aşağıdaki kodu kullanın:
“`html
“`
Kutucuk Kenar Boşluğu
Bootstrap, kutucukların etrafına otomatik olarak kenar boşluğu ekler. Kenar boşluğu miktarı, kutucuk boyutuna bağlıdır. Kenar boşluğunu kaldırmak için .container-fluid sınıfını kullanın.
“`html
“`
Kutucuk İçeriği
Kutucuklar, başlıklar, paragraflar, resimler ve diğer HTML öğelerini içerebilir. İçeriği kutucuğa eklemek için öğeleri .container sınıfının içine yerleştirin.
“`html
Başlık
Paragraf
“`
Kutucuk Hizalama
Bootstrap, kutucukların yatay ve dikey olarak hizalanmasına olanak tanır. Yatay hizalama için .text-left, .text-center veya .text-right sınıflarını kullanın. Dikey hizalama için .align-top, .align-middle veya .align-bottom sınıflarını kullanın.
“`html
“`
Faydalı Kaynaklar
Sonuç
Bootstrap kutucuk ekleme, web sayfalarınıza yapı ve stil kazandırmak için güçlü bir araçtır. Bu kılavuzda açıklanan adımları izleyerek, farklı boyutlarda, kenar boşluklarında ve hizalamalarda kutucuklar oluşturabilirsiniz. Bootstrap’in sunduğu faydalı kaynakları kullanarak, web geliştirme sürecinizi daha da kolaylaştırabilirsiniz.