Bootstrap, düzen oluşturmak için konteyner kavramını kullanır. Konteynerler, içeriklerinizi düzenlemek ve belirli bir genişlikte hizalamak için temel bir yapıdır. Bootstrap'te iki ana tür konteyner vardır: sabit konteynerler ve esnek konteynerler.
1. Sabit Konteynerler (Fixed Containers)
Sabit konteynerler, belirli bir genişlikte olan konteynerlerdir. Sayfanın genişliğine göre belirli bir maksimum genişliğe sahiptirler ve bu, içeriğinizi ortalayarak görsel olarak hoş bir düzen oluşturmanıza yardımcı olur. Sabit konteynerler için kullanılan sınıf:
-
.container
Örnek Kullanım:
<div class="container">
<h1>Başlık</h1>
<p>Bu bir sabit konteyner içerisindeki içeriktir.</p>
</div>
2. Esnek Konteynerler (Fluid Containers)
Esnek konteynerler, her ekran boyutunda %100 genişlik kaplar. Yani, ekran boyutu ne olursa olsun, konteyner her zaman ekranın genişliğine uyum sağlar. Esnek konteyner için kullanılan sınıf:
-
.container-fluid
Örnek Kullanım:
<div class="container-fluid">
<h1>Başlık</h1>
<p>Bu bir esnek konteyner içerisindeki içeriktir.</p>
</div>
Konteynerlerin Kullanımı
Konteynerler, sayfanızdaki düzeni ve hiyerarşiyi oluşturmanın temelini oluşturur. İçeriklerinizi yapılandırmak için, satırlar (rows) ve sütunlar (columns) ile birlikte kullanılır. Örneğin:
<div class="container">
<div class="row">
<div class="col-md-4">Sütun 1</div>
<div class="col-md-4">Sütun 2</div>
<div class="col-md-4">Sütun 3</div>
</div>
</div>
Sonuç
Konteynerler, Bootstrap ile responsive tasarım oluşturmanın temel taşlarıdır. Sabit ve esnek konteynerleri kullanarak, içeriğinizi etkili bir şekilde düzenleyebilir ve farklı ekran boyutlarına uyum sağlayabilirsiniz. Bu, kullanıcı deneyimini artırır ve sayfanızın düzenini daha profesyonel hale getirir.