Bootstrap 4 Konteyner
Konteynerler
Önceki bölümden, Bootstrap'in site içeriğini sarmak için bir kapsayıcı öğe gerektirdiğini öğrendiniz.
Kaplar, içlerindeki içeriği doldurmak için kullanılır ve iki kapsayıcı sınıfı mevcuttur:
- Sınıf
.container, duyarlı bir sabit genişlikte kapsayıcı sağlar - Sınıf , görünümün tüm genişliğini kapsayan tam genişlikte bir kap
.container-fluidsağlar
Sabit Konteyner
.containerDuyarlı, sabit genişlikli bir kapsayıcı oluşturmak için sınıfı kullanın .
Genişliğinin ( max-width) farklı ekran boyutlarında değişeceğini unutmayın:
|
Ekstra küçük <576 piksel |
Küçük ≥576 piksel |
Orta ≥768 piksel |
Büyük ≥992px |
Ekstra büyük ≥1200 piksel |
|
|---|---|---|---|---|---|
| maksimum genişlik | 100% | 540 piksel | 720 piksel | 960 piksel | 1140 piksel |
Aşağıdaki örneği açın ve kapsayıcı genişliğinin farklı kesme noktalarında değişeceğini görmek için tarayıcı penceresini yeniden boyutlandırın:
Örnek
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Sıvı Kabı
.container-fluidHer zaman ekranın tüm genişliğini kaplayacak tam genişlikte bir kap oluşturmak için sınıfı kullanın ( widthher zaman 100%):
Örnek
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Konteyner Dolgusu
Varsayılan olarak, kapsayıcılarda üst veya alt dolgu olmadan 15 piksel sol ve sağ dolgu bulunur. Bu nedenle, daha iyi görünmelerini sağlamak için genellikle fazladan dolgu ve kenar boşlukları gibi boşluk bırakma yardımcı programlarını kullanırız. Örneğin, .pt-3"16 piksellik bir üst dolgu ekle" anlamına gelir:
Örnek
<div class="container pt-3"></div>
BS4 Yardımcı Programlar Bölümümüzde, boşluk bırakma yardımcı programları hakkında çok daha fazlasını öğreneceksiniz .
Konteyner Kenarlığı ve Rengi
Kenarlıklar ve renkler gibi diğer yardımcı programlar da genellikle kaplarla birlikte kullanılır:
Örnek
İlk Bootstrap Sayfam
Bu kapsayıcının bir sınırı ve bazı ekstra dolguları ve kenar boşlukları vardır.
İlk Bootstrap Sayfam
Bu kapsayıcı, koyu bir arka plan rengine ve beyaz bir metne ve bazı ekstra dolgu ve kenar boşluklarına sahiptir.
İlk Bootstrap Sayfam
Bu kapsayıcı, mavi bir arka plan rengine ve beyaz bir metne ve bazı ekstra dolgu ve kenar boşluklarına sahiptir.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
BS4 Renkler Bölümümüz ve BS4 Yardımcı Programlar Bölümümüzde renkler ve kenarlık yardımcı programları hakkında çok daha fazlasını öğreneceksiniz .
Duyarlı Konteynerler
.container-sm|md|lg|xlDuyarlı kapsayıcılar oluşturmak için sınıfları da kullanabilirsiniz .
Konteynerin boyutu , max-widthfarklı ekran boyutlarında/görüntü alanlarında değişecektir:
| Sınıf |
Ekstra küçük <576 piksel |
Küçük ≥576 piksel |
Orta ≥768 piksel |
Büyük ≥992px |
Ekstra büyük ≥1200 piksel |
|---|---|---|---|---|---|
.container-sm |
100% | 540 piksel | 720 piksel | 960 piksel | 1140 piksel |
.container-md |
100% | 100% | 720 piksel | 960 piksel | 1140 piksel |
.container-lg |
100% | 100% | 100% | 960 piksel | 1140 piksel |
.container-xl |
100% | 100% | 100% | 100% | 1140 piksel |
Ö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>
Biliyor musun?
W3.CSS, Bootstrap 4'e mükemmel bir alternatiftir.
W3.CSS daha küçük, daha hızlı ve kullanımı daha kolay.
W3.CSS öğrenmek istiyorsanız, W3.CSS Eğitimimize gidin .