Dzisiaj kontynuujemy nasz wstęp do Bootstrap 4. Będzie o tym, jak podpiąć Bootstrapa do projektu.

Jeśli jeszcze nie bardzo wiesz o co chodzi z HTML i CSS, a bardzo chciałbyś zacząć i od razu z wysokiego C – czyli ze stworzeniem własnej strony internetowej, zapraszam Cię serdecznie do mojego kursu Pokaż Stronę Światu. Przeczytaj opinie o kursie i sprawdź czy jest to produkt dla Ciebie.

13 sierpnia 2018 roku startuje na blogu darmowe Wyzwanie – Poznam Bootstrapa 4 ze Strefą Kursów. Każda zapisana osoba będzie miała okazję poznać to narzędzie i wyrobić sobie opinie czy warto na nim pracować czy też nie.

Dzisiaj na blogu znajdziesz wstęp do Bootstrap 4 – 2 część – jak podpiąć Bootstrapa do projektu.

Zobacz część pierwszą wpisu – Wstęp do Bootstrapa.

Jak podpiąć Bootstrapa do projektu?

Istnieje kilka możliwości podpięcia plików Bootstrapa do naszego projektu. W tym miejscu przedstawię Ci dwie najczęściej używane formy.

Ściągnięcie Bootstrapa na dysk

Aby zacząć pracę z Bootstrapem wystarczy, że wejdziesz na stronę https://getbootstrap.com/docs/4.0/getting-started/introduction/i klikniesz na button Download.

Następnie na dysku zapisz paczkę z plikami. Kolejnym krokiem jest rozpakowanie paczki i umieszczenie plików w odpowiednich folderach naszego projektu.

Na tej stronie znajdziesz informacje, jakie pliki znajdują się w paczce do pobrania https://getbootstrap.com/docs/4.0/getting-started/contents/#comparison-of-css-files

Na początek w zupełności wystarczy Ci pobrać plik bootstrap.min.css – jest to zminifikowany plik Bootstrapa. Ten plik zawiera wszystkie komponenty Bootstrapa.

Gdybyś chciał np. Korzystać w swoim projekcie jedynie z Grida Bootstrapa, wystarczy, że do swojego projektu podepniesz plik bootstrap-grid.min.css.

Jeśli w swoim projekcie chciałbyś korzystać z komponentów JavaScript Bootstrapa powinieneś pobrać również plik bootstrap.min.js.

Gdy już wybrane pliki masz gotowe, wystarczy je podpiąć pod strukturę projektu.

Jak powinna wyglądać struktura projektu? To zależy od projektu ?. Ale najczęściej u mnie wygląda to tak:

• assets – tu umieszczamy grafiki;

• src – w tym folderze znajdzie się plik index.html oraz podfoldery:

  • css – pliki ze stylami m.in. style.css
  • js – pliki z JavaScript m.in. script.js

• vendor – to tu umieszczamy pliki z zewnętrznych bibliotek, w tym przypadku pliki z Bootstrapa

Jednak, jak sam widzisz, ten sposób jest nieco uciążliwy. Przeglądarka musi naprawdę sporo plików ładować, musisz je wrzucać do odpowiednich folderów. A przecież programista lubi szybkie rozwiązania.

W ten zgrabny sposób przechodzimy do metody przeze mnie rekomendowanej, czyli:

Pobranie Bootstrapa za pomocą serwerów CDN

Pobranie Bootstrapa 4 za pomocą serwerów CDN jest dziecinnie łatwe i szybkie. Wchodzimy na stronę: https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdni kopiujemy te linki do naszego projektu:

Jeśli będziemy używać JavaScript nie możemy zapomnieć o skopiowaniu odnośników do  JavaScript i jQuery:

A tak to powinno wyglądać w naszym projekcie:

Gdy już mamy podpiętego Bootstrapa możemy przystąpić do pracy nad naszymi projektami.

Jeśli jeszcze nie dołączyłeś do Wyzwania a chciałbyś poznać lepiej Bootstrapa 4 wypełnij formularz pod tym linkiem – dołącz do Wyzwania Poznam Bootstrap 4 ze Strefą Kursów.

Tak będzie wyglądał layout, który wspólnie zakodujemy krok po kroku:

Sponsorem Wyzwania jest Strefa Kursów.

Ciał! Natka.