Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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çe yerleştirilebilirken, çoğu düzen iç içe kapsayıcı gerektirmez.

Bootstrap üç farklı kapsayıcıyla birlikte gelir:

  • .container, max-widthher 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-widthorijinalle .containerve .container-fluidher 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 .containeranlamı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-widthdaha 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-smkadar başlamak için %100 genişliktedir .smmdlgxlxxl

<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-fluidGö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.scssonlara 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 .