Sie 29
Wstęp do Bootstrap 4

Wstęp do Bootstrapa 4 – Kontenery w Bootstrapie

Dzisiaj opowiem Ci o kontenerach w Bootstrapie.


Ten wpis jest kontynuacją poprzednich wpisów na temat Bootstrapa:

Wstęp do Bootstrapa 4

Wstęp do Bootstrapa 4 – Jak podpiąć pliki do projektu


 

Kontenery w Boostrapie

 

Bootstrap 4 oparty jest na Flexboxie. Kontenery,  są niezbędnymi elementami do zbudowania responsywnej strony internetowej. Używamy je za każdym razem, gdy tworzymy nową sekcję w naszym projekcie.

Bootstrap przygotował 2 rodzaje kontenerów .container i .container-fluid.

 

.container

 

Jest to klasa kontenera, która posiada maksymalną szerokość 1140px. Nie rozciąga się na cały ekran. Ten kontener jest wyśrodkowany i posiada boczne marginesy.

Klasa .container ma różną szerokość, w zależności od rozdzielczości ekranu. Szerokość 1140px przyjmuje dla urządzeń o rozdzielczości większej bądź równej 1200px. Dla urządzeń o rozdzielczości do 992px przyjmuje maksymalną szerokość 960px, dla urządzeń o rozdzielczości do 768px przyjmuje maksymalną szerokość 720px. A dla urządzeń o rozdzielczości większej bądź równej 576px przyjmuje maksymalną szerokość 540px. Dla urządzeń o mniejszych rozdzielczościach, szerokość jest ustawiana na auto.

 

kontenery w Bootstrapie

Aby go użyć należy stworzyć <div> z klasą .container, a wewnątrz <div> umieścić treść strony w naszym przykładzie kilka tagów <p>.

 

 

kontenery w Bootstrapie

 

.container-fluid

 

Ten rodzaj kontenera rozciąga się na całą szerokość ekranu. Jest on przydatny, gdy chcemy mieć jakąś sekcję rozciągniętą na 100% – np. sekcje z menu.

 

Aby go stworzyć należy dodać <div> z klasą .container-fluid oraz wewnątrz <div> umieścić naszą treść.

 

 

kontenery w Bootstrapie

Tak wygląda porównanie obu siatek. Na górze mamy <div> z klasą .container, na dole <div> z klasą .container-fluid.

 

kontenery w Bootstrapie

11
Dodaj komentarz

avatar
5 Comment threads
6 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
KamilZiemowitMateuszNatkamateusz Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Ziemowit
Gość

Oraz proszę o zaprezentowania Qmedia queries dla punktów max-width oraz min-width (dwa typy tworzenia www).
Chciałbym mieć czarno na białym z jaką wartością tworzyć te punkty bo jedni mówią tak inni inaczej i jestem skołowany…
Pozdrawiam!

Ziemowit
Gość

Jakiego pluginu WordPress używasz aby zaprezentować kod??
Sam piszę bloga i jestem ciekaw…
Pozdrawiam i Dziękuję za kurs o Bootstrap – przydał się do projektów 😉

Mateusz
Gość
Mateusz

Kiedy następny wpis na temat Bootstrap 4? Bo ten jest trochę przykrótki. 😉

mateusz
Gość

Moim zdaniem nazywanie .conainer siatka, to ogromny blad. Siatka (grid) to dwie zupelnie inne rzeczy

Krzysztof
Gość
Krzysztof

Trzeci raz łudzę się, że przeczytam solidną dawnkę wartościowych informacji o B4 i trzeci raz się rozczarowuję ;-( dobry patent na blogowanie – biorę dokumentację i skryptuję ją jak notatki na studiach, w częściach, w formie postów na blogu. Jako czytelnik oczekiwałbym jakiś porad, myków, jak fajnie wykorzystać to co opisane w temacie posta. Nie podoba mi się, choć szanuję za zapał do blogowania.