Bootstrap 4 pojemniki
Kontenery
Dowiedziałeś się z poprzedniego rozdziału, że Bootstrap wymaga elementu zawierającego, aby zawinąć zawartość witryny.
Kontenery służą do wypełniania zawartości w nich zawartej, a dostępne są dwie klasy kontenerów:
- Klasa
.containerzapewnia responsywny kontener o stałej szerokości - Klasa
.container-fluidzapewnia kontener o pełnej szerokości , obejmujący całą szerokość okna roboczego
Naprawiono pojemnik
Użyj .containerklasy, aby utworzyć responsywny kontener o stałej szerokości.
Zwróć uwagę, że jego szerokość ( max-width) zmieni się na różnych rozmiarach ekranu:
|
Bardzo mały <576px |
Mały ≥576 pikseli |
Średni ≥768px |
Duży ≥992px |
Bardzo duże ≥1200px |
|
|---|---|---|---|---|---|
| maksymalna szerokość | 100% | 540px | 720px | 960px | 1140px |
Otwórz poniższy przykład i zmień rozmiar okna przeglądarki, aby zobaczyć, że szerokość kontenera zmieni się w różnych punktach przerwania:
Przykład
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Pojemnik na płyn
Użyj .container-fluidklasy, aby utworzyć kontener o pełnej szerokości, który zawsze będzie obejmował całą szerokość ekranu ( widthjest zawsze 100%):
Przykład
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Wypełnienie kontenera
Domyślnie kontenery mają dopełnienie lewe i prawe 15 pikseli, bez górnego lub dolnego dopełnienia. Dlatego często używamy narzędzi do odstępów , takich jak dodatkowe dopełnienie i marginesy, aby wyglądały jeszcze lepiej. Na przykład .pt-3oznacza „dodaj górne wypełnienie 16px”:
Przykład
<div class="container pt-3"></div>
Więcej informacji na temat narzędzi do rozmieszczania można znaleźć w naszym rozdziale poświęconym programom narzędziowym BS4 .
Obramowanie i kolor kontenera
Inne narzędzia, takie jak obramowania i kolory, są również często używane razem z kontenerami:
Przykład
Moja pierwsza strona Bootstrap
Ten pojemnik ma obramowanie i dodatkowe wypełnienie i marginesy.
Moja pierwsza strona Bootstrap
Ten kontener ma ciemne tło i biały tekst oraz dodatkowe wypełnienie i marginesy.
Moja pierwsza strona Bootstrap
Ten kontener ma niebieskie tło i biały tekst oraz dodatkowe dopełnienie i marginesy.
<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>
Dużo więcej o kolorach i narzędziach obramowania dowiesz się z naszego rozdziału dotyczącego kolorów BS4 i rozdziału o narzędziach BS4 .
Responsywne kontenery
Możesz również użyć .container-sm|md|lg|xlklas do tworzenia responsywnych kontenerów.
Kontener max-widthzmieni się na różnych rozmiarach ekranu/widoku:
| Klasa |
Bardzo mały <576px |
Mały ≥576 pikseli |
Średni ≥768px |
Duży ≥992px |
Bardzo duże ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
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>
Czy wiedziałeś?
W3.CSS to doskonała alternatywa dla Bootstrap 4.
W3.CSS jest mniejszy, szybszy i łatwiejszy w użyciu.
Jeśli chcesz nauczyć się W3.CSS, przejdź do naszego samouczka W3.CSS .