Bootstrap Izgara Sistemi

Bootstrap ile ilgili kısa kısa olacak şekilde bir dizi yayın oluşturacağım. Kullanıcı arayüzü geliştirirken olmazsa olmazlarımızdandır kendisi. Onun için böyle arada değineceğiz.
Bootstap 4 baz alınarak bilgiler verilecektir.

Bootstrap Nedir?

Bootstrap web üzerinde duyarlı, mobil-öncelikli projeler geliştirmek için en popüler HTML, CSS, JS kütüphanesidir.

Bootstrap en yaygın kullanılan açık kaynak kodlu kütüphanelerin başında gelmektedir.

Izgara Sistemi

Izgara sistemleri içeriğinizi barındıracak satır ve sütunları bir dizi sayfa düzenleri oluşturmak için kullanılır.

Bootstrap ızgara yapısı 3 ana bölümden oluşur.

• Kapsayıcı ( .container)
• Satır  (.row)
• Kolon (.col-*)  // col-md-4 , col-lg-6 ....

Kapsayıcı ( .container)

Bootstrap ızgara sisteminde satırları bir kapsayıcının içine koymak gerekmektedir. İki Sınıfa ayrılır kapsayıcılar.

.container : sabit genişlikteki sitelerde

.container-fluid : esnek yapılı sitelerde kullanılır.

örnek:

Satır (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan "-15px" ile ana kapsayıcının bıraktığı boşluğu doldurur. 

Kolonlar satıra sığmadığında ise taşma yapmadan bir alt satıra geçer.

Kolon (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. 

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

Suitable for : kullanıma uygun olan cihaz

Grid behaviour: ızgara davranışı

Container width: kapsayıcının genişliği

# of columns: kolon sayısı
Column width: yaklaşık bir kolonun genişliği
Gutter width: boşlukların genişliği kolon arasındaki // toplam 30px; sağdan soldan 15px

	Extra small <768px	Small >=768px	Medium >=992px	Large >=1200px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Suitable for	Telefon	Tablet	Laptop	Laptop & Masaüstü
Grid behaviour	Her zaman yatay	Yatay üzeri kesme noktalarını başlatmak için daraltılmış
Container width	None (auto)	750px	970px	1170px
# of columns	12	12	12	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)

kendime notlar...