Container’lar(kapsayıcılar), belirli bir aygıt veya görünüm alanında içeriğinizi kapsayan, dolduran ve hizalayan Bootstrap’in temel yapı taşlarıdır.
Bootstrap Containers (kapsayıcılar) nasıl çalışır?
Container’lar, Bootstrap’teki en temel düzen öğesidir ve varsayılan grid sistemimizi kullanırken gereklidir . Kapsayıcılar, içlerinde içeriği tutmak, doldurmak ve (bazen) ortalamak için kullanılır.
Bootstrap üç farklı kapsayıcıyla birlikte gelir:
- .container, max-width her duyarlı kesme noktasında bir
- .container-fluid, width: 100% tüm kesme noktalarında
- .container-{breakpoint}, width: 100% belirtilen kesme noktasına kadar
Aşağıdaki tablo, her bir kabın max-width orijinal .container ile karşılaştırmasını ve .container-fluid her bir kesme noktası boyunca nasıl olduğunu göstermektedir.
Codepen Bootstrap Containers(kapsayıcılar) örneği için tıkla:
Bootstrap 5 Grid örnekleri için tıklayın
| Ekstra küçük <576 piksel | Küçük ≥576px | Orta ≥768px | Büyük ≥992 piksel | X-Large ≥1200px | XX-Büyük ≥1400 piksel | |
|---|---|---|---|---|---|---|
| .container | 100% | 540 piksel | 720 piksel | 960px | 1140 piksel | 1320px |
| .container-sm | 100% | 540 piksel | 720 piksel | 960px | 1140 piksel | 1320px |
| .container-md | 100% | 100% | 720 piksel | 960px | 1140 piksel | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140 piksel | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140 piksel | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Default container – Varsayılan kapsayıcı
Varsayılan .container sınıfımız duyarlı, sabit genişlikte bir kaptır, yani max-width her kesme noktasındaki değişiklikleri ifade eder.
<div class="container">
<!-- Content here -->
</div>
Responsive Containers – Duyarlı konteynerler
Duyarlı kapsayıcılar, belirtilen kesme noktasına ulaşılana kadar %100 genişlikte bir sınıf belirlemenize olanak tanır, ardından max-width daha yüksek kesme noktalarının her biri için URL’leri uygularız . Örneğin, .container-sm kadar geniş %100 başlamaktır sm kesme noktası onunla büyütmek nerede, ulaşıldığında md, lg, xl, ve xxl.
<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>Fluid containers – Sıvı, Akışkan Kaplar
.container-fluid Görüntü alanının tüm genişliğini kapsayan, tam genişlikte bir kap için kullanılır.
<div class="container-fluid">
...
</div>Containers Examples: Kapsayıcı Örnekleri
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Web Site Title -->
<title>Containers</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Internal CSS-->
<style>
.themed-container {
padding: .75rem;
margin-bottom: 1.5rem;
background-color: rgba(0, 123, 255, .15);
border: 1px solid rgba(0, 123, 255, .2);
}
</style>
</head>
<body>
<main>
<div class="container">
<hr class="my-4">
<h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
v5 adds a new <code>xxl</code> breakpoint.</p>
</div>
<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>
</main>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>Codepen Bootstrap Containers Example:
See the Pen Bootstrap5 Containers by Cihan Koç (@chnkc41) on CodePen.
Sass
Yukarıda gösterildiği gibi, Bootstrap istediğiniz düzenleri oluşturmanıza yardımcı olmak için önceden tanımlanmış bir dizi konteyner sınıfı oluşturur. Bu önceden tanımlanmış konteyner sınıflarını, _variables.scss onlara güç veren Sass haritasını (içinde bulunan ) 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 kaplarınızı da 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ğiniz hakkında daha fazla bilgi ve örnekler için, lütfen Grid dokümantasyonunun Sass bölümüne bakın .
