#51. Bootstrap + JavaScript – wprowadzenie

Wprowadzenie do komponentów JS w Bootstrapie

W najbliższym czasie zapoznamy się z komponentami Javascript udostępnionymi w Bootstrapie. Udostępniają one interaktywną zawartość na stronie oraz elementy dynamiczne między innymi tak zwane karuzele czy modale. W przykładzie zobaczysz stronę na której zastosowałem wspomniane elementy.

Od dłuższego czasu omawiam Bootstrapa na moim blogu. A więc, jeżeli jesteś od początku z materiałami, to wiesz że Bootstrap umożliwia szybkie i łatwe tworzenie stron internetowych. Framework staję się pożyteczny, dzięki predefiniowanym komponentom, które niewielkim nakładem pracy można gustownie ostylować.

W poniższym przykładzie sprawdź jakie daje możliwości Bootstrap. Spróbuj przewinąć slajd w karuzeli. Klikając na przycisk, otworzy się modal. Na koniec pobaw się z responsywnością strony – zmniejsz okienko i sprawdź jak świetnie framework radzi sobie w każdej sytuacji.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

romantic-khayyam-d84x2

romantic-khayyam-d84x2 danielminschinski

Podpinanie wymaganych bibliotek Javascript

W materiałach o komponentach CSS Bootstrapa nauczyliśmy się jak ‘podpinać’ plik CSS Bootstrapa, żebyśmy mogli korzystać z niego na naszej stronie – pora zrobić to samo z plikami wymaganymi przez komponenty Javascript Bootstrapa, które poznamy w tym materiale.

Zanim zaczniemy, musisz wiedzieć że komponenty Javascript w Bootstrapie wymagają biblioteki jQuery do poprawnego działania – będziemy musieli umieścić ją tuż przez plikiem Bootstrapa, żeby całość mogła działać poprawnie.

Jak dołączyć plik Javascript do strony? Wystarczy dodać tag <script> tuż przed tagiem zamykającym element <body>. Następnie musimy przypisać elementowi <script> atrybut src, w którym dodajemy link do pliku Javascript, który chcemy podłączyć.

Zapewne nasuwa Ci się pytanie “dlaczego dołączamy pliki Javascript przed końcem elementu <body>” – już wyjaśniam. Jest to dobra praktyka, która zapewnia nam, że pliki skryptów zostaną załadowane dopiero po tym, jak cała reszta strony będzie już pobrana – dzięki temu mamy pewność, że nasze skrypty nie wykonają się zbyt wcześnie.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

mystifying-ellis-zhx47

mystifying-ellis-zhx47 danielminschinski

To by było na tyle na dzisiaj. Wstęp za nami. Dużą dawką kodu rozpoczęliśmy naukę Bootstrapa + JS. W kolejnych postach porozbijamy sobie materiał. Tak więc z góry zapraszam do śledzenia mojego bloga!

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!