Siatka / Grid wprowadzenie

11 096 3

Siatka Bootstrapa składa się z kontenerów (.container), które opisałem w poprzednim wpisie. Rzędów (.row), które służą do grupowania kolumn. No i właśnie samych kolumn (.col-*-*), które umieszczamy wewnątrz rzędów. Jest to najpopularniejszy element całego frameworka, dzięki gridowi możemy łatwo budować cały responywny szkielet strony. Ale od początku.

Kontener jest głównym elementem wewnątrz którego będziemy budowali naszą siatkę, służy nam do wyodrębnienia jakiejś części naszej witryny, przykładowo treści wpisu.
Treść wpisu powinna mieć jakiś tytuł, tworzymy sobie zatem rząd .row. Skoro mamy już tytuł to przydała by się treść, ją umieszczamy w kolejnym rzędzie. Pod treścią chcemy wstawić obok siebie trzy zdjęcia, dla nich przygotujemy kolejny rząd. Nasz kod po tym etapie będzie wyglądał następująco:

Kod

Mamy zatem przygotowane trzy sekcje, ale siatka wymaga od nas jeszcze kolumn. Bootstrap pozwala na stworzenie do 12 kolumn, gdy stworzymy ich więcej to automatycznie wyświetlą się one poniżej. Kolumna może mieć szerokość 1 (.col-sm-1), wtedy możemy umieścić ich 12 obok siebie. Może mieć szerokość 4 (.col-sm-4) i wtedy, jak się już pewnie domyślacie, w jednym rzędzie będziemy mieli trzy kolumny. Może mieć szerokość 6 (.col-sm-6) i wtedy kolumny będą dwie bo 6*2=12. Może mieć również szerokość 12 (.col-sm-12) co spowoduje, że otrzymamy jedną kolumnę o całej szerokości rzędu. Oczywiście możemy te wartości mieszać tworząc na przykład kolumnę o szerokości 6, trzy kolumny o szerokości 1 oraz jedną kolumnę o szerokości 3 (6+1+1+1+3=12).

Sekcja z tytułem oraz treścią mają zajmować całą szerokość rzędu, skorzystamy więc z klasy .col-sm-12. Natomiast chcemy by nasze zdjęcia były obok siebie, potrzebujemy zatem trzech kolumn o szerokości 4 . Nasz kod będzie wyglądał następująco:

Kod

Przykład

Tytuł wpisu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mam nadzieję, że powyższy przykład pokazał o co chodzi z zastosowaniem siatki. W kolejnym wpisie dowiecie się o rodzajach kolumn oraz przedstawię przykłady ich zastosowania.

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (43 głosów, średnia: 4,93 na 5)
Loading...

3 komentarzy w “Siatka / Grid wprowadzenie

Tomek

Człowieku wymiatasz lepiej niż stado szkolnych sprzątaczek. Po pierwszym wpisie pomyślałem „Fajnie, temat ciekawy ale pewnie wpisy będą się pojawiały raz na 1-2 tygodnie” A tu niespodzianka, wczoraj 2 dzisiaj ten wpis. Jak dla mnie super tempo 🙂 Tak trzymaj, chętnie nauczę się czegoś konkretnego o Bootstrapie 🙂

Krzysztof

Super to szkolenie, prosto i do celu…..jeszcze koło południa nie widziałem jak to ugryźć, teraz już stawiam szablony 🙂

Wielkie dzięki!

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*