Bootstrap Grid Kullanımı

Bootstrap grid kullanımı oldukça basittir.

Bootstrap Grid Kullanımı İçin Bilinmesi Gerekenler
Bootstrap grid sınıfları:

.col-xs-12
.col-sm-12
.col-md-12
.col-lg-12

Herhangi bir html nesnesine yukarıdaki sınıflardan birini veya birden fazlasını atar iseniz. Çalışma prensibi şöyle olacaktır.

• “col” değeri nesnenin bir kolon (sütun) olarak tanımlar
• “xs, sm, md, lg” bu değerler hangi medya ekranların da görev yapacaklarını belirler
• Sayısal değer ise grid sayısı üzerinden kaça bölüneceğini belirler

Bootstrap sınıfları:

• xs = Tabletten ve daha küçük ekranlar (Telefonlar)
• sm = Tablet ve laptop aralığı
• md = Laptop ve Masaüstü aralığı
• lg = Masaüstü ve üstü cihazlar (Masaüstü PC, 2k ve 4k Tvler)

Bootstrap Grid Kullanımı ve Örnekler

Şimdi örnekler ile çalışalım.

<div class="container">
  <div class="row">
    <div class="col-xs-3 col">col-xs-3</div>
    <div class="col-xs-3 col">col-xs-3</div>
    <div class="col-xs-3 col">col-xs-3</div>
    <div class="col-xs-3 col">col-xs-3</div>
  </div>
</div>
 
<div class="container">
  <div class="row">
    <div class="col-md-3 col">col-md-3</div>
    <div class="col-md-3 col">col-md-3</div>
    <div class="col-md-3 col">col-md-3</div>
    <div class="col-md-3 col">col-md-3</div>
  </div>
</div>

Yukarıdaki örnekte iki farklı gösterim mevcut ikisi de içeriğimizi 4’e bölecek (12’li yapı kullandığınızı varsayıyorum.) fakat farklı cihazlar da farklı davranıcaklar “xs” sınıfına sahip olan divler bütün cihazlar da telefon dahil erişildiğinde ekranı 4’e bölecek “md” sınıfına ait olan divler ise tablet laptop aralığına kadar bölme işlemi yapacak telefon görünümünde ise alt alta yer alıcak. Örnek üzerinde görmek için tıklayın.

Şimdi yukarıdaki örneği bir adım daha öteye götürüp içeriğimizin her cihaz için farklı gözükmesini sağlayalım.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col">col-xs-12 col-sm-6 col-md-4 col-lg-2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col">col-xs-12 col-sm-6 col-md-4 col-lg-2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col">col-xs-12 col-sm-6 col-md-4 col-lg-2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col">col-xs-12 col-sm-6 col-md-4 col-lg-2</div>
  </div>
</div>

Yukarıdaki örneğin çalışır hali burada

Örnekte eklediğimiz her sınıfın açıklaması

• col-xs-12 = xs sınıfı tablet altındaki ölçülerde nasıl davranacağını söylüyor 12 ise içerik ölçüsü. (Küçük bir not eğer xs için bir tanım vermez iseniz otomatik olarak tek sütun gibi yani col-xs-12 olarak davranır)
• col-sm-6 = sm sınıfı tablet laptop aralığında nasıl gözükeceğini belirliyor 6 ise içeriği ikiye böler
• col-md-4 = md sınıfı laptop masaüstü aralığında nasıl gözükeceğini belirliyor 4 ise içeriği üçe böler
• col-lg-2 = lg sınıfı masaüstü ve üstü aralıklarda nasıl gözükeceğini belirliyor 2 ise içeriği altıya böler

 

 

 

 

 <div class="container b0">


            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>

            <div class="row">
                <div class="col-md-8 apg b0">.col-md-8</div>
                <div class="col-md-4 apsari bo">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4 apy b0">.col-md-4</div>
                <div class="col-md-4 apm b0">.col-md-4</div>
                <div class="col-md-4 aps b0">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6 apm b0">.col-md-6</div>
                <div class="col-md-6 apy b0">.col-md-6</div>
            </div>


        </div>

/*css*/
.b0{
    border:1px solid red;
}
.apm{
    background-color:cornflowerblue;
}
.apsari{
    background-color:gold;
}
.apy{
    background-color:chartreuse;
}
.apg{
    background-color:gray;
}

 

http://getbootstrap.com/css/#grid

http://www.codeply.com/

ömer erkan