Bootstrap Ders-18 Grid Sistemi
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-18 Grid Sistemi

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2899)
RAPOR ET
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

http://ustaderslik.com/resim/ders/1as0dh0a0f.png
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ü :
http://ustaderslik.com/resim/ders/2f01asd0dd.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol