Selam dostum! Bugün seninle Bootstrap Grid'in ne olduğunu, nasıl kullanılacağını adım adım öğreneceğiz. Endişelenme, kodlama deneyimin olmasa bile seni baştan sona götüreceğim. Hazırsan, hemen başlayalım!
Adım 1: Bootstrap Kütüphanesini Projene Ekle
İlk olarak, projenin <head> etiketi arasına Bootstrap CSS dosyasını eklememiz gerekiyor. Bunun için aşağıdaki kodu kullanabilirsin.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Adım 2: Grid Sistemi Nedir?
Bootstrap Grid, web sayfalarını düzenlemenin kolay bir yoludur. Sayfayı sütunlara böler ve bu sütunlar üzerinde içeriği yerleştirmene izin verir. Her satır 12 sütundan oluşur ve içeriği bu sütunlara dağıtabilirsin.
Adım 3: Satır (Row) Oluşturma
İçeriği düzenlemek için önce bir satır oluşturmamız gerekiyor. Bir satır, içerisinde sütunlar barındırabilir. Bunu yapmak için aşağıdaki kodu kullan.
<div class="row">
<!-- Sütunları buraya ekle -->
</div>
Adım 4: Sütun (Column) Oluşturma
Şimdi sıra sütunları eklemekte. Bir satırın içine sütunlar ekleyerek içeriği düzenleyebiliriz. Her sütunun toplam 12 birimlik bir genişliği var. Örneğin, bir sütunu tam genişlikte (12 birim) kullanmak istiyorsan, aşağıdaki gibi yapabilirsin.
<div class="row">
<div class="col">
İçerik buraya gelecek
</div>
</div>
Adım 5: Sütunların Genişliğini Ayarlama
Sütunların genişliğini belirlemek için col sınıfının yanına -sm, -md, -lg gibi ekler ekleyebilirsin. Örneğin, bir sütunu orta boyutta (md) 6 birim genişliğinde kullanmak istiyorsan, şöyle yapabilirsin.
<div class="row">
<div class="col-md-6">
İçerik buraya gelecek
</div>
</div>
Adım 6: Daha Fazla Sütun Ekleme
İhtiyacına göre daha fazla sütun ekleyebilirsin. Örneğin, 2 sütunu yan yana göstermek istiyorsan, her birini col-md-6 olarak ayarlayabilirsin.
<div class="row">
<div class="col-md-6">
Birinci sütun içeriği
</div>
<div class="col-md-6">
İkinci sütun içeriği
</div>
</div>
Adım 7: Responsive Tasarım
Bootstrap Grid, responsive tasarımı destekler. Yani, sayfayı farklı cihazlara göre uyumlu hale getirebilirsin. Örneğin, küçük ekranlarda sütunları yatay düzende göstermek istiyorsan, col-xs- sınıfını kullanabilirsin.
<div class="row">
<div class="col-xs-6 col-md-4">
İçerik buraya gelecek
</div>
<div class="col-xs-6 col-md-4">
İçerik buraya gelecek
</div>
<div class="col-xs-6 col-md-4">
İçerik buraya gelecek
</div>
</div>
İşte bu kadar! Artık Bootstrap Grid'i kullanarak web sayfalarını düzenleyebilirsin. Unutma, pratik yapmak önemlidir. Kendi projelerinde deneyerek daha fazla öğrenebilirsin.Birimleri kullanmayı unutma Bol şans!
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
