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- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
