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 😉