Bootstrap derslerimize devam ediyoruz.Bu derste bootstrapın en önemli sistemlerinden biri olan
grid i işleyeceğiz.Bu sistemi iyi öğrenmek gerekir.Sitemizi grid ızgaralarına göre kodlayıp her cihazda uyum almasını sağlayacağız.
İncele : http://ustaderslik.com/ornek/bootstrap-Grid/
İndir : http://ustaderslik.com/dosya/bootstrap-Grid.rar
Grid sistemi
yatay düzlem de alanı
12 parçaya böler.Bu 12 parçaya göre alanlarımızı şekillendiririz.Örneğin bir divi masaüstü için
4-4-4 ayarlarken tablet görünümüne geçtiğinde
6-6-6 olsun diye biliriz.Bu şekil de 18 olur.6+6=12 eder ve yan yana olur bu ikisi.Diğer 6 aşağıya iner.Mobilde ise
12-12-12 deyip hepsini alt alta göstrebiliriz.Temel mantığı bu şekil de.
xs : Telefon.
768px altı
sm : Tablet.
768px-992px arası
md : Masaüstü.
992px-1200px arası
lg : Büyük Masaüstü.
1200px üstü
col-model-boyut şeklin de kullanımı var.Örneğin
col-xs-8.Bu şekil de div telefon boyutuna geçtiğin de 8 birimlik alan kaplasın dedik.
<div class="col-xs-3 col-sm-5 col-md-8 col-lg-12"></div>
Örneğin yukarıdaki divimiz mobilde :
3 birimlik alan,tablette
5,masaüstün de
8,büyük masaüstün de
12 birimlik alanı kapsasın dedik.Temel kullanımı bu şekil de.
Peki 1 birimin boyutu nasıl hesaplanıyor derseniz.Örneğin kapsayıcı divimiz
1200px.Bunun içine grid ızgaralarımızı koyduğumuz da her
1 birim
100px demektir.Kısaca kapsayıcı dive göre belirlenir.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{max-width:960px;margin:auto;margin-top:50px;}
div{height:30px;margin-bottom:25px;}
.k{background:#e43e24;}
.b{background:#66bcfa;}
.g{background:#15d82a;}
</style>
</head>
<body>
<div class="ortala">
<!-- masaüstü : 4+4+4 tablet : 8+2+2 mobil : 2+2+8 -->
<div class="col-xs-2 col-sm-8 col-md-4 k"></div>
<div class="col-xs-2 col-sm-2 col-md-4 b"></div>
<div class="col-xs-8 col-sm-2 col-md-4 g"></div>
<!-- masaüstü : 3+3+3+3 tablet : 5+1+5+1 mobil : 1+5+1+5 -->
<div class="col-xs-1 col-sm-5 col-md-3 k"></div>
<div class="col-xs-5 col-sm-1 col-md-3 b"></div>
<div class="col-xs-1 col-sm-5 col-md-3 g"></div>
<div class="col-xs-5 col-sm-1 col-md-3 k"></div>
<!-- büyük masaüstü : 4+4+4 masaüstü : 3+6+3 tablet : 2+8+2 mobil : 1+10+1 -->
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-4"></div>
<div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 b"></div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-4"></div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
