Sie 08
Wstęp do Bootstrap 4

Wstęp do Bootstrap 4 – jak podpiąć Bootstrapa do projektu.

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.

Jak podpiąć Bootstrapa 1

 

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.

Jak podpiąć Bootstrapa 2

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:

Jak podpiąć Bootstrapa do 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:

Bootstrap 4 projekt layoutu
Sponsorem Wyzwania jest Strefa Kursów.

Ciał! Natka.

1
Dodaj komentarz

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Ziemowit Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Ziemowit
Gość
Ziemowit

Podpowiadam że lepiej używać pełnej biblioteki jQuery niż tej ograniczonej wersji slim 😉
Bibliotekę można pobrać z strony głównej jQuery albo z CDN Google 😉