Bootstrap'ın layout grid sistemi, içeriklerinizi düzenlemenin ve hizalamanın esnek bir yolunu sunar. Bu sistem, sayfanızda sütunlar ve satırlar oluşturarak responsive (duyarlı) tasarımlar oluşturmanıza olanak tanır. Bootstrap, 12 sütunlu bir grid yapısına sahiptir, bu da içeriğinizi 12 birimlik genişlikte bölümlere ayırabileceğiniz anlamına gelir.
1. Temel Yapı
Bootstrap grid sistemi, genellikle şu yapı ile oluşturulur:
-
Konteyner: İçeriklerinizi tutar. Sabit (
.container) veya esnek (.container-fluid) olabilir. - Satırlar (Row): İçindeki sütunları barındırır. Her satır, sütunları hizalamak için kullanılır.
- Sütunlar (Column): İçerikleri barındırır ve grid sisteminin ana bileşenleridir.
2. Konteyner ve Satır Oluşturma
Örnek bir yapı aşağıdaki gibidir:
<div class="container">
<div class="row">
<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>
Bu örnekte:
- .container: Tüm içeriği merkezde tutar.
- .row: Üç sütunu aynı hizada yerleştirir.
- .col-md-4: Her sütun, ekran boyutu md (768px ve üzeri) olduğunda, genişliğin üçte birini kaplar (12 birimlik grid sistemine göre).
3. Sütun Genişlikleri
Sütunların genişliğini ayarlamak için Bootstrap, farklı ekran boyutları için çeşitli sınıflar sunar:
-
.col-xs-*(0px ve üzeri) -
.col-sm-*(576px ve üzeri) -
.col-md-*(768px ve üzeri) -
.col-lg-*(992px ve üzeri) -
.col-xl-*(1200px ve üzeri)
Her sütun için 1'den 12'ye kadar bir sayı seçebilirsiniz. Örneğin:
<div class="row">
<div class="col-md-6 col-lg-4">Sütun 1</div>
<div class="col-md-6 col-lg-4">Sütun 2</div>
<div class="col-lg-4">Sütun 3</div>
</div>
Bu örnekte:
- Ekran boyutu md ve üzeri olduğunda, ilk iki sütun her biri yarı genişlikte olur (6 birim).
- Ekran boyutu lg ve üzeri olduğunda, ilk iki sütun üçte bir genişlikte olur (4 birim), üçüncü sütun ise yine üçte bir genişlikte olur.
4. Sütun Sıralama ve Dengeleme
Bootstrap, sütunların sıralanmasını değiştirmek veya dengelemek için sınıflar da sunar. Örneğin, .order-* sınıfları ile sütunların sırasını değiştirebilirsiniz.
5. Sütun Offset ve Eşit Genişlik
Sütunları hizalamak için offset sınıflarını kullanabilirsiniz:
<div class="row">
<div class="col-md-4 offset-md-2">Sütun 1</div>
<div class="col-md-4">Sütun 2</div>
</div>
Bu örnekte, ilk sütun 2 birimlik bir boşluktan sonra başlar.
Sonuç
Bootstrap'ın layout grid sistemi, responsive tasarım oluşturmayı kolaylaştırır. Sütunlar ve satırlar kullanarak, içeriklerinizi etkili bir şekilde düzenleyebilir ve farklı ekran boyutlarına uyum sağlayabilirsiniz. Bu, web sitenizin kullanıcı deneyimini artırır ve daha profesyonel bir görünüm kazandırır.