Bootstrap Container ile Container-fluid farkı (Notlar)

 05 Haziran 2017  admin bootstrap, container

Bootstrap da konteynırlar ekran için kullanılan ızgara sisteminde en önemli özelliklerden biridir. Container ekran belli bir kısmını container fluid ise ekranın tamamını kullanır. Eğer ölçü belirtilmediyse ayrı olarak. Container ve Container-fluid iç içe de kullanılabilir.

Container-Fluid :

 

<div class="container-fluid">

  ...

</div>

Container :

 

<div class="container">

  ...

</div>

 

kaynak:https://www.kodcafe.com/programlama/html/bootstrap-container-ile-container-fluid-farki.html

Bootstrap ızgara sistemi 3 ana yapıdan oluşur.

• Kapsayıcı (.container)

• Satırlar (.row)

• Kolonlar (col-*)

.col-md-8

.col-md-4

Basit bir kod örneği yukarıdaki gibi oluyor.

Kapsayıcı (.container)

Bootstrap ızgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır. Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.

• .container : sabit genişlikteki sitelerde

• .container-fluid : esnek yapılı sitelerde

Uyumlu web için değişen genişlikler de kapsayıcı genişliğide değişir. Satırlar ve kolonlar yüzde değerli olduğu için değişen genişliklerde değerleri değişmez.

• 1200px veya daha büyük ekran çözünürlüğünde: 1170px

• 992px - 1199px arasında: 970px

• 768px - 991px arasında: 750px

• 768px’ den daha düşük ekran çözünürlüğünde: auto

Satırlar (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

Satırları ana kapsayıcısı (.container) dışında kullanmayın çalışmıyor. Bazen gözden kaçıyor, sorun oluyor :)

Kolonlar (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.

Farklı ekran çözünürlükleri için farklı kolon sınıfları tanımlanır.

• .col-xs- 768px’den küçükse

• .col-sm- 768px ile 991px arasında

• .col-md- 992px ile 1199px arasında

• .col-lg- 1200px eşit ve büyükseukarıdaki örnekte iki tanım yapılmıştır. Bootstrap 3 ile birlikte mobil önceliği geldiğinden eğer küçük boyutlu ekran için bir tanım yapıldı ise ve başka tanım yoksa bu tanım yukarı doğru tüm ekran boyutlarını etkiler.

• Yukarıdaki örnekte mesela .col-xs tanımı hem mobili (768’den küçük) hemde tableti (768px - 991px) etkileyecektir. .col-md tanımı hem masa üstünü hemde daha büyük ekranları etkiyecektir.

Bu yazıyı burada bitirip bir sonraki yazıda bootstrap ızgara sistemini anlatmaya devam edeceğim.

Kalın sağlıcakla.

Kaynaklar

• http://www.adobewordpress.com/ders-2-bootstrap-grid-izgara-yapisi

• https://www.youtube.com/watch?v=yhpE4U3acqI

• http://usablica.github.io/front-end-frameworks/compare.html

• http://www.sitepoint.com/understanding-bootstrap-grid-system/

• http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

• http://shoelace.io/

• http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

BOOTSTRAP IZGARA-SİSTEMİ SAYFA-PLANI

Navbar:

fixed-top  : navbar beraberinde hareket eder.

Bootstrapta önemli olan tablo:

Extra small

<576px Small

≥576px Medium

≥768px Large

≥992px Extra large

≥1200px

Max container width None (auto) 540px 720px 960px 1140px

Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

# of columns 12

Gutter width 30px (15px on each side of a column)

Nestable Yes

Column ordering Yes

Değişken Genişlikli Sütun - col-*-auto

Grid(ızgara) sisteminde değişken genişliğe sahip sütun oluşturmak da mümkündür. Bunun için

col-md-auto etiketi kullanılır, böylelikle diğer sütunların genişlikleri sabit kalırken auto olan sütun içindeki veriye göre genişler veya daralır. auto olan divin genişliği diğer sütunlar ile birlikte 12 yi aşarsa, tek başına bir alt satıra inerek 12 büyüklüğünde bir sütun oluşturur. Diğer sütunlar da konumlarını değişken genişlikli sütuna göre alırlar.

Grid(ızgara) yapısında ufak eklemelerle daha farklı sonuçlar elde edilebilir. Örneğin sütun genişliğimiz toplamda 12 olması gerekirken biz 9 kullandık, dolayısıyla 3 genişliğindeki bir alan boş kalacaktır. Bu boş alana göre sütunlarımızı hizalama yapabiliriz. Bunun için row'un bulunduğu div e

div'leri ortalamak için => justify-content-center

div'leri sola yaslamak için => justify-content-start

div'leri sağa yaslamak için => justify-content-end

div'leri genişliğine göre aralarında boşluk bırakmak için => justify-content-between

div'leri genişliğine göre etrafında ve aralarında boşluk bırakmak için => justify-content-around

değerleri verilir.