Bootstrap - Izgara Sistemi

Bu bölümde Bootstrap Grid Sistemini tartışacağız.

Izgara nedir?

Wikepedia'nın belirttiği gibi -

Grafik tasarımda ızgara, içeriği yapılandırmak için kullanılan bir dizi kesişen düz (dikey, yatay) çizgiden oluşan bir yapıdır (genellikle iki boyutlu). Baskı tasarımında düzen ve içerik yapısını tasarlamak için yaygın olarak kullanılır. Web tasarımında HTML ve CSS kullanarak hızlı ve etkili bir şekilde tutarlı bir mizanpaj oluşturmak çok etkili bir yöntemdir.

Basit kelimelerle ifade etmek gerekirse, web tasarımındaki ızgaralar içeriği düzenler ve yapılandırır, web sitelerinin taranmasını kolaylaştırır ve kullanıcılar üzerindeki bilişsel yükü azaltır.

Bootstrap Grid System nedir?

Izgara sistemi için Bootstrap'in resmi belgelerinde belirtildiği gibi -

Bootstrap, cihaz veya görüntü alanı boyutu arttıkça 12 sütuna kadar uygun şekilde ölçeklendiren duyarlı, mobil bir ilk akışkan ızgara sistemi içerir. Kolay düzen seçenekleri için önceden tanımlanmış sınıfların yanı sıra daha anlamsal düzenler oluşturmak için güçlü karışımlar içerir.

Yukarıdaki ifadeyi anlayalım. Bootstrap 3, Bootstrap kodunun artık mobil cihazlar, tabletler gibi daha küçük ekranları hedefleyerek başlaması ve ardından dizüstü bilgisayarlar, masaüstü bilgisayarlar gibi daha büyük ekranlar için bileşenleri ve ızgaraları "genişletmesi" anlamında mobil bir ilktir.

Mobil İlk Strateji

Content
- En önemli olanı belirleyin.
Layout
- Önce daha küçük genişlikler için tasarlayın.
- Öncelikle mobil cihaz temel CSS adresi; tablet, masaüstü bilgisayarlar için ortam sorguları adresi.
Progressive Enhancement
- Ekran boyutu büyüdükçe öğeler ekleyin.

Bootstrap Grid Sisteminin Çalışması

Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır. Bootstrap grid sistemi şu şekilde çalışır -

Satırlar bir .container uygun hizalama ve dolgu için sınıf.
Yatay sütun grupları oluşturmak için satırları kullanın.
İçerik, sütunların içine yerleştirilmelidir ve yalnızca sütunlar, satırların hemen alt öğeleri olabilir.
Önceden tanımlanmış ızgara sınıfları gibi .row and .col-xs-4hızlı ızgara düzenleri oluşturmak için kullanılabilir. Daha fazla anlamsal düzen için LESS mixins de kullanılabilir.
Sütunlar, dolgu yoluyla cilt payları (sütun içeriği arasındaki boşluklar) oluşturur. Bu dolgu, ilk ve son sütun için negatif kenar boşluğu ile satırlarda kaydırılır..rows.
Izgara sütunları, yaymak istediğiniz on iki kullanılabilir sütunun sayısı belirlenerek oluşturulur. Örneğin, üç eşit sütun üç kullanır.col-xs-4.

Medya sorguları

Medya sorgusu, "koşullu CSS kuralı" için gerçekten süslü bir terimdir. Belirtilen belirli koşullara göre bazı CSS'ler uygular. Bu koşullar karşılanırsa stil uygulanır.

Bootstrap'teki Ortam Sorguları, içeriği görüntü alanı boyutuna göre taşımanıza, göstermenize ve gizlemenize olanak tanır. Aşağıdaki ortam sorguları, Bootstrap ızgara sisteminde anahtar kesme noktaları oluşturmak için LESS dosyalarında kullanılır.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bazen bunlar bir max-width CSS'yi daha dar bir cihaz setiyle sınırlamak için.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Medya sorgularının iki bölümü vardır, bir cihaz özelliği ve ardından bir boyut kuralı. Yukarıdaki durumda, aşağıdaki kural belirlenir -

Bu satırı düşünelim -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Olursa olsun ne tür tüm cihazlar için min-width: Ekran-sm-min @ ekranın genişliği daha küçük alırsa ekran sm-max @ , daha sonra bir şey yapmak .

