Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęKontenery
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Kontenery są najbardziej podstawowym elementem układu w Bootstrapie i są wymagane przy korzystaniu z domyślnego systemu siatki. Kontenery służą do zawierania, wypełniania i (czasami) wyśrodkowywania zawartości wewnątrz nich. Chociaż kontenery można zagnieżdżać, większość układów nie wymaga zagnieżdżonego kontenera.
Oto jak wygląda kontener w kodzie:
<div class="container">
</div>
Nic specjalnego. Po prostu div z klasą container.
Ale teraz sprawdźmy, jak będą się zachowywać kontenery w naszym projekcie Bootstrap, który rozpoczęliśmy w poprzedniej lekcji.
Dodaj poniższy kod do swojego projektu, bezpośrednio pod otwierającym znacznikiem <body>.
<div class="container" style="height: 500px; background-color: red">
</div>
Uwaga: W celach demonstracyjnych dodaliśmy do kontenera styl CSS w linii, który nadaje mu wysokość 500 pikseli i kolor czerwony.
Jest to tylko po to, aby umożliwić Ci wizualne zobaczenie zmiany zachowania kontenera, ponieważ domyślnie byłby niewidoczny (domyślnie kontener nie ma koloru, a jego wysokość jest dostosowywana do zawartości - jeśli nie ma zawartości, nie ma też wysokości). Usuniemy ten styl CSS w późniejszym etapie.
Po dodaniu tego kodu do swojego projektu, zapisz plik i odśwież przeglądarkę. Powinieneś zobaczyć czerwony prostokąt z białymi marginesami po bokach. To jest nasz kontener. Czyż nie jest piękny? :)
Teraz stopniowo zmniejszaj rozmiar okna przeglądarki. Gdy spadniesz poniżej 576 pikseli, zobaczysz, że marginesy całkowicie znikają, a kontener zajmuje 100% dostępnej szerokości.
To bardzo pożądane zachowanie, które pozwala nam tworzyć responsywne układy, dostosowane zarówno do dużych ekranów komputerów stacjonarnych, jak i mniejszych ekranów urządzeń mobilnych.
Jak łatwo się domyślić, marginesy są potrzebne na dużych ekranach, ale nie ma na nie miejsca na małych ekranach - dlatego kontenery Bootstrapa dostosowują swoją szerokość do szerokości ekranu.
Ten punkt graniczny 576 pikseli (px), poniżej którego marginesy znikają, a kontener rozciąga się na pełną szerokość, nazywa się punktem przerwania (ang. breakpoint). Jest to bardzo ważne pojęcie i będziemy do niego często się odwoływać.
Dzięki punktom przerwania Bootstrap daje nam dużą elastyczność i umożliwia nam zdecydowanie, od jakiej szerokości ekranu nasz kontener (jak i inne elementy układu, o których dowiemy się później) ma usunąć marginesy i rozciągnąć się na pełną szerokość.
Spójrz na poniższą tabelę:
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.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 |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Czy widzisz te fragmenty -sm , -md, -lg itd., dodane do klasy
container? Reprezentują one punkty przerwania (sm dla small, md dla medium,
lg dla large, itd.) i określają, poniżej jakiej szerokości marginesy są usuwane, a container
zaczyna rozciągać się na pełną dostępną szerokość (czyli 100% szerokości podanej w tabeli).
Domyślny kontener (czyli klasa container, bez dodatkowych znaków) ma punkt przerwania o szerokości 576px. Jeśli chcesz, aby kontener rozciągał się na pełną szerokość na ekranach o szerokości mniejszej niż, na przykład, 992px, musisz dodać do klasy kontenera fragment xl.
Wtedy powinno to wyglądać tak:
<div class="container-xl">
</div>
Teraz w swoim projekcie zmieńmy nasz kontener na kontener z punktem przerwania xl i stopniowo zmniejszaj szerokość ekranu. Zobaczysz, że marginesy znikną znacznie wcześniej niż poprzednio.
<div class="container-xl" style="height: 500px; background-color: red">
</div>
Jeśli chcesz, aby twój kontener zawsze rozciągał się na pełną szerokość, niezależnie od punktu przerwania (czyli zarówno na małych, jak i dużych ekranach), użyj klasy container-fluid.
<div class="container-fluid">
</div>
I to na razie tyle, jeśli chodzi o kontenery. Nie było to trudne, biorąc pod uwagę, jak przydatne jest to narzędzie, prawda?
Teraz zmień kontener w swoim projekcie na domyślny. Pozostaw styl CSS w linii na razie, ponieważ będziemy go potrzebować w następnej lekcji.
<div class="container" style="height: 500px; background-color: red">
</div>
Jeśli coś było dla Ciebie niejasne, daj mi znać na Twitterze!
O autorze
Michal Szymanski
Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.
Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.
