ızgara sistemi

On iki sütun sistemi, beş varsayılan duyarlı katman, Sass değişkenleri ve karışımları ve düzinelerce önceden tanımlanmış sınıf sayesinde tüm şekil ve boyutlarda düzenler oluşturmak için mobil öncelikli esnek kutu ızgaramızı kullanın.

Nasıl çalışır

Bootstrap'in ızgara sistemi, içeriği düzenlemek ve hizalamak için bir dizi kap, satır ve sütun kullanır. Flexbox ile inşa edilmiştir ve tamamen duyarlıdır. Aşağıda, ızgaranın nasıl bir araya geldiğine bir örnek ve derinlemesine bir bakış verilmiştir.

Flexbox'ta yeni misiniz veya aşina değil misiniz? Arka plan, terminoloji, yönergeler ve kod parçacıkları için bu CSS Püf Noktaları esnek kutu kılavuzunu okuyun .

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Yukarıdaki örnek, önceden tanımlanmış ızgara sınıflarımızı kullanarak küçük, orta, büyük ve ekstra büyük cihazlarda üç eşit genişlikte sütun oluşturur. Bu sütunlar, üst öğenin bulunduğu sayfada ortalanır .container.

Parçalamak, işte nasıl çalıştığı:

• Kapsayıcılar, sitenizin içeriğini ortalamak ve yatay olarak doldurmak için bir araç sağlar. .containerDuyarlı bir piksel genişliği veya tüm görünüm alanı ve cihaz boyutları .container-fluidiçin kullanın .width: 100%
• Satırlar, sütunlar için sarmalayıcılardır. Her sütun, paddingaralarındaki boşluğu kontrol etmek için yatay (oluk olarak adlandırılır) sahiptir. Bu paddingdaha sonra negatif marjlı satırlarda karşılanır. Bu şekilde, sütunlarınızdaki tüm içerik görsel olarak sol tarafa hizalanır.
• Bir ızgara düzeninde, içerik sütunlara yerleştirilmelidir ve yalnızca sütunlar, satırların hemen alt öğeleri olabilir.
• Flexbox sayesinde, belirtilmemiş ızgara sütunları widthotomatik olarak eşit genişlikte sütunlar olarak düzenlenecektir. Örneğin, dört örneğinin .col-smher biri otomatik olarak küçük kesme noktasından ve yukarısından %25 genişliğinde olacaktır. Daha fazla örnek için otomatik yerleşim sütunları bölümüne bakın.
• Sütun sınıfları, satır başına olası 12'den kullanmak istediğiniz sütun sayısını gösterir. Yani, üç eşit genişlikte sütun istiyorsanız, kullanabilirsiniz .col-4.
• Sütun widths yüzde olarak ayarlanır, bu nedenle her zaman akıcı ve üst öğelerine göre boyutlandırılmıştır.
• Sütunlar, tek tek sütunlar arasında oluklar oluşturmak için yataydır , ancak üzerinde bulunan satırlardan ve sütunlardan paddingkaldırabilirsiniz .marginpadding.no-gutters.row
• Izgarayı duyarlı hale getirmek için, her duyarlı kesme noktası için bir tane olmak üzere beş ızgara kesme noktası vardır : tüm kesme noktaları (çok küçük), küçük, orta, büyük ve çok büyük.
• Izgara kesme noktaları, minimum genişlikteki medya sorgularını temel alır, yani bu bir kesme noktasına ve onun üzerindeki tüm kesme noktalarına uygulanır (örneğin, .col-sm-4küçük, orta, büyük ve çok büyük cihazlar için geçerlidir, ancak ilk xskesme noktası için geçerli değildir).
• Daha semantik işaretleme için önceden tanımlanmış ızgara sınıflarını ( .col-4) veya Sass karışımlarını kullanabilirsiniz.

Bazı HTML öğelerini esnek kapsayıcı olarak kullanamama gibi, flexbox çevresindeki sınırlamaların ve hataların farkında olun .

Izgara seçenekleri

Bootstrap, çoğu boyutu tanımlamak için ems veya s kullanırken, ızgara kesme noktaları ve kapsayıcı genişlikleri için s kullanılır. Bunun nedeni, görüntü alanı genişliğinin piksel cinsinden olması ve yazı tipi boyutuyla değişmemesidir .rempx

Kullanışlı bir tabloyla Bootstrap ızgara sisteminin birçok cihazda nasıl çalıştığını görün.

Otomatik mizanpaj sütunları

gibi açık bir numaralı sınıf olmadan kolay sütun boyutlandırma için kesme noktasına özgü sütun sınıflarını kullanın .col-sm-6.

eşit genişlik

Örneğin, burada her cihaza ve görünüm alanına uygulanan iki ızgara düzeni xsvardır xl. İhtiyacınız olan her kesme noktası için herhangi bir sayıda birimsiz sınıf ekleyin ve her sütun aynı genişlikte olacaktır.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Eşit genişlikte çok satırlı

.w-100Sütunların yeni bir satıra ayrılmasını istediğiniz yere bir ekleyerek, birden çok satıra yayılan eşit genişlikte sütunlar oluşturun . .w-100Bazı duyarlı görüntüleme yardımcı programlarıyla karıştırarak araları duyarlı hale getirin .

Bunun açık flex-basisveya border. _ Daha eski tarayıcı sürümleri için geçici çözümler vardır, ancak hedef tarayıcılarınız buggy sürümlerine girmiyorsa bunlara gerek yoktur.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Bir sütun genişliğini ayarlama

Flexbox ızgara sütunları için otomatik yerleşim, bir sütunun genişliğini ayarlayabileceğiniz ve kardeş sütunların çevresinde otomatik olarak yeniden boyutlandırılmasını sağlayabileceğiniz anlamına gelir. Önceden tanımlanmış ızgara sınıflarını (aşağıda gösterildiği gibi), ızgara karışımlarını veya satır içi genişlikleri kullanabilirsiniz. Orta sütunun genişliği ne olursa olsun diğer sütunların yeniden boyutlandırılacağını unutmayın.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Değişken genişlik içeriği

col-{breakpoint}-autoSütunları, içeriklerinin doğal genişliğine göre boyutlandırmak için sınıfları kullanın .

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Duyarlı sınıflar

Bootstrap'in ızgarası, karmaşık duyarlı düzenler oluşturmak için önceden tanımlanmış beş katman içerir. Sütunlarınızın boyutunu çok küçük, küçük, orta, büyük veya çok büyük cihazlarda uygun gördüğünüz şekilde özelleştirin.

Tüm kesme noktaları

En küçüğünden en büyüğüne kadar aynı olan ızgaralar için .colve .col-*sınıflarını kullanın. Özellikle boyutlandırılmış bir sütuna ihtiyacınız olduğunda numaralı bir sınıf belirtin; aksi takdirde, bağlı kalmaktan çekinmeyin .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Yatay olarak yığılmış

Tek bir .col-sm-*sınıf kümesi kullanarak, yığın halinde başlayan ve küçük kesme noktasında ( ) yatay hale gelen temel bir ızgara sistemi oluşturabilirsiniz sm.

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Karıştır ve Eşleştir

Sütunlarınızın yalnızca bazı ızgara katmanlarında yığılmasını istemiyor musunuz? Gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanın. Her şeyin nasıl çalıştığına dair daha iyi bir fikir için aşağıdaki örneğe bakın.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

oluklar

Oluklar, kesme noktasına özgü dolgu ve negatif marj fayda sınıfları ile duyarlı bir şekilde ayarlanabilir. Belirli bir satırdaki olukları değiştirmek için, s'de negatif kenar boşluğu yardımcı programını .rowve s'deki eşleşen dolgu yardımcı programlarını eşleştirin .col. İstenmeyen taşmayı önlemek için .containerveya .container-fluidüst öğesinin de yeniden eşleşen dolgu yardımcı programı kullanılarak ayarlanması gerekebilir.

İşte Bootstrap ızgarasını büyük ( lg) kesme noktasında ve üzerinde özelleştirmeye bir örnek. Dolguyu ile artırdık, üst öğede ile buna karşı koyduk ve .colardından .px-lg-5sarmalayıcıyı ile ayarladık ..mx-lg-n5.row.container.px-lg-5

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Satır sütunları

.row-cols-*İçeriğinizi ve düzeninizi en iyi şekilde oluşturan sütun sayısını hızla ayarlamak için duyarlı sınıfları kullanın . Normal .col-*sınıflar tek tek sütunlar için geçerliyken (örneğin, .col-md-4), satır sütunları sınıfları .rowbir kısayol olarak üst öğede ayarlanır.

Temel ızgara düzenlerini hızlı bir şekilde oluşturmak veya kart düzenlerinizi kontrol etmek için bu satır sütunları sınıflarını kullanın.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ayrıca beraberindeki Sass karışımını da kullanabilirsiniz row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

hizalama

Sütunları dikey ve yatay olarak hizalamak için esnek kutu hizalama yardımcı programlarını kullanın. Internet Explorer 10-11, esnek kapsayıcıda aşağıda gösterildiği gibi olduğunda esnek öğelerin dikey hizalanmasını desteklemez min-height. Daha fazla ayrıntı için Flexbugs #3'e bakın.

Dikey hizalama

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Yatay hizalama

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Oluk yok

Ön tanımlı grid sınıflarımızda kolonlar arasındaki oluklar ile kaldırılabilir .no-gutters. marginBu , tüm yakın alt sütunlardan negatifleri .rowve yatay öğeleri kaldırır .padding

İşte bu stilleri oluşturmak için kaynak kodu. Sütun geçersiz kılma işlemlerinin yalnızca ilk alt sütunlara göre belirlendiğini ve öznitelik seçici aracılığıyla hedeflendiğini unutmayın . Bu, daha spesifik bir seçici oluştururken, sütun dolgusu, boşluk yardımcı programları ile daha da özelleştirilebilir .

Uçtan uca bir tasarıma mı ihtiyacınız var? Üst öğeyi .containerveya öğesini bırakın .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Pratikte, işte böyle görünüyor. Bunu diğer tüm önceden tanımlanmış ızgara sınıflarıyla (sütun genişlikleri, yanıt veren katmanlar, yeniden sıralamalar ve daha fazlası dahil) kullanmaya devam edebileceğinizi unutmayın.

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Sütun sarma

Tek bir satıra 12'den fazla sütun yerleştirilirse, her bir ekstra sütun grubu bir birim olarak yeni bir satıra sarılır.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Sütun sonları

Sütunları flexbox'ta yeni bir satıra bölmek küçük bir kesme gerektirir: width: 100%sütunlarınızı yeni bir satıra sarmak istediğiniz yere bir öğe ekleyin. Normalde bu, birden çok .rows ile gerçekleştirilir, ancak her uygulama yöntemi bunu hesaba katamaz.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Bu arayı, duyarlı görüntüleme yardımcı programlarımızla belirli kesme noktalarında da uygulayabilirsiniz .

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Yeniden sıralama

Sipariş sınıfları

İçeriğinizin görsel sırasını.order- kontrol etmek için sınıfları kullanın . Bu sınıflar duyarlıdır, böylece kesme noktasına göre ayarlayabilirsiniz (örneğin, ). Beş ızgara katmanının tamamında geçiş desteği içerir .order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Sırasıyla ve ( ) uygulayarak bir öğenin değerini değiştiren responsive .order-firstve sınıfları da vardır. Bu sınıflar da gerektiğinde numaralandırılmış sınıflarla karıştırılabilir ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Sütunları dengeleme

Izgara sütunlarını iki şekilde dengeleyebilirsiniz: duyarlı .offset-ızgara sınıflarımız ve kenar boşluğu yardımcı programlarımız . Izgara sınıfları, sütunlarla eşleşecek şekilde boyutlandırılırken, kenar boşlukları, ofset genişliğinin değişken olduğu hızlı düzenler için daha kullanışlıdır.

Ofset sınıfları

.offset-md-*Sınıfları kullanarak sütunları sağa taşıyın . Bu sınıflar, bir sütunun sol kenar boşluğunu *sütunlar kadar artırır. Örneğin, dört sütun üzerinde .offset-md-4hareket eder ..col-md-4

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Duyarlı kesme noktalarında sütun temizlemeye ek olarak, ofsetleri sıfırlamanız gerekebilir. Bunu ızgara örneğinde çalışırken görün .

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Marj yardımcı programları

v4'teki flexbox'a geçişle, .mr-autokardeş sütunları birbirinden uzaklaştırmak gibi kenar boşluğu yardımcı programlarını kullanabilirsiniz.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

yuvalama

İçeriğinizi varsayılan ızgarayla iç içe yerleştirmek için mevcut bir sütuna yeni .rowve bir dizi sütun ekleyin . İç içe satırlar, toplam 12 veya daha az sütun içeren bir dizi sütun içermelidir (mevcut 12 sütunun tümünü kullanmanız gerekmez)..col-sm-*.col-sm-*

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sas karışımları

Bootstrap'in kaynak Sass dosyalarını kullanırken, özel, anlamsal ve duyarlı sayfa düzenleri oluşturmak için Sass değişkenlerini ve karışımlarını kullanma seçeneğiniz vardır. Önceden tanımlanmış ızgara sınıflarımız, hızlı yanıt veren düzenler için eksiksiz bir kullanıma hazır sınıf paketi sağlamak için bu aynı değişkenleri ve karışımları kullanır.

Değişkenler

Değişkenler ve haritalar, sütun sayısını, cilt payı genişliğini ve kayan sütunların başlayacağı ortam sorgu noktasını belirler. Bunları, yukarıda belgelenen önceden tanımlanmış ızgara sınıflarını ve ayrıca aşağıda listelenen özel karışımları oluşturmak için kullanırız.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

karışımlar

Karışımlar, ayrı ızgara sütunları için anlamsal CSS oluşturmak üzere ızgara değişkenleriyle birlikte kullanılır.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Örnek kullanım

Değişkenleri kendi özel değerlerinize göre değiştirebilir veya karışımları varsayılan değerleriyle kullanabilirsiniz. Burada, aralarında boşluk olan iki sütunlu bir düzen oluşturmak için varsayılan ayarların kullanılmasına bir örnek verilmiştir.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Izgarayı özelleştirme

Yerleşik ızgara Sass değişkenlerimizi ve haritalarımızı kullanarak, önceden tanımlanmış ızgara sınıflarını tamamen özelleştirmek mümkündür. Katman sayısını, ortam sorgu boyutlarını ve kap genişliklerini değiştirin ve ardından yeniden derleyin.

Sütunlar ve oluklar

Izgara sütunlarının sayısı, Sass değişkenleri aracılığıyla değiştirilebilir. sütun olukları için genişliği ayarlarken $grid-columnsher bir sütunun genişliğini (yüzde olarak) oluşturmak için kullanılır .$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Izgara katmanları

Sütunların ötesine geçerek ızgara katmanlarının sayısını da özelleştirebilirsiniz. Yalnızca dört ızgara katmanı istiyorsanız, $grid-breakpointsve öğesini $container-max-widthsaşağıdaki gibi güncellersiniz:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass değişkenlerinde veya haritalarında herhangi bir değişiklik yaparken, değişikliklerinizi kaydetmeniz ve yeniden derlemeniz gerekir. Bunu yapmak, sütun genişlikleri, ofsetler ve sıralama için yepyeni bir dizi önceden tanımlanmış ızgara sınıfının çıktısını verecektir. Duyarlı görünürlük yardımcı programları da özel kesme noktalarını kullanacak şekilde güncellenecektir. pxIzgara değerlerini (değil rem, em, veya %) olarak ayarladığınızdan emin olun .