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.
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.
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