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
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
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.
Kaydol:
Kayıtlar (Atom)
