Bootstrap Grid Sistemi Kullanımı - Dizin, Kripto Para, Oyun, Mobil

Bootstrap Grid Sistemi Kullanımı

Gönderen: Kaan   Tarih: 2018-08-09 09:27 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 135 Onay sırasına at Düzenle Kopyası

Bootstrap Grid Sistemi Kullanımı

Bootstrap 12’li bir ızgara sistemi kullanarak sayfa hazırlamayı temel almaktadır.

“row” class’ı uygulanan div elemanları içine genişliği 1 birim olan 12 tane sütun yerleştirilebilir.

Her sütunun kaç birim genişlikte olacağı ayrı ayrı belirlenebilir. Önemli olan toplamlarının 12 birim olmasıdır. Örneğin;

  • 4+4+4
  • 2+6+4
  • 3+3+3+3
  • 2+3+4+3

gibi örnekler çoğaltılabilir.

Sayfamızın istenen yerinde row class’ı uygulanmış bir div etiketi açıp, içerisine bu sistemi uygulayabiliriz.

Responsive (esnek-duyarlı) sayfa tasarımı sağlamak için sütunların farklı tip ekranlarda, farklı genişlikte görünmeleri sağlanabilir. İşte bu Bootstrap’ın en büyük avantajıdır.

Bunun için Bootstrap’ta 4 farklı Grid sınıfı tanımlanmıştır:

  • xs (768 px’ten küçük ekranlar)
  • sm (768px – 991px arası ekranlar)
  • md (992px – 1200px arası ekranlar)
  • lg (1200px ve daha geniş ekranlar)

Bir sütunun genişliğini belirlemek için “col-*-*” şeklinde ifadeler kullanılır. Bunu bir örnekle açıklayalım.

<div class="row">
  <div class="col-sm-4">Kutu1</div>
  <div class="col-sm-4">Kutu2</div>
  <div class="col-sm-4">Kutu3 </div>
</div>

Yukarıdaki örnekteki div elemanına “col-sm-4” sınıfı uygulandığında o elemanın 768px’den büyük ekranlarda 4 birim yer kaplayacağını belirtmiş oluyoruz. Burada md ve lg için farklı bir genişlik belirtilmediği için o tip ekranlarda da 4 birim yer kaplayacaktır.

Ancak daha küçük olan xs ekranlarda bu geçerli olmayacak, xs ekranlarda bu divlerin genişliği 100% yani 12 birim olacaktır.

Bu durumda xs ekranlarda bu 3 div elemanı alt alta yerleşecek, sm ve daha büyük ekranlarda ise yan yana yerleşip 4’er birim yer kaplayacaklardır.

Bunu denemenizin yolu tarayıcı penceresini daraltarak farklı ebatlarda sayfanızın nasıl göründüğünü incelemektir. Tarayıcı penceresini yeterince daralttığınızda divler alt alta geçecek, 768px’ten büyük pencerede ise yan yana yerleşeceklerdir.

Bir div elemanına, birden fazla grid sınıfı uygulayarak, farklı ekran boyutlarında farklı genişlikte görünmesini sağlayabiliriz.

Alttaki örneği inceleyelim:

<div class="row">
  <div class="col-sm-6  col-md-4">Kutu1</div>
  <div class="col-sm-6" col-md-4>Kutu2</div>
  <div class="col-sm-12 col-md-4">Kutu3 </div>
</div>

Buradaki div elemanları 4 farklı ekranda şu şekilde yerleşirler:

  • lg yani geniş ekranlarda yan yana 4’er birim genişlikte yerleşirler. “col-lg-*” şeklinde bir uygulama yapılmadığından md için belirtilen genişlik, lg için de geçerlidir.
  • md ekranlarda yan yana 4’er birim genişlikte yerleşirler.
  • sm ekranlarda kutu1 ve kutu2 6’şar birim genişlikte yan yana yerleşirken, kutu3 alta geçip 12 birim yani 100% genişlik kaplar.
  • xs ekranlarda genişlik belirtilmediği için 3 kutu da alt alta ve 100% genişlikte yerleşirler.

İstenirse 4 ekran tipi için de ayrı ayrı genişlik belirtebiliriz. Önemli olan her ekran tipi için yazılan genişliklerin toplamı aynı satırda 12 olmalıdır.Md’ler kendi aralarında 12, sm’ler kendi aralarında 12 vb..

Konu örnekleri kısmındaki farklı sayfa tasarımlarını inceleyiniz.

Bootstrap ile sayfa tasarımında kullanılan bazı temel Css Class’larından bahsedelim:

Container class:

Ana katman olarak kullanılır. Tüm sayfa ya da bir bölüm bu etiketler arasına alınarak sınırları belirlenir. Container ve container-fluid şeklinde iki farklı türü vardır. Container sınıfı uygulandığında yanlarda bir miktar dış boşluk bırakılırken, container-fluid sınıfı ekranı tam kaplar.

<div class="container">
<div class="row">
  <div class="col-sm-6  col-md-4">Kutu1</div>
  <div class="col-sm-6" col-md-4>Kutu2</div>
  <div class="col-sm-12 col-md-4">Kutu3 </div>
</div>
</div>

Navbar class:

Sayfanın üst kısmında yer alan bir navigasyon bölmesi oluşturur. İçerisinde açılır menüler, butonlar vb elemanlar yer alabilir.

Collapse özelliği verilerek dar ekranlarda açılır menüye dönüşmesi sağlanabilir.

Konu örneklerini inceleyiniz.

Hidden-xs, hidden-sm, hidden-md ve hidden-lg sınıfları:

Bir html elemanının istenen ekran tiplerinde gizlenmesini sağlar. Örneğin hidden-md sınıfı uygulanan bir eleman, md ekranlarda gizlenirken diğer tip ekranlarda görünecektir.

<div class="hidden-xs hidden-sm">

Yukarıdaki örnekte div elemanı xs ve sm sınıflarında gizlenecektir.

Carousel Sınıfı:

Resim vb nesneler arasına slide Show şeklinde geçiş sağlayan, dokunmatik ekranlarda sürükleyerek de çalışabilen yapıdır.

Örnekleri çalıştırıp tarayıcı penceresini daraltın ve genişletin. Bu sayede farklı ekranlarda sayfanın nasıl göründüğünü inceleyebilirsiniz.



Yorumlar: