Source

ı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 mizanpajlar 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 .

Üç sütundan biri

<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, belirtilmeyen ı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.

	Ekstra küçük <576 piksel	Küçük ≥576 piksel	Orta ≥768 piksel	Büyük ≥992px	Ekstra büyük ≥1200 piksel
Maksimum kap genişliği	Yok (otomatik)	540 piksel	720 piksel	960 piksel	1140 piksel
sınıf öneki	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# sütun	12
oluk genişliği	30 piksel (bir sütunun her iki tarafında 15 piksel)
iç içe	Evet
Sütun sıralaması	Evet

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.

1 / 2

2/2

1/3

2/3

3/3

<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 sütunlar birden çok satıra bölünebilir, ancak bunun açık flex-basisveya border. Daha eski tarayıcı sürümleri için geçici çözümler vardır, ancak güncelseniz bunlara gerek yoktur.

Kolon

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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.

1/3

2/3 (daha geniş)

3/3

1/3

2/3 (daha geniş)

3/3

<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 .

1/3

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

3/3

1/3

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

3/3

<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>

Eşit genişlikte çok sıralı

.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ını karıştırarak araları duyarlı hale getirin .

sütun

<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>

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.

sütun

sütun-8

sütun-4

<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>

Yatay olarak yığılmış

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

col-sm-8

col-sm-4

col-sm

<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>

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.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

hizalama

Sütunları dikey ve yatay olarak hizalamak için esnek kutu hizalama yardımcı programlarını kullanın.

Dikey hizalama

Üç sütundan biri

<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>

Üç sütundan biri

<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

İki sütundan biri

<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.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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.

.col-9

.col-4
9 + 4 = 13 > 12 olduğundan, bu 4 sütun genişliğindeki div, tek bir bitişik birim olarak yeni bir satıra sarılır.

.col-6
Sonraki sütunlar yeni satır boyunca devam eder.

<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>

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.

.col-6 .col-sm-3

<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>

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

.col-6 .col-sm-4

<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>

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

İlk ama sırasız

İkinci ama son

Üçüncü ama ilk

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </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-*

İlk ama son

İkinci, ancak sırasız

Üçüncü ama ilk

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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>

Marj yardımcı programları

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

.col-md-4

.col-md-4 .ml-otomatik

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-otomatik

<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>

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-*

Seviye 1: .col-sm-9

Seviye 2: .col-8 .col-sm-6

Seviye 2: .col-4 .col-sm-6

<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>

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, bireysel ızgara sütunları için anlamsal CSS oluşturmak için ı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);
  }
}

Ana içerik

ikincil içerik

<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. $grid-columnsher bir sütunun genişliklerini (yüzde olarak) oluşturmak için kullanılırken , sütun olukları için eşit olarak $grid-gutter-widthbölünmüş kesme noktasına özgü genişliklere izin verir .padding-leftpadding-right

$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 .