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

Subscribe
Powiadom o
guest
11 komentarzy
najnowszy
najstarszy oceniany
Inline Feedbacks
View all comments
Ziemowit
Ziemowit
3 lat temu

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
Ziemowit
3 lat temu

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 😉

Ziemowit
Ziemowit
3 lat temu
Reply to  Natka

Dziękuję – zainstalowany 😀

Mateusz
Mateusz
3 lat temu

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

mateusz
3 lat temu

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

Krzysztof
Krzysztof
3 lat temu

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.

Kamil
3 lat temu
Reply to  Natka

Niech się Pani nie przejmuje tym co piszą pozostali. Podzielenie tematu bootstrapa na róże wpisy to dobry pomysł. Temat jest tak rozległy, że nawet ujęcie go w połowie na blogu zajmie masę czasu i wpisów. Pozdrawiam!