Bootstrap 5: Konteynerler

İçindekiler

    İçindekiler tablosunu göster

Bootstrap 5 Konteyner

Önceki bölümde Bootstrap'in kapsayıcı bir ağ gerektirdiğini öğrendiniz. site içeriğini sarmak için öğe.

Kaplar içerideki içeriği doldurmak için kullanılır bunlardan biri ve iki konteyner sınıfı mevcut:

  1. .container sınıfı, duyarlı bir sabit genişlikte kapsayıcı sağlar

  2. .container-fluid sınıfı, görünümün tüm genişliğini kapsayan tam genişlikte bir kapsayıcı sağlar

.container
.container-fluid

Sabit Konteyner

Duyarlı, sabit genişlikte bir kapsayıcı oluşturmak için .container sınıfını kullanın.

Genişliğinin (max-width) farklı ekran boyutlarında değişeceğini unutmayın:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

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>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

XXL kesme noktası (≥1400px) Bootstrap 5'te yeni iken Bootstrap 4'teki en büyük kesme noktası Ekstra büyüktür (≥1200px).

Akışkan (tam genişlikte kapsayıcı) kapsayıcı

Her zaman ekranın tüm genişliğini kaplayacak tam genişlikte bir kapsayıcı oluşturmak için .container-fluid sınıfını kullanın (width her zaman %100'dür):

Örnek

 <div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>

Konteyner Dolgusu

Varsayılan olarak kapların sol ve sağ dolgusu vardır, üst veya alt dolgusu yoktur. Bu nedenle, daha da iyi görünmelerini sağlamak için sıklıkla ekstra dolgu ve kenar boşlukları gibi aralama yardımcı programlarını kullanırız. Örneğin, .pt-5 "büyük bir üst dolgu ekleyin" anlamına gelir:

Örnek

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

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-5">
  <h1>My First Bootstrap Page</h1>
  <p>This container has an extra top padding.</p>
  <p>Try to remove the .pt-5 class to see the difference.</p>
</div>

</body>
</html>

Konteyner Kenarlığı ve Rengi

Kenarlıklar ve renkler gibi diğer yardımcı programlar da sıklıkla kaplarla 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>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container p-5 my-5 border">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a border and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

</body>
</html>

Daha sonraki bir bölümde renkler ve kenarlık işlevleri hakkında daha fazla bilgi edineceksiniz.

Duyarlı Konteynerler

Kabın ne zaman yanıt vermesi gerektiğini belirlemek için .container-sm|md|lg|xl sınıflarını da kullanabilirsiniz.

Kapsayıcının maksimum genişliği, farklı ekran boyutlarında/görüntü alanlarında değişecektir:

Class Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥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>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-3">
  <h1>Responsive Containers</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

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

</body>
</html>