ızgara sistemi
On iki sütun sistemi, altı 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.
Ö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-width
medya sorgularını temel alır, yani bu kesme noktasını ve üzerindekileri etkiler (örneğin, , , , ve.col-sm-4
iç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.sm
md
lg
xl
xxl
-
Kapsayıcılar, içeriğinizi ortalar ve yatay olarak doldurur. Tüm görünüm alanları ve cihazlar için duyarlı
.container
bir 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-fluid
width: 100%
.container-md
-
Satırlar, sütunlar için sarmalayıcılardır. Her sütun,
padding
aralarındaki boşluğu kontrol etmek için yatay (oluk olarak adlandırılır) sahiptir. Bupadding
daha 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-4
dört yayılma).width
s 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-0
olukları çı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:
xs <576 piksel |
sm ≥576 piksel |
md ≥768 piksel |
lg ≥992 piksel |
xl ≥1200 piksel |
xxl ≥1400 piksel |
|
---|---|---|---|---|---|---|
Konteynermax-width |
Yok (otomatik) | 540 piksel | 720 piksel | 960 piksel | 1140 piksel | 1320 piksel |
sınıf öneki | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# sütun | 12 | |||||
oluk genişliği | 1,5 rem (solda ve sağda 0,75 rem) | |||||
Özel oluklar | Evet | |||||
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 xs
vardı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}-auto
Sü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 .col
ve .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ı, .row
içerilen sütunlar için varsayılan olarak üst öğede ayarlanır. İle .row-cols-auto
sütunlara doğal genişliklerini verebilirsiniz.
Temel ızgara düzenlerini hızlı bir şekilde oluşturmak veya kart düzenlerinizi kontrol etmek ve gerektiğinde sütun düzeyinde geçersiz kılmak için bu satır sütun 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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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 .row
ve 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);
// 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 {
@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-columns
her 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-breakpoints
ve öğesini $container-max-widths
aş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. px
Izgara değerlerini (değil rem
, em
, veya %
) olarak ayarladığınızdan emin olun .