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:
Post się przydał? Oceń go proszę.
(7 głosów, średnia: 4,71 na 5)
Loading...Komentarze: 3 komentarze
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.
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