Konteynerler
Kapsayıcılar, içeriğinizi belirli bir cihaz veya görünüm alanında içeren, dolduran ve hizalayan temel bir Bootstrap yapı taşıdır.
Onlar nasıl çalışır
Kapsayıcılar, Bootstrap'teki en temel düzen öğesidir ve varsayılan ızgara sistemimizi kullanırken gereklidir . Kaplar, içeriği içlerinde tutmak, doldurmak ve (bazen) ortalamak için kullanılır. Kapsayıcılar iç içe yerleştirilebilirken, çoğu düzen iç içe kapsayıcı gerektirmez.
Bootstrap üç farklı kapsayıcıyla birlikte gelir:
.container
,max-width
her duyarlı kesme noktasında bir.container-fluid
,width: 100%
tüm kesme noktalarında olan.container-{breakpoint}
,width: 100%
belirtilen kesme noktasına kadar olan
Aşağıdaki tablo, her bir kapsayıcının max-width
orijinalle .container
ve .container-fluid
her kesme noktasında nasıl karşılaştırıldığını gösterir.
Bunları çalışırken görün ve bunları Izgara örneğimizde karşılaştırın .
Ekstra küçük <576 piksel |
Küçük ≥576 piksel |
Orta ≥768 piksel |
Büyük ≥992px |
X-Large ≥1200 piksel |
XX-Büyük ≥1400 piksel |
|
---|---|---|---|---|---|---|
.container |
100% | 540 piksel | 720 piksel | 960 piksel | 1140 piksel | 1320 piksel |
.container-sm |
100% | 540 piksel | 720 piksel | 960 piksel | 1140 piksel | 1320 piksel |
.container-md |
100% | 100% | 720 piksel | 960 piksel | 1140 piksel | 1320 piksel |
.container-lg |
100% | 100% | 100% | 960 piksel | 1140 piksel | 1320 piksel |
.container-xl |
100% | 100% | 100% | 100% | 1140 piksel | 1320 piksel |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 piksel |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Varsayılan kapsayıcı
Varsayılan sınıfımız, her kesme noktasındaki değişiklikleri .container
anlamına gelen duyarlı, sabit genişlikli bir kapsayıcıdır .max-width
<div class="container">
<!-- Content here -->
</div>
Duyarlı kapsayıcılar
Duyarlı kapsayıcılar, belirtilen kesme noktasına ulaşılana kadar %100 genişliğinde bir sınıf belirlemenize olanak tanır, ardından max-width
daha yüksek kesme noktalarının her biri için s uygularız. Örneğin, , , , ve ile ölçekleneceği kesme noktasına ulaşılana .container-sm
kadar başlamak için %100 genişliktedir .sm
md
lg
xl
xxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Sıvı kapları
.container-fluid
Görünüm alanının tüm genişliğini kapsayan tam genişlikte bir kap için kullanın .
<div class="container-fluid">
...
</div>
küstah
Yukarıda gösterildiği gibi, Bootstrap, istediğiniz düzenleri oluşturmanıza yardımcı olmak için bir dizi önceden tanımlanmış kapsayıcı sınıfı oluşturur. Bu önceden tanımlanmış kap sınıflarını, _variables.scss
onlara güç sağlayan Sass haritasını ( içinde bulunur) değiştirerek özelleştirebilirsiniz:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass'ı kişiselleştirmenin yanı sıra, Sass karışımımızla kendi konteynerlerinizi de oluşturabilirsiniz.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Sass haritalarımızı ve değişkenlerimizi nasıl değiştireceğimize dair daha fazla bilgi ve örnekler için, lütfen Grid belgelerinin Sass bölümüne bakın .