Izgara seçenekleri

Aşağıdaki tablo, Bootstrap grid sisteminin birden fazla cihazda nasıl çalıştığını özetlemektedir -

	Ekstra küçük cihazlar Telefonlar (<768px)	Küçük cihazlar Tabletler (≥768 piksel)	Orta ölçekli cihazlar Masaüstü Bilgisayarlar (≥992px)	Büyük cihazlar Masaüstü Bilgisayarları (≥1200px)
Izgara davranışı	Her zaman yatay	Başlamak için daraltıldı, kesme noktalarının üzerinde yatay	Başlamak için daraltıldı, kesme noktalarının üzerinde yatay	Başlamak için daraltıldı, kesme noktalarının üzerinde yatay
Maksimum konteyner genişliği	Yok (otomatik)	750 piksel	970px	1170px
Sınıf öneki	.col-xs-	.col-sm-	.col-md-	.col-lg-
sütun sayısı	12	12	12	12
Maksimum sütun genişliği	Oto	60px	78px	95px
oluk genişliği	30px (Bir sütunun her iki yanında 15 piksel)	30px (Bir sütunun her iki yanında 15 piksel)	30px (Bir sütunun her iki yanında 15 piksel)	30px (Bir sütunun her iki yanında 15 piksel)
Nestable	Evet	Evet	Evet	Evet
Ofsetler	Evet	Evet	Evet	Evet
Sütun sıralaması	Evet	Evet	Evet	Evet

Temel Izgara Yapısı

Bootstrap ızgarasının temel yapısı aşağıdadır -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

Bazı basit tablo örneklerini görelim -

Örnek - Yataya yığılmış
Örnek - Orta ve Büyük Cihaz
Örnek - Mobil, tablet, masaüstü bilgisayarlar

Duyarlı sütun sıfırlamaları

Mevcut dört ızgara katmanıyla, belirli kesme noktalarında, biri diğerinden daha uzun olduğu için sütunların tam olarak netleşmediği sorunlarla karşılaşabilirsiniz. Bunu düzeltmek için bir sınıf kombinasyonunu kullanın.clearfixve aşağıdaki örnekte gösterildiği gibi duyarlı yardımcı program sınıfları -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Bu, aşağıdaki sonucu verecektir -

Bu örneğin istediğiniz sonucu için görüntü alanınızı yeniden boyutlandırın veya telefonunuzda kontrol edin.

Ofset Sütunları

Ofsetler, daha özel düzenler için kullanışlı bir özelliktir. Daha fazla boşluk için sütunları itmek için kullanılabilirler (örneğin). .col-xs = * sınıflar ofsetleri desteklemez, ancak boş bir hücre kullanılarak kolayca çoğaltılabilirler.

Ofsetleri büyük ekranlarda kullanmak için, .col-md-offset-*sınıflar. Bu sınıflar bir sütunun sol kenar boşluğunu artırır* nerede sütunlar * dan aralığı 1 -e 11.

Aşağıdaki örnekte, <div class = "col-md-6"> .. </div> var, bunu sınıf kullanarak ortalayacağız .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Bu, aşağıdaki sonucu verecektir -

Yuvalama sütunları

İçeriğinizi varsayılan ızgara ile iç içe yerleştirmek için yeni bir .row ve bir dizi .col-md-* mevcut bir .col-md-*sütun. İç içe geçmiş satırlar, toplamı 12'ye kadar olan bir dizi sütun içermelidir.

Aşağıdaki örnekte, mizanpajın iki sütunu vardır ve ikincisi iki sıra üzerinde dört kutuya bölünmüştür.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Bu, aşağıdaki sonucu verecektir -

Sütun Sıralaması

Bootstrap grid sisteminin bir diğer güzel özelliği de sütunları bir sırayla kolayca yazıp bir başkasında gösterebilmenizdir. Yerleşik ızgara sütunlarının sırasını şu şekilde kolayca değiştirebilirsiniz:.col-md-push-* ve .col-md-pull-* değiştirici sınıfları nerede * dan aralığı 1 -e 11.

Aşağıdaki örnekte, sol sütun en dar olan ve bir kenar çubuğu görevi gören iki sütun düzenimiz var. Bu sütunların sırasını kullanarak değiştireceğiz.col-md-push-* ve .col-md-pull-* sınıflar.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Bu, aşağıdaki sonucu verecektir -