Wprowadzenie do Bootstrap 4

9 518 4

Jak już wiecie Bootstrap jest zbiorem snippetów HTML, klas CSS oraz skryptów JS dzięki którym można dużo szybciej stworzyć responsywną stronę internetową. Posiada on siatkę, dzięki której możemy stworzyć szkielet naszej witryny a także wiele gotowych elementów.

W tym wpisie dowiemy się jak zacząć naszą przygodę, skąd wziąć pliki Bootsrtapa oraz jak zaimportować je do naszego pliku.

Jak wiemy, dokument HTML składa się z sekcji head w której umieszczamy metatagi, importujemy pliki CSS itp oraz sekcji body, która jest „ciałem” dokument, więc znajduje się w niej nasz kod. Podstawowa zawartość naszego pliku powinna wyglądać następująco:

Kod

Jak widać w powyższym kodzie, w sekcji head dokumentu importujemy sobie pliki CSS Bootstrapa korzystając z serwerów CDN. Oznacza to tyle, że nie musimy mieć tych plików u siebie na serwerze a zostają nam one dostarczone przez usługę CDN (Content Delivery Network). Pamiętajcie by zawsze sprawdzać jaka jest aktualna wersja i zamieszczać ją w swoich projektach. Na daną chwilę adres aktualnej wersji jest podany na stronie https://getbootstrap.com/docs/4.1/getting-started/introduction/

Przechodzimy teraz do sekcji body. Dobrze jest umieszczać odwołania do plików JS na końcu tej sekcji, zaraz przed jej zamknięciem. Zatem przed znacznikiem </body> będziemy importować do naszej strony bibliotekę JQuery, Tether oraz samego Bootstrapa. Ważna jest wymieniona przeze mnie kolejność, gdyż Bootstrap wymaga do prawidłowego działania dwóch pozostałych bibliotek. Tutaj również skorzystamy z CDN.

Gdy mamy zaimporowane do naszego dokumentu wszystkie wymagane pliki to możemy rozpocząć tworzenie strony opartej o Bootstrap 4.

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (22 głosów, średnia: 4,68 na 5)
Loading...

4 komentarzy w “Wprowadzenie do Bootstrap 4

Patryk

Gdzie można znaleźć skrypt do Tethera i samego Bootstrapa, na oficjalnej stronie podają tylko JS i CSS. Z góry dziękuję.

Kasia

Cześć!

Dzięki za Twoją stronkę!

Powiedz mi proszę, jeśli chcę zacząć projekt od takiej strony: http://getbootstrap.com/docs/4.1/examples/album/

to jak mam ją pobrać? Czy muszę pobierać skrypty z CDN, czy można mieć je lokalnie, jeśli tak, to która paczka będzie odpowiednia?

Pozdrawiam i z góry dzięki!

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*