Grid Sistemine (Izgara Sistemi) Nedir? :
Teknotower desteği ile Bootstrap derslerimize devam ediyoruz.
Bu derse başlamadan önce başlangıç dersimizi okumanızı tavsiye ederim.
Grid sistemi, günümüz web sitelerinde olması gereken Responsive (ekrana duyarlı) yapıyı kolaylıkla sağlayan yapıdır.
Grid sistemi, web sayfamızın gösterileceği ekranı daha verimli, düzenli ve işlevsel kullanmamızı sağlayan bir yapıdır.
Grid sisteminde 3 önemli temel yapı vardır.
Bunlar:
- Container (kapsayıcı ya da yüklük olarak düşünülebilir),
- Row (satır),
- Col (sütun)’dur.
NOT: Containerin iki ayrı şekli vardır(container, container-fluid). Bunu detaylı bir şekilde irdeleyeceğiz.
Container ve Container-fluid Farkı:
Container, piksel piksel en yüksek ekran çözünürlüğüne ulaşır. Bu ne demektir?
Mesela, 768px – 991px arası çözünürlüklerde gösterilecek sayfa düzeni, 991 px’in üzerine çıkmadığı sürece aynı özelliklerde görüntü sunacaktır. Ama, container-fluid kullanıldığında, 770px olsa bile ekran ona uyum gösterir, ekranın tamamını kapsar. Görsellik açısından, daha fazla avantaj sağladığından container-fluid kullanımı daha yaygındır.
Grid Sistemi Temeli:
Üç temel öğemizi ( container, row, col) nasıl kullanacağımızı öğrenelim.
İlk yapmamız gereken, Container sınıfımızı oluşturmak. Satır sınıfımızı oluşturmak ve kolon sınıfını yazıp içeriğini doldurmak olacaktır.
NOT: Container-satır arasına ya da satır-sütun arasına yazı yazılmamalı. Yazılarımızı, sadece “sütun” içerisinde barındırmalıyız.
NOT: Oluşturduğumuz yapıda; container ile satır arasında ve satır ile sütun arasında varsayılan olarak 15px’lik boşluklar vardır. Kolonlar için boşluklandırma yapılmadıysa boşluk yoktur. Bunlar biz değiştirmediğimiz sürece sabittir. Değiştirmek için, sınıflarımıza padding ve margin ile birlikte boşluk değerini vermemiz yeterlidir.
Geldik grid sisteminin ana mantığına ve çalışma biçimine:
Grid sistemimizde, her container, 12 parçalık bloklara ayrılmıştır. Bunu “col-1 ile col-12” arasında değer vererek ayarlayabiliriz.
Örneğin;
- 1+11,
- 2+10 ,
- 3+9
- 4+8 ,
- 5+7,
- 6+6 ,
- 7+5,
- 8+4,
- 9+3 ,
- 10+2,
- 11+1 gibi kullanımlar olabilir ya da,
- 3+3+3+3 ,
- 4+4+4,
- 2+8+2 şeklinde kullanımı olabilir.
Tamamen sizlerin hayal gücüne, ihtiyacınıza ve bilginize bağlı olan grid sistemini daha fazla çeşitlendirmemiz de mümkün. Yeter ki; kullanacağımız sütun büyüklüğün tamamı satırlarımızın boyutu olan 12’yi aşmasın. Aştığı taktirde bir alt satıra geçmiş olacaksınız ve görsellik bozulacaktır. Ama siz kullanacağınız bu satır ve sütunlardan tablo oluşturup( ticaret sitelerinde olduğu gibi) kullanmak isterseniz neden olmasın?
Grid Sistemine Giriş:
Üç temel öğemizi tanımlayalım. (Container, Row, Col)
<div class="container">
<div class="row">
<div class="col-4">Kutu1</div>
<div class="col-4">Kutu2</div>
<div class="col-4">Kutu3</div>
</div>
</div>şeklinde olacaktır.
Yazdığınız kod çalışmıyorsa bunun sebebi bootstrap kütüphanelerinden kaynaklanıyor olabilir. Bunun için tüm derslerimizin genel yapısı olan kodları sizlerle paylaşacağım.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Örneği</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
İceriğimiz...
</body>
</html>
Paylaştığım iki kodu birleştirdiğimizde oluşacak olan ekran görüntüsü:
Kutularımıza kenarlık ve arka plan eklersek.
Kodumuz:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Örneği</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style >
.body{
}
.container{
background-color: #81C784;
border: 3px black solid;
text-align: center;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
İceriğimiz...
<div class="container">
<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>
</div>
</body>
</html>Ekran çıktımız:
şeklinde olacaktır.
Peki bizim örnek olarak verdiğimiz Grid sistemi birimleri ile nasıl yapılar oluşturabiliriz?
Yukarıdaki görselin kodu.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Örneği</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style >
.body{
}
.container{
border: 3px black solid;
text-align: center;
margin: 30px;
padding: 15px;
}
.col-sm-4{
background-color:#EF5350;
border: 1px white solid;
}
.col-sm-1{
background-color:#AB47BC;
border: 1px white solid;
}
.col-sm-2{
background-color:#C2185B;
border: 1px white solid;
}
.col-sm-3{
background-color:#7986CB ;
border: 1px white solid;
}
.col-sm-5{
background-color:#4FC3F7 ;
border: 1px white solid;
}
.col-sm-6{
background-color:#4DB6AC ;
border: 1px white solid;
}
.col-sm-7{
background-color:#AED581 ;
border: 1px white solid;
}
.col-sm-8{
background-color:#FFF176 ;
border: 1px white solid;
}
.col-sm-9{
background-color: #FFB74D;
border: 1px white solid;
}
.col-sm-10{
background-color:#D32F2F; ;
border: 1px white solid;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
-------- Örnek --1
<div class="container">
<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>
</div>
-------- Örnek --2
<div class="container" >
<div class="row">
<div class="col-sm-1">Kutu1</div>
<div class="col-sm-10">Kutu2</div>
<div class="col-sm-1">Kutu3 </div>
</div>
</div>
-------- Örnek --3
<div class="container" >
<div class="row">
<div class="col-sm-3">Kutu1</div>
<div class="col-sm-9">Kutu2</div>
</div>
</div>
-------- Örnek --4
<div class="container" >
<div class="row">
<div class="col-sm-2">Kutu1</div>
<div class="col-sm-8">Kutu2</div>
<div class="col-sm-2">Kutu3 </div>
</div>
</div>
-------- Örnek --5
<div class="container" >
<div class="row">
<div class="col-sm-5">Kutu1</div>
<div class="col-sm-7">Kutu2</div>
</div>
</div>
-------- Örnek --6
<div class="container">
<div class="row">
<div class="col-sm-4">Kutu1</div>
<div class="col-sm-8">Kutu2</div>
</div>
</div>
-------- Örnek --7
<div class="container" >
<div class="row">
<div class="col-sm-3">Kutu1</div>
<div class="col-sm-4">Kutu2</div>
<div class="col-sm-2">Kutu3</div>
<div class="col-sm-3">Kutu4</div>
</div>
</div>
-------- Örnek --8
<div class="container" >
<div class="row">
<div class="col-sm-3">Kutu1</div>
<div class="col-sm-3">Kutu2</div>
<div class="col-sm-3">Kutu3 </div>
<div class="col-sm-3">Kutu4 </div>
</div>
</div>
</body>
</html>
Col Sınıflarını Tanıyalım:
- col- : Ekstra küçük ekranlar, telefonlar vb. (576 px’den daha küçük ekranlar),
- col-sm- : 576 px ve daha büyük ekranlar,
- col-md- : 768 px ve daha büyük ekranlar,
- col-lg- : 992 px ve daha büyük ekranlar,
- col-xl- : 1200 px’ten daha geniş ekranlar için kullanılır
Col sınıflarımız:
NOT: Bootstrap3′ de xs(xsmile) varken, bootstrap4 ‘te yoktur. İkiside aynıdır fakat bootstrap4 ‘e eklenen özellikler de versiyon değişikliğinden dolayı vardır.
İç İçe Satır-Sütun Kullanımı:
Var olan 12 birimlik satırımızı istediğimiz şeklide tekrardan 12′ ye bölmek mümkün. Nasıl mı? Hadi yapalım!
Kodu;
<div class="container-1"
style="
border: 3px black solid;
margin:5px;
padding:10px;
text-align:center;
background-color: #9FA8DA" >
<div class="row">
<div class="colS-3"> Kapsayıcı Kutu
<div class="container-1"
style="
border: 3px black solid;
text-align:center;
margin:50px;
background-color: white;
text-align:center;
padding:20px;" >
<div class="row">
<div class="col" style="background:#26C6DA; padding: 10px;">Kutu1</div>
<div class="col" style="background:#3949AB; padding: 10px; ">Kutu2</div>
<div class="col" style="background:#00897B; padding: 10px;">Kutu3 </div>
</div>
</div>
</div>Ya da,
Kodu;
<div class="container-1" style=" border: 3px black solid; margin:5px; padding:10px; text-align:center; background-color: #9FA8DA" >
<div class="row">
<div class="colS-3"> Kapsayıcı Kutu
<div class="container-1" style=" border: 3px black solid; text-align:center; margin:50px; background-color: white; text-align:center; padding:20px;" >
<div class="row">
<div class="col-sm-4" style="background:#26C6DA; padding: 10px;">Kutu1</div>
<div class="col-sm-4" style="background:#3949AB; padding: 10px; ">Kutu2</div>
<div class="col-sm-4" style="background:#00897B; padding: 10px;">Kutu3 </div>
</div>
</div>
</div>Derslerimizi yakından takip edin, kısa aralıklarla güncellenecektir. Bootstrap konusunda, birlikte ilerleyelim!
Bootstrap kursları ve çekilişlerden haberdar olmak için kesinlikle Instagram sayfamızı takip edin.
Bu yazımızda, sizlerle beraber grid sistemini ele almış olduk. Bir sonraki yazımızda, Offset sınıfları ve daha fazlası ile beraber olmak üzere…
