Jumbotron

1 015 0
Jeśli korzystaliście z Bootstrap 3 to możecie kojarzyć element o nazwie „Well” co po polsku znaczy „studnia” ale nie wiem dlaczego, ktoś to tak nazwał;) W Bootstrap 4 ów element zastąpił Jumbotron, nazwa równie dziwna, ale dowiedziałem się, że jest to określenie telebimu, co może sprowadzić nas na trop czemu służy ten element. A służy on do wyróżniania elementów na naszej stronie. Tworząc komercyjne strony stosujemy elementy „CTA – Call to action”, które zachęcają klienta do skontaktowania się z nami czy zamówienia produktu, który jest obecnie w promocji lub jakiejś innej akcji, która była by dla nas pożądana. Oczywiście podstawowy jumbotron jest tylko szarym elementem ale przecież nikt nie zabrania nam modyfikowania Bootstrapa:) Stworzenie tego elementu ogranicza się do diva z klasą .jumbotron i umieszczeniu w nim treści, czy to nagłówków, czy przycisków, czy zwykłego tekstu.

Podstawowy przykład

Przykład

Hello, world!

To jest jakiś ważny tekst wewnątrz jumbotronu


Jumbotron może nam służyć jako podstawa do budowania elementów CTA

Kliknij mnie!

Kod

Jumbotron na całą szerokość

Jeśli chcemy by nasz jumbotron zajmował całą szerokość i nie miał zaokrąglonych rogów to musimy najpierw stworzyć jumbotron z klasami .jumbotron .jumbotron-fluid a następnie w nim umieścić diva z klasą .container-fluid lub .container

Przykład

Hello, world!

To jest jakiś ważny tekst wewnątrz jumbotronu


Jumbotron może nam służyć jako podstawa do budowania elementów CTA

Kliknij mnie!

Kod

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

Chcesz coś napisać?

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

*

*