Bootstrap tutorial logo

Jumbotron

autor: Robert

11 listopada 2013

Zastosowaniem jumbotrona jest skupienie uwagi potencjalnego gościa twojej strony na danej akcji. Podobnie jak na mojej stronie głównej jest właśnie jumbotron z czerwonym przyciskiem zachęcającym do wejścia dalej (Może nie do końca bardzo zachęca bo zbyt słabo wyróżnia się na stronie;)y ale nie będziemy tu dyskutować o tzw. „call to action”).

Jumbotron tworzy szary prostokąt w którym możemy zawrzeć ważne informacje, wycentrować je, dołożyć przycisk itp.

Istnieją 2 możliwości jego zastosowania

Jumbotron wewnątrz kolumny

Jeśli chcemy by nasz jumbotron miał szerokość kolumny, którą zastosujemy na stronie, wewnątrz niej korzystamy z kodu:

Jumbotron szerokości ekranu

Jeśli chcemy by jumbotron miał szerokość całego ekranu korzystamy z kodu:

Proszę zauważyć, że w tym przypadku otwieramy nowy kontener wewnątrz jumbotronu a co za tym idzie, wszystkie inne kontenery muszą być pozamykane przed zastosowaniem tego kodu.

No i stronka z przykładem:

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (7 głosów, średnia: 4,71 na 5)
Loading...

Krzysztof 12 listopada 2013 o 00:55

Po pierwsze dziękuję za Tutoriale.
Dużo szczegółów i przykładów – bardzo pomocne, najlepsze co dotychczas znalazłem o Bootstrapie po polsku.
Po drugie mała uwaga – w kilku ostatnich postach polskie znaki wykrzaczają – kodowanie strony chyba zaszwankowało (sprawdziłem pod chrome i ie11).
I ostatnie – sugestia na kolejny artykuł – może jakiś przykładowy i uniwersalny gotowiec zawierający główne elementy? Taki punkt wyjścia do budowania i stylowania stron … może źle szukałem ale na szybko nic takiego nie znalazłem a wiem że niektóre frameworki dostarczają sporo takich rozwiązań i cieszy się to popularnością :)
Jeszcze raz dziękuję za tutoriale! przekonały mnie do spróbowania bootstrapa.

Odpowiedz
Robert 12 listopada 2013 o 09:06

Co do gotowca to proponuję zajrzeć na przykład ze strony http://www.kursbootstrap.pl/examples/homepage.html Tutaj znajduje się wykorzystanie wielu elementów poruszonych w tutorialu.

Odpowiedz
Michał 31 maja 2015 o 23:04

Szukam tego jumbotrona na stronie głównej. Czy chodziło o „Kurs Twitter Bootstrap (….) Sprawdź to” ? To jednak wygląda na well.

Dzięki za kurs, kawał przydatnego materiału.

Odpowiedz