Son Yazılar
Anasayfa » Yazılım » HTML/CSS » Bootstrap Izgara Mantığı
Bootstrap Izgara Mantığı

Bootstrap Izgara Mantığı

Bu yazımda Twitter’ ın çıkardığı arayüz geliştirmeyi kolaylaştıran Bootstrap’ ın ızgara sistemi mantığından bahsedeceğim.

İşin temelinde çözünürlük farketmeksizin ekranın 12 parçaya bölünmesi mantığı var. Ekranı 12 parçaya bölme kısmında kullandığımız 4 adet CSS sınıfı(class) mevcut. Bunlar; xs, sm, md, lg. Şimdi bu sınıfların anlamlarına bakalım.

Aşağıdaki tabloda hangi sınıfın hangi çözünürlüğü kapsadığı bilgisini bulabilirsiniz.

xs sm md lg
Örnek Cihaz Cep Telefonları Tabletler Bilgisayarlar Bilgisayarlar
Çözünürlük Aralığı < 768px ≥ 768px ≥ 992px ≥1200px

Şimdi gelin devam edelim ve bu sınıfların nasıl kullanıldığına bakalım.

 

Bu sınıfları kullanabilmek için gerekli olan kod yapısı ve açıklaması şöyle.

1.satırda <div class=”row”> ile bir satır oluşturuyoruz. Yani bu kodu yazdığımız tüm satırı artık bir div içerisine almış oluyoruz.

2.satırda <div class=”col-lg-6″> ile üstteki kod ile açmış olduğumuz satırın 6 dilimlik sol yarısını kontrol ediyoruz.

4.satırda <div class=”col-lg-6″> ile üstteki kod ile açmış olduğumuz satırın 6 dilimlik sağ yarısını kontrol ediyoruz.

 

<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

Bu noktaya kadar karmaşık gelmiş olabilir. Ancak örneklere bakınca her şey yerine oturacaktır.

Örnek 1

ızgara1

<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>

Örnek 2
ızgara2

<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>

Örnek 3
ızgara3

<div class="col-lg-4"></div>
<div class="col-lg-8"></div>

Örnek 4

ızgara4

<div class="col-lg-6"></div>
<div class="col-lg-2"></div>
<div class="col-lg-4"></div>

Örnek 5
ızgara5

<div class="col-md-6"></div>
<div class="col-md-6"></div>

Dikkat

4.örneği ele alalım. Dikkat ettiyseniz “col-lg-” sınıfını kullandım. Bunun sonucunda şöyle bir durum ortaya çıkıyor. 1200px’ ten daha yüksek çözünürlüğe sahip cihazlarda kodlamamızın ekran görüntüsü 4.resimdeki gibi olurken, daha düşük çözünürlüğe sahip cihazlarda her bir sütun bir satırı kaplar hale geliyor. Yani aşağıdaki gibi oluyor.

ızgara6

Şimdide 5.örneği ele alalım. Bu örnekte dikkat ettiyseniz “col-md-” sınıfını kullandım. Bunun sonucunda da şöyle bir durum ortaya çıkıyor 992px’ ten daha yüksek çözünürlüğe sahip cihazlarda(yani 1200px’ ten büyük cihazlarda) kodlamamızın görüntüsü 5.örnekteki ekran çıktısına sahip olur. Ancak daha ufak çözünürlüğe sahip xs ve sm cihazlarda her bir sütun bir satırı kaplar hale gelir.

ızgara7

Yani şunu söyleyebiliriz. Kodlamasını yaptığımız sınıfın çözünürlüğü ve bu değerden daha yüksek çözünürlüğe sahip ekranlarda kodlamamızın ekran çıktısı kodlamamız ile aynı olurken. Daha düşük çözünürlüklerde her bölüm bir satıra denk gelmiş oluyor.

3.Derste görüşmek üzere,

İyi Çalışmalar.

Hakkında Mehmet Akif Vurucu

C# 'ta kendisini sürekli geliştirmeye çalışan, Wordpress meraklısı, inatçı, spor tutkunu, fanatik bir Fenerbahçeli. Ayrıca Osmaniye Korkut Ata Üniversitesi Yönetim Bilişim Sistemleri öğrencisi.

Cevapla

E-posta adresiniz yayınlanmayacak. Required fields are marked *

*