Bootstrap etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Bootstrap etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Bootstrap Izgara Sistemi

2 yorum:
Bootstrap logo
Bootstrap bir Css Framework'tür. En çok tercih edilmesinin sebebi kolaylıkla mobil uyumlu sayfalar yapılmasıdır. Mobil uyumlu sayfaların sisteminin temeli ızgara yapısıdır. Izgara yapısı col-md, col-lg gibi kodlarla oluşturulur. Çalışma mantığı sayfayı en az 2, en fazla 6 farklı sütuna bölebilirsiniz. Bu böldüğünüz sayfa ekran genişliğine göre şekil alacaktır. Sanırım bunu örneklerle daha iyi anlayabilirsiniz.


Sayfayı İkiye Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-6">1. KISIM</div>
<div class="col-md-6">2. KISIM</div>
</div>
</div>

Sayfayı Üçe Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-4">1. KISIM</div>
<div class="col-md-4">2. KISIM</div>
<div class="col-md-4">3. KISIM</div>
</div>
</div>

Sayfayı Dörde Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-3">1. KISIM</div>
<div class="col-md-3">2. KISIM</div>
<div class="col-md-3">3. KISIM</div>
<div class="col-md-3">4. KISIM</div>
</div>
</div>

Sayfayı Altıya Bölen Bootstrap Örneği:

<div class="container">
<div class="row">
<div class="col-md-2">1. KISIM</div>
<div class="col-md-2">2. KISIM</div>
<div class="col-md-2">3. KISIM</div>
<div class="col-md-2">4. KISIM</div>
<div class="col-md-2">5. KISIM</div>
<div class="col-md-2">6. KISIM</div>
</div>
</div>

Bu kodları tek tek deneyerek öğrenebiliriniz.
Devamını Oku