Dzisiaj opowiem Ci o kontenerach w Bootstrapie.
Ten wpis jest kontynuacją poprzednich wpisów na temat Bootstrapa:
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.
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>.
1 2 3 4 5 |
<div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, sit. Suscipit libero iusto veniam molestias id dolor nobis recusandae modi nesciunt alias. Dignissimos reiciendis iste pariatur sunt ea minima quasi?</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, neque perspiciatis, totam architecto eum accusantium asperiores doloribus possimus, repellendus praesentium cum animi perferendis. Explicabo, dolor dicta qui dolore impedit error?</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum aspernatur omnis, modi autem deserunt rerum incidunt assumenda distinctio. Commodi, neque quam minima et officiis blanditiis sapiente ex necessitatibus adipisci quisquam.</p> </div> |
.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ść.
1 2 3 4 5 |
<div class="container-fluid"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, sit. Suscipit libero iusto veniam molestias id dolor nobis recusandae modi nesciunt alias. Dignissimos reiciendis iste pariatur sunt ea minima quasi?</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, neque perspiciatis, totam architecto eum accusantium asperiores doloribus possimus, repellendus praesentium cum animi perferendis. Explicabo, dolor dicta qui dolore impedit error?</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum aspernatur omnis, modi autem deserunt rerum incidunt assumenda distinctio. Commodi, neque quam minima et officiis blanditiis sapiente ex necessitatibus adipisci quisquam.</p> </div> |
Tak wygląda porównanie obu siatek. Na górze mamy <div> z klasą .container, na dole <div> z klasą .container-fluid.
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!
Nie ma jednego uniwersalnego sposobu tworzenia breakpointów.
Możesz kierować się np tymi z Bootstrapa, ale najlepiej to sprawdzaj swój projekt na różnych szerokościach ekranu i tam gdzie się coś wysypuje, poprawiaj.
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 😉
Crayon Syntax Highlighter
Dziękuję – zainstalowany 😀
Kiedy następny wpis na temat Bootstrap 4? Bo ten jest trochę przykrótki. 😉
Moim zdaniem nazywanie .conainer siatka, to ogromny blad. Siatka (grid) to dwie zupelnie inne rzeczy
Masz rację. Zmieniłam ten zapis.
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.
Krzysztofie, gdybym jednocześnie wrzuciła całość wyszłaby z tego olbrzymia kobyła. A przez dzielenie tego na części stworzy się fajny zbiór krótkich wpisów w temacie. Na koniec zrobię „spis treści” z linkowaniem do wcześniejszych wpisów.
Porady i myki będą. Wszystko w swoim czasie.
I dziękuję Ci za ten komentarz. Dał mi do myślenia jak to fajnie rozplanować.
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!