#50b. Zastosowanie elementów CSS – Menu i jumbotron

Menu i jumbotron

Menu, jak już doskonale wiesz, służy do nawigacji. W naszym przypadku będą to puste odnośniki, ponieważ na potrzeby ćwiczenia nie potrzebujemy się przenosić do innych podstron. Tworzenie menu to czynność obowiązkowa na każdej stronie www.

Jumbotron to element, który zawiera najważniejsze informację dla klienta – np. ofertę produktu lub wezwanie do akcji (np. zapis do newslettera). Przejdźmy do kontynuacji ćwiczenia z materiału 50a.

  1. Wewnątrz elementu z klasą menu utwórz nieuporządkowaną listę ul z klasami nav i nav-pills.
  2. Umieść w niej pięć elementów li, a następnie wewnątrz każdego z nich dodaj link z pustym odnośnikiem.
  3. Przejdźmy do jumbotrona. W elemencie z klasą header utwórz element div z klasą jumbotron.
  4. Następnie wewnątrz niego dodaj element z klasą container. Wewnątrz utwórz nagłówek pierwszego stopnia i paragraf.
  5. Poniżej dodaj przycisk z klasami btn, btn-default, btn-lg.

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

musing-worker-dsihu

musing-worker-dsihu danielminschinski

Utworzyliśmy menu oraz element który pomaga użytkownikowi podjąć działanie na naszej stronie. Bez tworzenia styli możemy dzięki klasom Bootstrapa. Oczywiście zachęcam do stylowania za pomocą arkusza stylów. Miałem na celu tylko zaprezentowanie możliwości frameworka.

W kolejnym materiale kontynuacja – stworzymy kontent strony.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA