Cumartesi, Kasım 2
Shadow

Bootstrap Izgara(Grid) Sistemi

Sitemize bootstrap ne olduğunu ve nasıl eklediğimizi Bootstrap Nedir? konusunda anlatmıştık.Şimdi sıradaki kısım aslında ana yapısını anlatıyor.Aslında durum çok büyük görünüp küçük bir mantıkla çalışır.Bu sistem sitemize giren kullanıcının ekranını büyüklüğünü ve küçüklüğü bakmadan 12 eşit parçalara bölerek  çalışır.Bizde bu 12 parçaya göre kodlama yapıyoruz.

Daha önceki yazımızdaki örneği kullanalım.

<html>
<head>
<link rel="stylesheet" href="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://mustafasevim.net.tr/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/popper.js/1.14.0/umd/popper.min.js" crossorigin="anonymous" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-3 alert alert-primary" role="alert">Burası col-xl-3 alan 1</div>
<div class="col-xl-3 alert alert-primary" role="alert">Burası col-xl-3 alan 2</div>
<div class="col-xl-3 alert alert-primary" role="alert">Burası col-xl-3 alan 3</div>
<div class="col-xl-3 alert alert-primary" role="alert">Burası col-xl-3 alan 4</div>
<div class="col-xl-6 alert alert-warning" role="alert"> odası col-xl-6 alan 1 </div>
<div class="col-xl-6 alert alert-warning" role="alert"> dışarıdan col-xl-6 alan 2 </div>
<div class="col-xl-12 alert alert-success" role="alert"> dışarıdan col-xl-12 alan </div>
</div></div>
</body>

Ekran Görüntüsü

Öncelikle ızgara sisteminin gördüğünüz gibi .col sistemiyle çalışmaktadır.Yazılmış alert sınıfları size dahi iyi görüntü göstermek ve anlamınızı kolaylaştırmak içindir.Orada gördüğünüz gibi .col-xl-3 bu kısım genişliği belirtmektedir.Aynı zamanda xl yazısıyla büyük ekran kullanıcılarda çalışması gerektiğini de anlatmaktadır.Öncelikle 12 parçanın yüzdelik dilimlere ayrıldığının görebilmekteyiz.Bu dilimler;

1 => %8,333333333333333

2 => %16,66666666666667

3 => %25

4 => %33,33333333333333

5 => %41,66666666666667

6 => %50

7 => %58,33333333333333

8 => %66,66666666666666

9 => %75

10 => % 83.333333333333333

11 => %91,66666666666666

12 => %100

Bu genişliği ekran büyüklüklerine göre ayarlamalar yapılmıştır.

  • Çok Büyük Genişlikte Ekran –> xl (.col-xl)
  • Büyük  Genişlikte Ekran –> lg(.col-lg)
  • Orta Genişlikte Ekran –> md.(.col-md)
  • Küçük Genişlikte Ekran –> sm(.col-sm)
  • Çok Küçük Genişlikte Ekran –> .col- (ek eklememize gerek yoktur.)

bootstrap grid yapısını anlatımının tek başına olmayacağı için container bahsetmeden olmaz.

Bootstrap Container(kontenyir) Yapısı

Container(kontenyir) yapımızda mevcut bu da aslında farklı ekranlarda oluşabilecek farklılıkları hesaplamamızı kolaylaştırmak için yapılmıştır.Bu da iki sınıftan oluşuyor.Birinci sınıf her ekrana göre sabit bir genişliğin verildiği sınıf birde her zaman %100 genişlikte olan sınıftır.Öncelikle ekrana göre genişliği sabit olan sınıfımız .container gelelim.Açıklama gerekirse media yazılmış bir sistem çalışır.Media ne olduğunu bilmiyorsanız, Css Media Tanımlama konusunu okuyunuz.Yani belli ekran aralıklarında belli bir sabit değer verilen sistemdir.

  • Çok Büyük Genişlikte Ekran –> 1140px(1200px ve üstü ekranlarda)(örnek büyük ekranlık bilgisayarlar)
  • Büyük  Genişlikte Ekran –> 960(1199px ile 992px arasında ekranlarda)(büyük ekranlı tabletler küçük ekranlı bilgisayarlar)
  • Orta Genişlikte Ekran –> 720px(991px ile 768px arasında ekranlarda)(tablet benzeri )
  • Küçük Genişlikte Ekran –> 540px(767px ile 576px arasında ekranlarda)(Büyük ekranlı akıllı telefonlar)
  • Çok Küçük Genişlikte Ekran –> yok(575px ve altı ekranlarda)(örnek küçük ekranlık cep telefonları)

Bu yapılan sistemde minimum ızgara genişliği 30px dir.Bu kısımda bazen değişik içerik genişliğine sahip blok lazım oluyor.Sonuç olarak tasarımlarda çok değişik ayarlamalar yapmak zorunda kaldığımızda bu konuda da bootstrap bizim için değişik sınıflar ayarlarmış.

Bootstrap Esnek Genişlikte Sütunlar

Eşit Genişlikte Sütunlar

<div class="container">
  <div class="row">
    <div class="col">
    Eşit Sütun 1
    </div>
    <div class="col">
      Eşit Sütun 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      Eşit Sütun 3
    </div>
    <div class="col">
      Eşit Sütün 3
    </div>
    <div class="col">
      Eşit Sütun 3
    </div>
  </div>
</div>

 

sadece .col sınıfları vererek eşit genişlikte sınıflar oluşturabiliyoruz.

Bir Sütün Genişliği Ayarlama

<div class="container">
  <div class="row">
    <div class="col">
      Sütun 1/3
    </div>
    <div class="col-6">
      Sütun 2/3(Bu sütun col-6 genişliğinde)
    </div>
    <div class="col">
      Sütun 3/3
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sütun 1/3
    </div>
    <div class="col-5">
      Sütun 2/3 (Bu sütun col-5 genişliğinde)
    </div>
    <div class="col">
      Sütun 3/3
    </div>
  </div>

 

burada gördüğümüz gibi ekran görüntüsü bakarak farklı genişlikte bir sütun istediğimizde bize böyle bir kolaylık sağlamaktadır. Fark ettiğiniz üzere iki farklı genişlik sütunlar yapmamıza rağmen diğer sütunlar kendilerini ona göre ayarlıyor.

Değişken Sütün Genişlik Ayarlama

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      Sütun 1/3
    </div>
    <div class="col-md-auto">
      Değişken sütun
    </div>
    <div class="col col-lg-2">
      Sütun 3/3
    </div>
  </div>
  <div class="row">
    <div class="col">
     Sütun 1/3
    </div>
    <div class="col-md-auto">
      Değişken sütun
    </div>
    <div class="col col-lg-2">
      Sütun 3/3
    </div>
  </div>

iki ayrı alanmış gibi tanımladık. .justify-content-md-center bu sınıfı ekleyerek sütun içi ne kadar genişse o kadar genişlikte oluyor ve onları ortalıyor.Aynı zamanda .col-md-auto ile sütunumuzun genişliğini otomatik yaptık.

Eşit Genişlikte Sütunlarda Çok Satırlar

<div class="container">
<div class="row">
<div class="col">Sütun</div>
<div class="col">Sütun</div>
<div class="w-100"></div>
<div class="col">Sütun</div>
<div class="col">Sütun</div>
</div></div>

 

bu yolla da çok satırlar düzenlemiş olduk.
Sorularınızı yorum kısmından sorabilirsiniz.Bir sonraki konumuzda görüşmek üzere…

 

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir