Konteynerler

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-widthher duyarlı kesme noktasında bir
• .container-{breakpoint}, width: 100%belirtilen kesme noktasına kadar olan
• .container-fluid, width: 100%tüm kesme noktalarında 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 .

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 .