Stil Sayfaları (CSS) 14 - Izgara (Grid) Yapısı
4.4.3.3. Grid Yapısı
Bootstrap grid yapısı ile ekran çözünürlüğüne göre boyutları yeniden düzenlenen sütunlar kullanılır
(Tablo 4.18). Bu yapıya göre ekran 12 farklı sütuna ayrılmış kabul edilir. Bu sütunları bazen birleşik bazen ayrı kullanmak mümkündür. Sütun grupları kapsayıcı bir <div class="row"> elemanı
içinde kullanılır. Kapsayıcı <div> elemanının içine istenildiği kadar sütun konulabilir fakat bir
sıradaki toplam sütun sayısı on ikiyi (12’yi) geçtiğinde sonraki sütun bir alt satıra yerleşir (Görsel
4.37). Ekranı sütunlara ayırırken içeriğin okunabilir olmasına dikkat edilmelidir. Örneğin cep telefonu
ekranı 6 sütuna ayrılırsa içerik okunmaz hâle gelebilir. Genellikle cep telefonu ekranları en
çok iki sütuna ayrılmaktadır.
 |
| Görsel 4.37: Grid yapısı taslak görünüm |
Genişlik | Boyut | Sınıf Adı |
<576 piksel | En küçük | col- |
>=576 piksel | Küçük | col-sm- |
>=768 piksel | Orta | col-md- |
>=992 piksel | Geniş | col-lg- |
>=1200 piksel | En Geniş | col-xl- |
Web sitesi tasarımına göre aynı <div> elemanı için bir veya daha fazla “col” sınıfı tanımlanabilir.
İyi bir tasarım için tüm ekran boyutlarına özel “col” sınıfı tanımlanmalıdır.
<div class="row">
<div class="col bg-info"> Kutu 1 </div>
<div class="col bg-danger"> Kutu 2 </div>
<div class="col bg-dark"> Kutu 3 </div>
<div class="col bg-warning"> Kutu 4 </div>
</div>
Not
Ekranı bölümlere ayırmak amacıyla tanımlanan “col” sınıflarından en geniş çözünürlük
hangi sınıfa ait ise “col” sınıfı tanımlanmayan diğer çözünürlükler için ekran,
o sınıfa göre ayrılır. Yukarıdaki örnekte tüm ekran boyutları için <div> elemanlarının
dördü de yan yana dizilecektir.
<div class="row">
<div class="col-sm-6 col-md-3 bg-info"> Kutu 1 </div>
<div class="col-sm-6 col-md-3 bg-danger"> Kutu 2 </div>
</div>
Not
Ekran geniş ve en geniş boyutları için “col-lg”, “col-xl” sınıfı tanımlanmadığı için geniş
ve en geniş boyutlarda “col-md” sınıfına göre ekran ayrılacaktır.
26. Uygulama
Bootstrap grid yapısını kullanarak ekranı Görsel 4.38’de görüldüğü şekilde bölümlere
ayırma işlemlerini yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.38: Grid yapısı gerçek görünüm |
1. Adım: HTML sayfasında Bootstrap Framework kullanımı için gerekli bağlantıları
yapınız.
2. Adım: HTML sayfasında <div class="container"> etiketi açınız ve içine aşağıdaki
kodları yapıştırınız.
<div class="row">
<div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-2 bg-primary">Kutu1</div>
<div class="col-12 col-sm-4 col-md-6 col-lg-4 col-xl-2 bg-success">Kutu2</div>
<div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-2 bg-info">Kutu3</div>
<div class="col-12 col-sm-4 col-md-6 col-lg-4 col-xl-2 bg-warning">Kutu4</div>
<div class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-2 bg-dark">Kutu5</div>
<div class="col-12 col-sm-4 col-md-6 col-lg-4 col-xl-2 bg-secondary">Kutu6</div>
</div>
3. Adım: Web sayfasını çalıştırınız ve tarayıcının genişliğini değiştirerek web sayfasının
Görsel 4.38’deki gibi farklı boyutlardaki tasarımlarını görüntüleyiniz.
4. Adım: Hangi tasarımın hangi çözünürlüklerde görüntülendiğini maddeler hâlinde
yazınız.
1. Genişliği 576 pikselden az çözünürlüklerdeki görünüm
2. Genişliği 576 piksel ile 768 piksel arası çözünürlüklerdeki görünüm
3. Genişliği 768 piksel ile 992 piksel arası çözünürlüklerdeki görünüm
4. Genişliği 992 piksel ile 1200 piksel arası çözünürlüklerdeki görünüm
5. Genişliği 1200 pikselden büyük çözünürlüklerdeki görünüm
Sıra Sizde
Aşağıdaki kodları HTML sayfasında <div class=”container”> içine yazınız ve farklı ekran
boyutları için ayrı ayrı resimlerin nasıl görüntüleneceğini yazınız (Örneğin en küçük
boyut için alt alta dört resim görüntülenir.).
<div class="row”>
<div class=" col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
<img src="kare.png" style="width:100px; height:100px;"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
<img src="ucgen.png" style="width:100px; height:100px;"></div>
<div class=" col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
<img src="daire.png" style="width:100px; height:100px;"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
<img src="dikdortgen.png" style="width:100px; height:100px;"></div>
</div>
Hiç yorum yok