Bootstrap 3: İzgara Sistemi ve Medya Sorguları

Hepimiz en popüler açık kaynak web çerçevesi olduğu için Bootstrap'i biliyoruz. Mark Otto ve Jacob Thorton, şimdiye kadar tasarlanan en güçlü CSS çerçevelerinden birini yaratmaya başardırlar. Bootstrap'ı ilk piyasaya sürüldüğünde en ilginç değişiklik izgara sistemindeki farktır. Bootstrap 2, iki farklı tarayıcı bpyutuna (masaüstü ve ardından mobil) ayarlandı. Boootstrap 3 kullanarak başına gelen mobil ile herşeyi oluşturabilirsiniz ve izgara sistemi, tarayıcı boyutuna göre farklı izgaralar oluşturmanızı sağlıyor. Bootstrap 4'ün Alpha Release - çerçevenin en son versiyonunda benzer bir trend görülmektedir.

Bootstrap 3 Sütun Örneği

Bunu ilk başta anlamak biraz zor olabilir, işte örnek burda. Aşağıdaki özelliklere sahip olduğu bir site istediğinizi varsıyalım:

• ekstra küçük ekranlı cihazlarda 1 sütün
• küçük ve orta ekranlı cihazlarda 2 sütün
• büyük ekranlı cihazlarda 4 sütün

İzgara sistemi artık mobil cihazlarda yukarı basmakla, bu kod böyle görünecektir.

<div class="row">
    <div class="col-sm-6 col-lg-3">
       Bu bizim izgaramızın bir parçasıdır
    </div>
    <div class="col-sm-6 col-lg-3">
        Bu bizim izgaramızın bir parçasıdır.
    </div>
    <div class="col-sm-6 col-lg-3">
        Bu bizim izgaramızın bir parçasıdır.
    </div>    
    <div class="col-sm-6 col-lg-3">
        Bu bizim izgaramızın bir parçasıdır.
    </div>    
</div>

Varsayılan, bir sütün kullanıldığı için fazladan küçük cihazlar için herhangi bir şey tanımlamamız gerekmiyor. Küçük cihazlar için bir izgara boyutunu tanımlamalıyız, ancak orta cihazlar için değil. Bunun nedeni izgaranın yukarı kalkmasıdır. Yani sm, md ve lg için o izgara boyutu olacaktır. Farklı izgara boyutlarını ve bunları nasıl oluşturduğunuzu açıklayacağiz ve ardından örnekleri de göstereceğiz.

İzgara Boyutları

Bu yeni izgara sistemi hakkında en iyi bölümdür. Sitenizin 4 farklı tarayıcı boyutunda farklı izgara göstermesini gerçekçi bir şekilde yapabilirsiniz. Aşağıda farklı boyutların listesi vardır.

.col-xs-$  Extra Small Phones Less than   768px

.col-sm-$	Small Devices	Tablets 768px and Up.col-md-$	Medium Devices	Desktops 992px and Up

.col-lg-$	Large Devices	Large Desktops 1200px and Up

Resmi Bootstrap belgeleri, izgarayi nasıl kullanacağınızı kapsamlı bir kılavuz içerir. Sütün boyutları, kolon arası boyutları, maksimum sütün boyutları ve tarayıcı boyutuna göre sitenizin maksimum genişliğine genel bakış elde etmek için bunlara bir göz atın.

Bootstrap İzgarası için Varsayılan Boyutları

Bazen sitenizi istediğinize göre çalıştırmak için medya sorgularını kullanmanız gerekir. Size varsayılan boyutları göstermek için ipuçları hazırladık, böylece Bootstrap medya sorgularına ve kesme noktalarına ihtiyacınız varsa bunlara inceleyin.

Bootstrap 3 Medya Sorgulama Noktaları

Bootstrap 3, mobil ilk ön uç çerçevesidir. Aşağıdaki medya sorguları için doğru sıralamayı ekledim.

