Tworzenie strony

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Hej, to bardzo ekscytujący moment! Wiesz dlaczego?

Już opanowałeś teoretyczne podstawy najważniejszych tematów Bootstrapa. Teraz możemy podwinąć rękawy i dobrze się bawić podczas nauki.

Stworzymy prawdziwy projekt. Będzie to piękna strona landingowa z imponującą fotografiką rozciągniętą na pełny ekran.

Kliknij poniższy przycisk, aby zobaczyć jej finalną wersję:

Zaczynamy!

Krok 1 - przygotuj plik index.html

W folderze naszego projektu, który przygotowaliśmy w poprzednich lekcjach, znajdują się pozostałości kodu z lekcji dotyczącej siatki.

                                  
                                    <div class="container" style="height: 500px; background-color: red">

  <div class="row" style="background-color: blue;">
    I am a first row
  </div>

  <div class="row" style="background-color: lightblue;">
    I am a second row
  </div>

</div>
                                  
                                

Usuń to, abyśmy mogli zacząć od czystego dokumentu.

Krok 2 - przygotuj podstawową strukturę

Nasz projekt potrzebuje podstawowej struktury, aby zachować porządek w kodzie.

Na pierwszy rzut oka może się to nie wydawać tak istotne, ale docenisz ten podejście, gdy ilość kodu zacznie rosnąć wykładniczo.

Dodaj poniższy kod do swojego pliku index.html:

                                  
                                    <!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>
  <div class="container">

  </div>
</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->
                                  
                                

Po zapisaniu pliku i odświeżeniu przeglądarki, zobaczysz pustą stronę. To w porządku, ponieważ dodana przez nas struktura nie ma jeszcze żadnych elementów do wyrenderowania.

Ale to się niedługo zmieni. Kliknij "dalej", aby przejść do następnej lekcji, gdzie stworzymy nawigację.