Bootstrap - Grid Sistemi

Bootstrap'te Grid Sistemini kullanarak web sayfamızda sayfalarımızı bölümlere ayırabiliriz. Temel amacı sayfamızın tüm cihaz ve tarayıcılara uyum sağlamasıdır. Bootstrap bize CSS kodu yazmadan bu işlemi yapabilmemizi sağlar.

İlk önce bir adet div oluşturup container veya container-fluid class'larından birini eklemeliyiz. İkisi arasındaki farklara değinirsek.

container: Sayfamızın iki tarafında eşit aralıklarla boşluk bırakılmış halini getirir.
container-fluid: Sayfa genişliğinin tamamını kaplayan bir yapı oluşturur.

Daha sonra oluşturacağımız div yapılarının yan yana hizalı olarak oluşması için div'e row class'ını vermemiz gerekir.Böylece div'lerin satır bazlı olmasını sağlar.

    <div class="container" style="background-color:#00ffff;height:300px">             
            <h1>CONTAINER CLASS</h1>
            <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>
  
    <div class="container-fluid" style="background-color:#0094ff;height:300px">
        <h1>CONTAINER-FLUID CLASS</h1> 
        <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>

Grid sistemi: Bir web sayfası temel olarak 12 eşit parçaya ayrılır. Ekran modellerine göre de farklı tasarımlar oluşturabilmemizi sağlar. Ekran modellerine göre aşağıdaki sınıfları kullanabiliriz.

• Telefon: col-xs(extra-small) -> 768px'in altındaki boyutlardır.
• Tablet: col-sm(small) -> 768px ve daha büyük boyutlardır. 
• Dizüstü bilgisayar: col-md(medium) ->992px ve daha büyük olan boyutlardır.
• Masaüstü bilgisayar: col-lg(large) ->1200px ve daha büyük olan boyutlardır.

Temel kullanımlarına değinirsek

col-md-6 :Div iki eşit parçaya ayrılır.

col-md-3 :Div dört eşit parçaya ayrılır.

col-md-1 :Div on iki eşit parçaya ayrılır.

col-md-2 :Div altı eşit parçaya ayrılır.

Görmüş olduğunuz gibi ekran modellerinden sonraki sayılar, div'in 12'lik türden kaplayacağı genişlik birimini belirtir.

Grid sisteminin son hali aşağıdaki görseldedir. Bu şekilde tüm cihazlara uygun bir sayfa tasarımını oluşturmak kolay bir hale geldi. 

Son bir not: Izgara (Grid) sistemi sadece 12 ile sınırlı değildir. Bootstrap'i indirmeden önce customize sayfasında - Customize kendi bootstrap kütüphanemizi oluşturabiliriz. Oluştururken Grid sistemini 12'den farklı ayarlayabiliriz. Örneğin 15 yaparsak sayfamız 15 eşit parçaya ayrılacaktır.