#50a. Zastosowanie elementów CSS – Kolumnowy układ strony

Kolumnowy układ strony

Przed Wami dodaję pierwszą część zadania do rozwiązania, wykorzystującą wiedzę na temat Bootstrapa poznanego przy okazji ostatnich materiałów:

  1. Utwórz nowy projekt w codesandbox. Następnie dodaj podstawowy szkielet strony html.
  2. W sekcji body dodaj diva z klasą “menu”. Poniżej zamknij diva.
  3. Następnie dodaj kolejnego diva z klasą “header”. Poniżej zamknij diva.
  4. Kolejnym elementem strony będzie kontent. Stwórz element div z klasą “container”. Pod nim dodaj kolejnego diva z klasą “row”. Wewnątrz niego dodaj dwa takie same divy z klasami “col-xs-12” i “col-md-6”. Pozamykaj wszystkie divy.
  5. Kolejnym elementem będzie stopka. Utwórz diva z klasą “footer”. Wewnątrz dodaj diva z klasą “row”, a w nim dwa divy z klasą “col-xs-4”, a drugi z klasą “col-xs-8”. Pozamykaj wszystkie divy.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

compassionate-dew-pzz84

compassionate-dew-pzz84 danielminschinski

W kolejnym materiale dodam kontynuacje ćwiczenia. Rozwiniemy menu oraz jumbotron.

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