NUI Izgara (Grid) - nandato/NUI GitHub Wiki

NUI ızgara düzeni, genişlik kontrolü ile oluşturulur. Duyarlı genişlik ile beraber, cihazlara uyumlu ızgara düzeni oluşturmanızı sağlar.

NUI Grid sistemini basitçe kavramak için aşağıda ki tabloya göz atabilirsin. Mantığı oldukça basittir. Örneklendirmek gerekirse;

“NUI’de genislik-3-1 etiketi ile genişliği 3 parçaya böl ve 1 parçası al.

Düzeni oluşturmaya başlayalım ^-^ İlk olarak ızgara oluşturmak için gerekli olan etiketimiz .duzen Hemen bir örneklendirme yapalım;

`

`

Sonuç olarak, ızgara için gerekli divi oluşturmuş olduk.Genişlik etiketleri olarak yazılı olan kısıma genişlik etiketlerini yerleştirelim;

<div class="duzen"> <div class=”genislik-1-1"> … </div> <div>

Izgara’da Mevcut Genişlik Etiketleri tablosuna dönüp "genislik-1-1" baktığımızda gördüğünüz üzere tüm mevcut alanı kaplayacak genişlik oluşturduk.

Genişliğin 2'de 1'ni alalım;

`

`

Bu durumda Genişliğin 2'de 1'ini aldık.Ancak hala boşta kalan bir alan var. Bu durumda şu şekilde yenileyelim;

<div class="duzen"> <div class="genislik-2-1">Genişliğin 2'de 1'i </div> <div class="genislik-2-1"> Genişliğin 2'de 1'i, böylece 2 kısmı da doldurduk. </div> </div>

Duyarlı genişlik, ızgara sisteminde duyarlı görünüm sağlamanız amaçlıdır.

• genislik → Ekran ne kadar değişiklik gösterirse göstersin, bir değişiklik göstermez.

• genislik-xs → 480px → Çok Küçük Cihazlar

• genislik-s → 768px → Küçük Cihazlar

• genislik-m → 992px → Orta Cihazlar

• genislik-l → 1200px → Büyük Cihazlar

Örneğin, resimlerin sıralanmasıyla ilgili ufak bir örnek yapalım. Büyük cihazlarda 6'da 1'e bölerken, Orta Cihazlar’da bu oranı 3'de 1'e düşürelim.

İlk olarak;

<div class="duzen"> ... </div>

→ Bu durumda düzeni oluşturmak için iskeleti aldık şimdi 6 parçaya bölelim.

<div class="genislik-m-3-1 genislik-l-6-1"> <img src=”resim dosya linki" width="100%"> </div>

→ Böylece, bu düzende ki resim gösterimleri şu şekilde oldu;

→ Büyük Cihazlar: 6 Resim yan yana görüntülenecek. → Orta Cihazlar: 3 Resim yan yana görüntülenecek.

Küçük Cihazlar için ise bir ekleme yapalım hemen;

<div class="genislik-s-1-1 genislik-m-3-1 genislik-l-6-1"> <img src="resim dosya linki" width="100%"> </div>

Son durum;

→Büyük Cihazlar: 6 Resim →Orta Cihazlar: 3 Resim →Küçük Cihazlar: 1 Resim

Düzende belirgin ayırıcılar oluşturmak için kullanılır.NUI’da iki tür ayrıcı vardır. (Yatay ve Dikey)

Yatay ayırıcıyı kullanmak için oluşturduğun düzene ayıracı da eklemelisin.

<div class="duzen duzen-ayirici"> <div class="genislik-m-2-1"> 2'de 1 </div> <div class="genislik-m-2-1"> 2'de 1 </div> </div>

Dikey ayırıcıyı eklemek için oluşturduğun düzenin üst kısmına <hr> eklemeli ve sınıf olarak “duzen-ayrici” şeklinde girmelisin.

<hr class="duzen-ayirici"> <div class="duzen"> <div class="genislik-m-2-1"> 2'de 1 </div> <div class="genislik-m-2-1"> 2'de 1 </div> </div>

Düzende belirli bir sıralama hazırlamak için kullanılır. NOT: Bu özelllik genislik-m-* etiketinde çalışır.

• genislik-cekme
• genislik-itme