Kontenery Bootstrap 5

Kontenery Bootstrap 5

Z poprzedniego rozdziału nauczyłeś się, że Bootstrap wymaga elementów do opakowania zawartości strony.

wypełniamy zawartość w kontenerze i mamy dwa rodzaje klas kontenera:

  • .container klasa zapewnia responsywny, stałozakresowy kontener
  • .container-fluid klasa zapewnia kontener pełnoszeroki, który zajmuje całą szerokość okna

stałozakresowy kontener

używając .container klasa tworzy responsywny, stałozakresowy kontener.

Proszę zauważyć, że jego szerokość (max-widthzmienia się w zależności od rozmiaru ekranu:

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

Otwórz poniższy przykład i zmień rozmiar okna przeglądarki, aby zobaczyć, jak zmienia się szerokość kontenera w różnych punktach przecięcia:

Przykład

<div class="container">
  <h1>Moja pierwsza strona Bootstrap</h1>
  <p>Jest to pewien tekst.</p>
</div>

Spróbuj sam

XXL punkt przecięcia (≥1400px) jest nowością w Bootstrap 5, podczas gdy największym punktem przecięcia w Bootstrap 4 jest Extra large (≥1200px).

kontenera płynnego

używając .container-fluid klasa tworzy kontener pełnoszeroki, który zawsze zajmuje całą szerokość ekranu (szerokość zawsze 100%）：

Przykład

<div class="container-fluid">
  <h1>Moja pierwsza strona Bootstrap</h1>
  <p>Jest to pewien tekst.</p>
</div>

Spróbuj sam

wypełnienie kontenera

Domyślnie, kontener ma wypełnienie boczne (boczne marginesy), ale nie ma wypełnienia górnego ani dolnego (górne i dolne marginesy). Dlatego często używamy narzędzia do spacing（narzędzia），np. dodatkowe wypełnienie i marginesy, aby wyglądały lepiej. Na przykład:.pt-5 oznacza "dodaj dużygórna wypełnia：

Przykład

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

Spróbuj sam

Krawędzie i kolory kontenerów

Inne narzędzia, takie jak krawędzie i kolory, są często używane razem z kontenerami:

Przykład

<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>

Spróbuj sam

W dalszych rozdziałach nauczysz się więcej o narzędziach kolorów i krawędzi.

reagujących na rozmiar kontenerów

Możesz również używać .container-sm|md|lg|xl określają, kiedy kontener powinien reagować.

klasy kontenera max-width Zmienia się w różnych rozmiarach ekranu/viewport:

Klasa 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

Przykład

<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>

Spróbuj sam