ızgara sistemi

Örnek

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, ızgara sisteminin nasıl bir araya geldiğine dair bir örnek ve ayrıntılı bir açıklama bulunmaktadır.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

Nasıl çalışır

Bunu yıkmak, ızgara sistemi şu şekilde bir araya geliyor:

• Izgaramız altı duyarlı kesme noktasını destekler . Kesme noktaları min-widthmedya sorgularını temel alır, yani bu kesme noktasını ve üzerindekileri etkiler (örneğin, , , , ve .col-sm-4için geçerlidir ). Bu, her kesme noktasına göre kapsayıcı ve sütun boyutlandırmasını ve davranışını kontrol edebileceğiniz anlamına gelir.smmdlgxlxxl

• Kapsayıcılar, içeriğinizi ortalar ve yatay olarak doldurur. Tüm görünüm alanları ve cihazlar için duyarlı .containerbir piksel genişliği veya akışkan ve piksel genişliklerinin bir kombinasyonu için duyarlı bir kap (örneğin, ) için kullanın..container-fluidwidth: 100%.container-md

• 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 sütunlarınızdaki içeriğin görsel olarak sol tarafa hizalanmasını sağlamak için negatif kenar boşluklu satırlarda etkisiz hale getirilir. Satırlar ayrıca , içeriğinizin aralığını değiştirmek için sütun boyutlandırmasını ve cilt payı sınıflarını tek tip olarak uygulamak için değiştirici sınıfları da destekler .

• Sütunlar inanılmaz derecede esnektir. Satır başına 12 şablon sütunu vardır ve bu, herhangi bir sayıda sütuna yayılan farklı öğe kombinasyonları oluşturmanıza olanak tanır. Sütun sınıfları, yayılacak şablon sütunlarının sayısını belirtir (örneğin, col-4dört yayılma). widths yüzde olarak ayarlanır, böylece her zaman aynı göreli boyuta sahip olursunuz.

• Oluklar da duyarlı ve özelleştirilebilir. Cilt payı sınıfları, kenar boşluğu ve dolgu aralığımızla aynı boyutlara sahip tüm kesme noktalarında mevcuttur . Yatay olukları .gx-*sınıflarla, dikey olukları ile .gy-*veya tüm olukları .g-*sınıflarla değiştirin. .g-0olukları çıkarmak için de mevcuttur.

• Sass değişkenleri, haritalar ve karışımlar şebekeye güç sağlar. Bootstrap'ta önceden tanımlanmış ızgara sınıflarını kullanmak istemiyorsanız, daha semantik işaretleme ile kendinizinkini oluşturmak için ızgaramızın kaynağı Sass'ı kullanabilirsiniz. Ayrıca, sizin için daha da fazla esneklik sağlamak amacıyla bu Sass değişkenlerini kullanmak üzere bazı CSS özel özelliklerini de dahil ediyoruz.

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'in ızgara sistemi, altı varsayılan kesme noktasının tümüne ve özelleştirdiğiniz kesme noktalarına uyum sağlayabilir. Altı varsayılan ızgara katmanı aşağıdaki gibidir:

• Ekstra küçük (xs)
• Küçük (sm)
• Orta (md)
• Büyük (lg)
• Ekstra büyük (xl)
• Ekstra ekstra büyük (xxl)

Yukarıda belirtildiği gibi, bu kesme noktalarının her birinin kendi konteyneri, benzersiz sınıf öneki ve değiştiricileri vardır. Kılavuzun bu kesme noktalarında nasıl değiştiği aşağıda açıklanmıştır:

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

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 altı katman önceden tanımlanmış sınıf 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>

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. İle .row-cols-autosütunlara doğal genişliklerini verebilirsiniz.

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-auto">
    <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);
  }
}

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-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>

küstah

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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: 1.5rem !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 .