Bootstrap Grid Sistemi

Bootstrap Grid Sistemi

Bootstrap sayfayı sağdan sola 12 eş parçaya ayırır. Böylece sayfanın responsive görünümü daha güzel olacaktır ve iskeleti daha sağlam olacatır!

Bootstrap Grid Sistemi
Bootstrap Grid Sistemi

Bootstrap grid sistemi her cihaza uygun tasarım oluşturmamızı kolaylaştırır. Bunlar;

  • large(lg):  1200px’den büyük ve eşit cihazlar. ( Masaüstü)
  • medium(md): 992px’den büyük ve eşit cihazlar. (Masaüstü)
  • small(sm): 768px’den büyük ve eşit cihazlar. (Tablet)
  • extra small(xs): 768px’den küçük cihazlar. (Telefon)

Eğer grid sistemini sayfaya yaymak isterseniz;

Yukarıdaki gibi kullanabilirsiniz. Ama sayfaya eşit ve ortalı bir şekilde durmasını isterseniz;

Sayfayı 12’ye oranla ortalı şekilde oluşturabilirsiniz.

Col Md Nasıl Kullanılır ?

Bootstrap’ın sitesinden Bootstrap çalışma kodlarımızı alalım.

Col-MD’nin çalışması için row klası oluşturuyoruz.

Daha sonrasında kodlarımızı yazmaya başlıyoruz.

Bootstrap Grid Yapısı
Bootstrap Grid Yapısı

Yukarıdaki kodları bootstrap kodlarımızın arasına eklediğimiz zaman sayfayı 3 eş parçaya 4’er birim olarak böldüğünü göreceğiz.

Toplam 12 olduğu sürece isterseniz 1 birim olarak, isterseniz 5+5+2 olarak dilediğiniz gibi bölebilirsiniz.

Tüm Kodlar;

 

 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir