BootStrap Grid Sistemi

BootStrap Grid Sistemi

BootStrap Grid Sistemini Tanıyalım

BootStrap 4 temel görünüm için özellikler içerir.

  • xs: Küçük ekranlar, telefonlar vb. (768 px’den daha küçük ekranlar) (extra small)
  • sm: 768-992 px arası ekranlar. (small)
  • md: 992-1200 px arası ekranlar. (medium)
  • lg: 1200 px’ten daha geniş ekranlar (large)

Bootsrap, ekranın 12 birimden oluştuğunu varsayarak, nesnelerin yerleşimini kolayca yapmamızı sağlar. Ayrıca yukarıda belirtilen her ekran sınıfı için nesnelerin kaplayacağı genişliği ayrı ayrı belirtebiliriz.

Genişlikleri belirtmek için col- ifadesi ile başlayan hazır sınıflar bulunmaktadır. Örneğin col-sm-6 sınıfı, o nesnenin sm ekranlarda sayfanın yarısını (12’de 6’sı) kaplayacağını belirtir.

Buna göre sm ekranlarda iki div elemanını yan yana eşit genişlikte yerleştirmek istersek:

<div class=”col-sm-6”>Kutu 1</div>

<div class=”col-sm-6”>Kutu 2</div>

Yukarıdaki örnekte sm ekranlarda bu iki kutu yan yana gelir ve eşit genişlikte yer kaplar. Diğer ekranlar için bir şey belirtilmemiş olduğunda, bu belirttiğimiz genişlikler daha geniş ekranlarda da geçerli olur. Fakat daha dar ekranlarda geçerli olmaz.

Yani yukarıdaki iki kutu sm, md ve lg ekranlarda yan yana yerleşirken, xs ekranlarda alt alta gelecek ve herbiri 12 birim yani ekranın tamamını kaplayacaktır.

Bir nesnenin farklı ekran sınıflarında, farklı genişlikler kaplaması sağlanabilir. Örneğin;

<div class=”col-sm-7  col-md-5”>

Yukarıdaki div elemanı, xs ekranlarda 12 birim, sm ekranlarda 7 birim, md ve lg ekranlarda ise 5 birim genişlikte olacaktır.

Başka bir örnek;

<div class=”col-xs-6 col-sm-8 col-md-9”>

Bu div ise xs ekranlarda 6 birim, sm ekranlarda 8 birim, md ve lg ekranlarda 9 birim genişliğinde olur.

Örnek: 3 adet div elemanımız olduğunu düşünelim. Bu divler xs ekranlarda alt alta yerleşsinler. Sm ekranlarda 2 div yan yana gelirken diğeri altta kalsın. Md ve lg ekranlarda ise 3 div yan yana gelsin.

<div class=”col-sm-6 col-md-4”>Kutu 1</div>

<div class=”col-sm-6 col-md-4”>Kutu 2</div>

<div class=”col-md-4”>Kutu 3</div>

*** col-*-* sınıflarının row sınıfı uygulanmış bir div içine alınmaları gerekir. Yani yukarıdaki örneğin çalışan hali şu şekilde olacaktır:

<div class=”row”>

<div class=”col-sm-6 col-md-4”>Kutu 1</div>

<div class=”col-sm-6 col-md-4”>Kutu 2</div>

<div class=”col-md-4”>Kutu 3</div>

</div>

 

bootstrap grid sistemi, hakkında bilgi, bootstrap kullanımı, bootsrap nedir, nasıl kullanılır, grid sistemi, bootsrap öğren, bootstrap grid sistemini kullanmayı öğren

KONU İLE İLGİLİ ÖRNEKLER

Bu konu ile ilgili örnek bulunmamaktadır.



YORUMLAR




1063  kez okundu.

Online Kullanıcı Sayısı 249