Bootstrap'ın temeli col yapısı, bootstrap hakkında fazla türkçe kaynak malesefki bulunmamakta, bu nedenle özellikle col yapısını bazı arkadaşların karıştırdığını fark ettim, mümkün olduğunca ayrıntılı olarak anlatmaya çalıştığım kodları kendi oluşturacağınız sayfanıza bootstrap'ın standart kodları ile ekleyin ve deneyin, açıklamaları da lg, md, sm ve xs yapısına göre takip ederseniz konuyu anlayacağınıza eminim..
Ayrıca belirtmek isterim, oluşturduğunuz col yapısını tekrar kendi içinde 12'lik sisteme istediğiniz gibi bölme imkanı vermektedir, aşağıdaki örnekle daha iyi anlayabilirsiniz.
<div class="col-lg-4">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
bootstrap col yapısı kodları
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <!--ektanı 12'lik sistemle bir bütün olarak algılattık -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), aynı işlemi aşağıda da kullandık -->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-2 ile 6 ya böldük, yani (2+2+2+2+2+2=12) 6 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-2 yine aynı olay, sm-4 ile elimizdeki satırı 3'e böldük bu defa aynı satırda (4+4+4=12) 3 resim gösterecektir, xs-6 ile 2'e böldük bu defada (6+6=12) 2 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--xs-6 da alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--sm-4 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--lg-2 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), yukarıda ikiye böldüğümüz alanın diğer kısmı -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-3 ile 4'e böldük, yani (3+3+3+3=12) 4 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-3 yine aynı olay, sm-6 ile elimizdeki satırı 2'ye böldük bu defa aynı satırda (6+6=12) 2 resim gösterecektir, xs-12 ile 1'e böldük bu defada (12=12) 1 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail"> <!--xs-12 de alt satırdan başlar-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--sm-6 da alt satırdan başlar--> <!--xs-12 de alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--lg-3 de alt satırdan başlar--> <!--sm-6 da alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>
0 yorum:
Yorum Gönder