Min Genişlik: Verilen miktardan büyük veya ona eşit olan her şeyi ifade eder. Maksimum genişlik: Verilen miktardan küçük veya ona eşit olan her şeyi ifade eder.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
 
 
 
 
	/*==========  Mobile-First-Methode  ==========*/
 
	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (min-width : 480px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px){
 
	}
 
	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px){
 
	}
 
 
 
	/*==========  nicht-mobile Methode  ==========*/
 
	/* Large Devices, Wide Screens */
	@media only screen and (max-width : 1200px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (max-width : 992px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (max-width : 768px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (max-width : 480px){
 
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 
	}

Bootstrap 2.3.2 Media Queries Breakpoints

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px){
 
}
 
@media only screen and (max-width : 979px){
 
}
 
@media only screen and (max-width : 767px){
 
}
 
@media only screen and (max-width : 480px){
 
}
 
@media only screen and (max-width : 320px){
 
}

Örnekler

İşte burada oluşturabileceğiniz izgaraların birkaç örneğidir. Bazı kullanıcıların isteyebileceği bazı temel sitelere girip bu siteyi Bootstrap 3 izgarasıyla oluşturmanın ne kadar kolay olduğunu göstereceğiz.

Büyük Masaüstü ve Mobil

Bir sitenin ekstra küçük (telefon), küçük (tablet) cihazlarda 1 sütunu, orta (orta masaüstü ) cihazlarda ve 2 sütun ve büyük (masaüstü) cihazlarda 4 sütun olmasını istediğinizi varsıylaım.

            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices!</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices!</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices!</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                     <div class="visible-sm text-primary">Small Devices!</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
            </div>

Orta: Büyük masaüstünde ekstra sütunu gösterin

Bu yeni izgaranın öne çıkan en iyi örneğidir. Kenar çubuğuna ve içerik bölümüne sahip bir siteniz olduğunu varsıyalım. Ekstra küçük ekranlı cihazlar için bir sütun, kenar çubuğuna sahip ana içerik istersiniz. Küçük ve orta ekranlı cihazlar için kenar çubuğunun ve ana içeriğin yan yana olmasını isteriz. Artık büyük cihazlar için, daha büyük cihazlardaki alanı kullanmak istiyoruz. Daha fazla içerik göstermek için ekstra bir kenar çubuğu eklemek istiyoruz. İkinci kenar çubuğumuza yer ayarlamak için ana içeriğin boyutunu büyük cihazlarda 6 sütune değiştireceğiz. Bu, daha büyük masaüstlerindeki alanı kullanmanın harika bir yoludur. İşte bu örnek için kod.

            <div class="row">
                <div class="col-sm-9 col-lg-6 text-danger">
                    I am the main content.
                </div>
                <div class="col-sm-3 text-warning">
                    I am the main sidebar.
                </div>
                <div class="col-lg-3 visible-lg text-success">
                    I am the secondary sidebar that only shows up on LARGE devices.
                </div>
            </div>

Gelişmiş: Her boyut için Farklı Izgara

Bu daha karmaşık bir örmek olacak. Ekstra küçük cihazlar için 2 sütun istiyoruz. Küçük cihazlar için 3 sütun istiyoruz. Orta cihazlar için 4 sütun istiyoruz. Büyük cihazlar için 6 sütun (yalnızca büyük cihazlarda gösterilen) istiyoruz.

            <div class="row">
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    I'm content!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    I'm content!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    I'm content!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    I'm content!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    I'm content!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
                    I'm content only visible on large devices!
                </div>
            </div>

It’s Gridtactic!

Bootstrap 3 izgarasıyla karmaşık ve dinamik siteler oluşturmanın ne kadar kolay olduğunu görebilirsiniz. Mobil 2 sütun sitelerinden büyük masaüstlerindeki öğeleri göstermeye kadar her tür site oluşturabilirsiniz. Umarım, bu örnekler size yeni izgara sisteminin esnekliği ve yaratabileceğiniz tüm harika şeyler hakkında bir fikir verecektir.

Happy Coding J.

Mevcut bir yönetici paneline sahip bir HTML tabanlı web siteniz varsa, Bootstrap işlevselliğiyle oluşturulan Bootstrap Yönetici Temalarımızı gözden geçirmek isteyebilirsiniz. Bu Bootstrap temaları size Bootstrap 3'ün tam gücünü gösterecek!