Bootstrap 5 Konteyner

Bootstrap 5 Konteyner

Önceki bölümden öğrendiğiniz gibi, Bootstrap, site içeriğini saran içeren elementler gerektirir.

Konteyner içinde içerik doldurduğumuzda ve iki konteyner sınıfı mevcuttur:

  • .container sınıfı, yanıtlayıcı ve sabit genişlikli konteynerler sağlar
  • .container-fluid sınıfı, görüş alanının tam genişliğini kapsayan tam genişlik konteynerleri sağlar

Sabit konteyner

kullanarak .container sınıfı, yanıtlayıcı ve sabit genişlikli konteynerler oluşturur.

Lütfen dikkat edin, genişliği (max-width)(diferli ekran boyutlarında değişir:

Extra küçük
<576px 		Küçük
≥576px 		Orta
≥768px 		Büyük
≥992px 		Ekstra Büyük
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Aşağıdaki örneği açın ve tarayıcı penceresini büyütün, konteyner genişliğinin farklı kesme noktalarında nasıl değiştiğini görmek için:

Örnek

<div class="container">
  <h1>İlk Bootstrap Sayfam</h1>
  <p>Bazı metinler burada.</p>
</div>

Kişisel olarak deneyin

XXL kesme noktası (≥1400px) Bootstrap 5'te yeni eklenmiştir ve Bootstrap 4'teki en büyük kesme noktası Ekstra Büyük (≥1200px) olmuştur.

Akış konteyneri

kullanarak .container-fluid sınıfı, tam ekran genişliğini kaplayan tam genişlik konteynerleri oluşturur (width Her zaman 100%）：

Örnek

<div class="container-fluid">
  <h1>İlk Bootstrap Sayfam</h1>
  <p>Bazı metinler burada.</p>
</div>

Kişisel olarak deneyin

Konteyner dolgusu

Varsayılan olarak, konteynerler sol-sağ dolgu (sol-sağ iç boşluklar) ile sağlanır, üst veya alt dolgu (üst-alt iç boşluklar) yoktur. Bu yüzden, genellikle Boşluk araçları（uygulama araçları），ek doldurma ve kenar boşlukları gibi, daha iyi görünmelerini sağlar. Örneğin:.pt-5 anlamı "biri büyük ekler".Üst doldurma：

Örnek

<div class="container pt-5"></div>

Kişisel olarak deneyin

Konteyner kenarlığı ve renkleri

Diğer araçlar, örneğin kenarlık ve renkler, genellikle konteynerlerle birlikte kullanılır:

Örnek

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Kişisel olarak deneyin

Renk ve kenarlık araçları hakkında daha fazla bilgi öğreneceksiniz.

Duyarlı Konteynerler

Ayrıca .container-sm|md|lg|xl sınıfı belirlemek için kullanılır.

Konteynerin max-width Farklı ekran boyutları/vizörler üzerinde değişir:

Sınıf Extra küçük
<576px		 Küçük
≥576px		 Orta
≥768px		 Büyük
≥992px		 Extra büyük
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Örnek

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

Kişisel olarak deneyin