Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00279 007567 18994065 na godz. na dobę w sumie
Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje internetowe. Wydanie II - książka
Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje internetowe. Wydanie II - książka
Autor: , Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4874-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-35%), audiobook).

Opanuj Bootstrapa, żeby tworzyć zindywidualizowane i responsywne aplikacje webowe!

Bootstrap jest coraz popularniejszym frameworkiem CSS i JavaScriptu, służącym do szybkiego i bezproblemowego tworzenia responsywnych interfejsów WWW. W sierpniu 2011 roku został zaprezentowany światu w jako projekt open source, a dzisiaj jest marką powszechnie znaną wśród projektantów front-endów aplikacji. Bootstrap jest prosty w użyciu, kompatybilny z różnymi przeglądarkami i umożliwia tworzenie interfejsów mobilnych. Zalety te są doceniane przez rosnące grono użytkowników na całym świecie. Mimo tej popularności dość trudno znaleźć dobry materiał do nauki zaawansowanych opcji dostępnych w najnowszej, czwartej wersji Bootstrapa.

To książka przeznaczona dla developerów, którzy chcą pisać kompletne, przyjemne w użytkowaniu i doskonałe jakościowo strony za pomocą Bootstrapa 4. Opisano tu różnorakie podejścia do tworzenia stron od podstaw. Dowiesz się, jak budować właściwy układ strony, stosować różne komponenty nawigacyjne Bootstrapa, korzystać z formularzy i stylizować różnego typu treści. Zrozumiesz budowę wtyczki w Bootstrapie, nauczysz się pisać własne komponenty i rozszerzać Bootstrapa za pomocą jQuery. W książce przedstawiono także klasy pomocnicze Bootstrapa, dzięki którym proces tworzenia strony przebiega sprawniej. Nie zabrakło również szczegółowych instrukcji dotyczących optymalizacji strony i jej integrowania z zewnętrznymi frameworkami.

W tej książce między innymi:

Bootstrap 4 dla projektanta: responsywność, jakość, styl!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Mastering Bootstrap 4 – Second Edition Tłumaczenie: Katarzyna Wojtkowiak ISBN: 978-83-283-4874-5 Copyright © Packt Publishing 2018. First published in the English language under the title ‘Mastering Bootstrap 4 - Second Edition – (9781788834902)’. Polish edition copyright © 2019 by Helion SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA ul. Kościuszki 1c, 44-100 Gliwice tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/boo4z2.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/boo4z2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci 7 8 9 13 14 16 16 17 18 21 21 21 22 22 23 23 24 25 25 31 33 33 34 40 40 O autorach O recenzencie Wst(cid:218)p Rozdzia(cid:239) 1. Podkr(cid:218)canie Bootstrapa Wprowadzenie do projektu demo Co oferuje Bootstrap 4 Uk(cid:239)ad Nadawanie tre(cid:258)ciom stylu Komponenty Wsparcie urz(cid:200)dze(cid:241) mobilnych Klasy pomocnicze Wspierane przegl(cid:200)darki Sass zamiast Less Od pikseli do root emów Mieszanie prefiksów Ikony Szablony Kosmetyka Przygotowanie projektu Podsumowanie Rozdzia(cid:239) 2. Definiowanie stylu System siatkowy Kontenery Rz(cid:218)dy Kolumny Poleć książkęKup książkę Spis tre(cid:286)ci Obrazy Responsywne obrazy Modyfikatory obrazów Responsywne narz(cid:218)dzia Podsumowanie Rozdzia(cid:239) 3. Tworzenie uk(cid:239)adu Tworzenie sekcji Dodawanie komponentów Bootstrapa Jumbotron Zak(cid:239)adki Karuzela Karty Pasek nawigacyjny Okna modalne Podsumowanie Rozdzia(cid:239) 4. O nawigacji, stopkach, ostrze(cid:285)eniach i tre(cid:258)ci Przyklejanie paska nawigacji Wi(cid:218)cej o stylu paska nawigacji Poprawa nawigacji za pomoc(cid:200) Scrollspy Dopasowanie pr(cid:218)dko(cid:258)ci przewijania Okruszki Ikony Wykorzystanie i dostosowanie ostrze(cid:285)e(cid:241) Tworzymy stopk(cid:218) Tworzymy dopasowane formularze Walidacja formularza Wska(cid:283)niki post(cid:218)pu U(cid:285)ywanie obiektów medialnych Rysunki Podsumowanie Rozdzia(cid:239) 5. Projektowanie usprawnione dzi(cid:218)ki wtyczkom Wykrywanie przegl(cid:200)darki Rozszerzona paginacja dzi(cid:218)ki wtyczce bootpag Wy(cid:258)wietlanie obrazów za pomoc(cid:200) Lightboksu Poprawiamy list(cid:218) cen za pomoc(cid:200) DataTables Typeahead Podpowiedzi Wyskakuj(cid:200)ce okienka Podsumowanie Rozdzia(cid:239) 6. Wtyczki dopasowane do potrzeb Anatomia wtyczek JavaScript Sass 4 52 54 56 58 60 61 61 64 65 66 72 75 77 84 89 91 92 93 93 96 99 99 102 107 109 116 118 119 120 122 123 124 126 135 139 142 144 144 145 147 148 148 153 Poleć książkęKup książkę Dopasowanie wtyczek do potrzeb Konfiguracja wtyczki ostrzegawczej Dostosowywanie karuzeli jQuery Pisanie w(cid:239)asnej wtyczki jQuery Idea — wtyczka A11yHCM Plik a11yhcm.js Kod Dodawanie stylu Podsumowanie Rozdzia(cid:239) 7. Zaawansowane wtyczki Budowanie komponentu referencje za pomoc(cid:200) Salvattore’a Poznaj Salvattore’a Dodawanie Animate.css do Mojej Fotki Skacz(cid:200)ce powiadomienia Animowanie siatki Salvattore’a Hover Dodawanie Hovera do Mojej Fotki Rozbudowywanie paska nawigacyjnego Ikony Awesome Hover Salvattore Hover Podsumowanie Rozdzia(cid:239) 8. Narz(cid:218)dzia Flexbox W(cid:239)a(cid:258)ciwo(cid:258)ci display i alignment Pomoc dla w(cid:239)a(cid:258)ciwo(cid:258)ci display Pomoc dla w(cid:239)a(cid:258)ciwo(cid:258)ci alignment Obramowanie Kolory kontekstowe Marginesy i wype(cid:239)nienie Op(cid:239)ywanie (floating) Przytwierdzanie Prze(cid:239)(cid:200)czanie widoczno(cid:258)ci Wyrównanie tekstu i przekszta(cid:239)cenia Pod(cid:258)wietlanie tekstu Zmniejszanie rozmiaru tekstu Listy Listy bez stylu Listy inline Szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202) Kod Sub i Sup Formatowanie danych wprowadzanych przez u(cid:285)ytkownika Formatowanie danych wyj(cid:258)ciowych u(cid:285)ytkownika Clearfix Podsumowanie Spis tre(cid:286)ci 154 154 161 166 166 169 171 174 176 179 179 182 187 188 191 192 193 193 194 196 199 201 201 202 203 203 204 206 207 211 211 212 213 214 215 215 215 216 217 218 219 219 220 220 220 5 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 9. Listy i akordeony Grupy list Wchodzenie w interakcj(cid:218) z elementami listy Stosowanie plakietek Stosowanie klas kontekstowych Ukrywanie tre(cid:258)ci Akordeony Podsumowanie Rozdzia(cid:239) 10. Optymalizowanie strony Optymalizacja CSS-u Style inline D(cid:239)ugie identyfikatory i nazwy klas Zasady skracania Selektory grupuj(cid:200)ce Czas renderowania Minifikacja CSS-u i JavaScriptu Przedstawiamy Grunta Minifikacja i konkatenacja z Gruntem Automatyczne uruchamianie zada(cid:241) Wyrzucanie nieu(cid:285)ywanego CSS-u ze strony Przetwarzanie HTML-a Ustawianie zasobów Pozbywanie si(cid:218) komentarzy CSS-u Konkatenacja plików JavaScriptu Podsumowanie Rozdzia(cid:239) 11. Integrowanie z AngularJS i Reactem Poznajemy AngularJS Przygotowanie AngularJS Poprawianie komponentu referencji Uczynienie referencji dynamicznymi Tworzenie Promise z $q Tworzenie dyrektywy AngularJS Pisanie szablonu referencji Testowanie dyrektywy testimonial Importowanie biblioteki Salvattore Poznajemy Reacta Ustawianie Reacta Galeria w bibliotece React Wykorzystanie karuzeli Podsumowanie Skorowidz 6 221 221 222 223 224 225 226 228 229 230 230 231 234 234 235 236 236 238 240 242 244 247 248 249 250 251 252 252 253 254 256 257 259 260 261 262 262 264 267 271 273 Poleć książkęKup książkę 1 Podkr(cid:218)canie Bootstrapa Bootstrap u(cid:239)atwia tworzenie interfejsów webowych. Jest frameworkiem s(cid:239)u(cid:285)(cid:200)cym do rozwija- nia stron i aplikacji internetowych. Zosta(cid:239) utworzony przez Marka Otta i Jacoba Thorntona w 2011 r., gdy byli oni zatrudnieni w Twitterze. Dzisiaj jest frameworkiem open source i sta(cid:239) si(cid:218) jednym z najbardziej popularnych frameworków przeznaczonych do pracy nad stronami i aplikacjami internetowymi. Mo(cid:285)na z niego korzysta(cid:202) za darmo — zarówno do celów prywat- nych, edukacyjnych, jak i komercyjnych. Z tego powodu szybko zyska(cid:239) popularno(cid:258)(cid:202). Dzisiaj tysi(cid:200)ce organizacji polegaj(cid:200) na Bootstrapie, w(cid:239)(cid:200)czaj(cid:200)c w to NASA, Walmarta i Bloomberga. Zgodnie z informacjami dost(cid:218)pnymi na http://BuiltWith.com ponad 10 najwi(cid:218)kszych stron in- ternetowych na (cid:258)wiecie zosta(cid:239)o wykonanych z u(cid:285)yciem Bootstrapa (http://trends.builtwith. com/docinfo/Twitter-Bootstrap). Zatem znajomo(cid:258)(cid:202) Bootstrapa jest wa(cid:285)n(cid:200) umiej(cid:218)tno(cid:258)ci(cid:200) i b(cid:218)dzie stanowi(cid:202) solidny dodatek do zestawu umiej(cid:218)tno(cid:258)ci ka(cid:285)dego web dewelopera. G(cid:239)ówne sk(cid:239)adowe frameworku opieraj(cid:200) si(cid:218) na JavaScripcie i CSS-ie. Dostarcza on dewelo- perom wszystkie niezb(cid:218)dne komponenty do tworzenia w pe(cid:239)ni funkcjonalnego interfejsu webowego. W trakcie lektury tej ksi(cid:200)(cid:285)ki poznasz najwa(cid:285)niejsze elementy Bootstrapa i nauczysz si(cid:218), jak u(cid:285)ywa(cid:202) frameworku w celu wykonania od zera kompletnej strony. Poniewa(cid:285) dost(cid:218)pnych jest wiele ksi(cid:200)(cid:285)ek po(cid:258)wi(cid:218)conych CSS-owi, HTML-owi i JavaScriptowi, zak(cid:239)adamy, (cid:285)e masz podstawow(cid:200) wiedz(cid:218) o tych j(cid:218)zykach. Niniejszy rozdzia(cid:239) rozpoczniemy od wprowadzenia do projektu demo: Moja Fotka. Ten projekt b(cid:218)dzie nam towarzyszy(cid:202) przez ca(cid:239)(cid:200) ksi(cid:200)(cid:285)k(cid:218) i s(cid:239)u(cid:285)y(cid:202) jako praktyczny punkt odniesienia. Nast(cid:218)pnie omówimy framework Bootstrap, wymienimy jego elementy i porównamy aktualn(cid:200) wersj(cid:218) z poprzedni(cid:200) (Bootstrap 3). Jakby tego by(cid:239)o ma(cid:239)o, ten rozdzia(cid:239) pomo(cid:285)e Ci tak(cid:285)e w przygotowaniu (cid:258)rodowiska programistycz- nego. Aby pracowa(cid:202) na tej samej bazie, przeprowadzimy Ci(cid:218) przez proces instalowania odpo- wiednich narz(cid:218)dzi i szczegó(cid:239)owo omówimy sposoby na zintegrowanie Bootstrapa z projektem. Bardziej zaawansowani czytelnicy mog(cid:200) omin(cid:200)(cid:202) t(cid:218) cz(cid:218)(cid:258)(cid:202) i przej(cid:258)(cid:202) do rozdzia(cid:239)u 2. „Deklaro- wanie stylu”. Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Podsumowuj(cid:200)c, w tym rozdziale: (cid:81) zapoznamy si(cid:218) z projektem demo — stron(cid:200) dla fotografów; (cid:81) dowiemy si(cid:218), co nowego pojawi(cid:239)o si(cid:218) w ostatniej wersji Bootstrapa i czym ró(cid:285)ni si(cid:218) ona od poprzedniej; (cid:81) nauczymy si(cid:218), w jaki sposób w(cid:239)(cid:200)czy(cid:202) Bootstrapa do swojego projektu. Wprowadzenie do projektu demo Z tej ksi(cid:200)(cid:285)ki nauczymy si(cid:218) tworzy(cid:202) kompletne strony w Bootstrapie, od zera. Rozpoczniemy od prostego uk(cid:239)adu w rozdzia(cid:239)ach 2. „Deklarowanie stylu” i 3. „Tworzenie layoutu”. Nast(cid:218)pnie poprawimy go i rozbudujemy w kolejnych rozdzia(cid:239)ach. Koncepcja naszej strony jest prosta: chcemy przygotowa(cid:202) witryn(cid:218) dla fotografów. Dzi(cid:218)ki naszemu projektowi (hipotetyczni) u(cid:285)ytkownicy b(cid:218)d(cid:200) mogli zaoferowa(cid:202) swoje towary i us(cid:239)ugi. W trakcie tworzenia strony b(cid:218)dziemy u(cid:285)ywa(cid:202) tych samych narz(cid:218)dzi i bibliotek, z których korzystaj(cid:200) profesjonalni programi(cid:258)ci. Wybrali(cid:258)my konkretne wtyczki i narz(cid:218)dzia g(cid:239)ównie ze wzgl(cid:218)du na ich powszechne stosowanie. Nauka sposobu ich zastosowania i zintegrowania zaoszcz(cid:218)dzi nam sporo pracy przy rozwijaniu stron internetowych w przysz(cid:239)o(cid:258)ci. Narz(cid:218)dziami, które b(cid:218)d(cid:200) nam towarzyszy(cid:202) podczas procesu projektowania Mojej Fotki, s(cid:200): node package manager (npm) oraz grunt. Dzi(cid:218)ki procesowi tworzenia Mojej Fotki nauczymy si(cid:218), jak zastosowa(cid:202) wszystkie podstawowe koncepcje dotycz(cid:200)ce interfejsów u(cid:285)ytkownika oraz komponenty konieczne do zbudowania w pe(cid:239)ni funkcjonalnej strony. Nauczymy si(cid:218) m.in.: (cid:81) U(cid:285)ywania systemu siatkowego Bootstrapa, aby zorganizowa(cid:202) informacje na swojej stronie. (cid:81) Budowania przypi(cid:218)tego, posiadaj(cid:200)cego efekt przewijania, nawigacyjnego paska z oznaczeniem marki. (cid:81) Korzystania z karuzeli, aby wy(cid:258)wietli(cid:202) ró(cid:285)ne zdj(cid:218)cia zaimplementowane za pomoc(cid:200) karuzeli i jumbotrona (jumbotron s(cid:239)u(cid:285)y do wy(cid:258)wietlania istotnych tre(cid:258)ci). Trzeba zaznaczy(cid:202), (cid:285)e karuzele ciesz(cid:200) si(cid:218) coraz mniejsz(cid:200) sympati(cid:200). Jednak(cid:285)e nadal s(cid:200) powszechnie u(cid:285)ywane i stanowi(cid:200) wa(cid:285)ny element Bootstrapa. Nie jeste(cid:258)my ani zwolennikami, ani przeciwnikami karuzeli, poniewa(cid:285) jej efektywno(cid:258)(cid:202) zale(cid:285)y raczej od tego, w jaki sposób jej u(cid:285)yto, ni(cid:285) od tego, czy u(cid:285)yto jej w ogóle. (cid:81) Tworzenia w(cid:239)asnych kart, które pozwol(cid:200) u(cid:285)ytkownikom na nawigacj(cid:218) poprzez kolejne tre(cid:258)ci. (cid:81) Zastosowania okienek modalnych Bootstrapa. (cid:81) Wykorzystania przypi(cid:218)tej stopki. (cid:81) Wykonywania formularzy z mo(cid:285)liwo(cid:258)ci(cid:200) wprowadzania danych dzi(cid:218)ki kontrolkom wej(cid:258)cia (pole tekstowe, obszar tekstowy, przyciski) i stosowania wej(cid:258)ciowych stylów walidacyjnych Bootstrapa. (cid:81) Najbardziej efektywnego wykorzystania klas kontekstowych. (cid:81) Tworzenia indywidualnie stylizowanych wiadomo(cid:258)ci ostrzegawczych. 14 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa (cid:81) Ekspresowego budowania tabel interaktywnych do wy(cid:258)wietlania informacji o produktach. (cid:81) Korzystania z rozwijanych menu, w(cid:239)asnych czcionek i ikon. (cid:81) Tworzenia okruszków, aby wspomóc nawigacj(cid:218). (cid:81) U(cid:285)ywania podpowiedzi dla pól tekstowych. (cid:81) Efektywnego u(cid:285)ycia klas pomocniczych, aby przyspieszy(cid:202) proces zaprojektowania strony internetowej. (cid:81) Kontroli wyrównania i layoutu za pomoc(cid:200) flexboksa. (cid:81) Tworzenia interfejsów, które wspieraj(cid:200) czytniki ekranowe. Oprócz nauki korzystania z Boostrapa 4 proces tworzenia Mojej Fotki wprowadzi nas do kilku zewn(cid:218)trznych bibliotek, takich jak Scrollspy (dla przewijanych animacji), SalvattoreJS (biblioteka uzupe(cid:239)niaj(cid:200)ca nasz(cid:200) bootstrapow(cid:200) siatk(cid:218)), Animate.css (dla pi(cid:218)knych animacji CSS-owych, takich jak efekt wygaszania) oraz DataTables (pozwala na ekspresowe wy(cid:258)wietlenie danych w formie tabelarycznej). Sama strona b(cid:218)dzie si(cid:218) sk(cid:239)ada(cid:239)a z ró(cid:285)nych cz(cid:218)(cid:258)ci: (cid:81) Powrót, (cid:81) O stronie, (cid:81) Us(cid:239)ugi, (cid:81) Galeria, (cid:81) Kontakt. Budowanie ka(cid:285)dej z tych sekcji ma na celu nauk(cid:218), jak korzysta(cid:202) z ro(cid:285)nych zestawów elementów zewn(cid:218)trznych bibliotek. Przyk(cid:239)adowo: podczas pracy nad cz(cid:218)(cid:258)ci(cid:200) powitaln(cid:200) nauczymy si(cid:218), jak korzysta(cid:202) z jumbotrona, okienek dialogowych oraz z ró(cid:285)nych czcionek i stylów, a sekcja O stronie pomo(cid:285)e w zrozumieniu, jak u(cid:285)ywa(cid:202) kart. Cz(cid:218)(cid:258)(cid:202) Us(cid:239)ugi stanowi wprowadzenie do niestandar- dowych kart — dowiemy si(cid:218) tutaj, jak dzi(cid:218)ki kartom w Bootstrapie wy(cid:258)wietli(cid:202) wiele ró(cid:285)nych us(cid:239)ug oferowanych przez nasz(cid:200) stron(cid:218). Aby kontynuowa(cid:202) rozwijanie sekcji Us(cid:239)ugi, b(cid:218)dziesz potrzebowa(cid:202) bogatego materia(cid:239)u wizual- nego, (cid:285)eby przyk(cid:239)adowe us(cid:239)ugi dost(cid:218)pne na stronie naprawd(cid:218) si(cid:218) wyró(cid:285)nia(cid:239)y. Osi(cid:200)gniesz to, gdy opanujesz responsywny rdze(cid:241) Bootstrapa oraz karuzel(cid:218) i wtyczki jQuery. W sekcji Kontakt zademonstrujemy, jak u(cid:285)ywa(cid:202) formularzy i funkcji pomocniczych — dowiesz si(cid:218), jak za pomoc(cid:200) Bootstrapa utworzy(cid:202) stylowe formularze HTML-a, jak korzysta(cid:202) z pól formularzy i grup wej- (cid:258)ciowych i jak poradzi(cid:202) sobie z wy(cid:258)wietleniem rezultatu sprawdzenia poprawno(cid:258)ci danych. Z ko(cid:241)cowej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki dowiesz si(cid:218), jak zoptymalizowa(cid:202) swoj(cid:200) stron(cid:218) i zintegrowa(cid:202) j(cid:200) z popu- larnym frameworkiem JavaScriptu, AngularJS (https://angularjs.org/) i Reactem (https://reactjs.org/). Na rynku dost(cid:218)pne si(cid:218) ca(cid:239)e ksi(cid:200)(cid:285)ki po(cid:258)wi(cid:218)cone AngularJS, wi(cid:218)c omówimy jedynie podstawy niezb(cid:218)dne do samej integracji. Skoro ju(cid:285) zapozna(cid:239)e(cid:258) si(cid:218) z krótkim przegl(cid:200)dem Mojej Fotki, przyjrzyjmy si(cid:218) Bootstrapowi 4 bardziej szczegó(cid:239)owo i wyja(cid:258)nijmy, czym ró(cid:285)ni si(cid:218) od poprzedniej wersji (zob. rysunek 1.1). 15 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Rysunek 1.1. Przedsmak tego, co zostanie zrobione: strona Moja Fotka Co oferuje Bootstrap 4 Od pierwszego twitterowego wydania Bootstrapa, z 19 sierpnia 2011 r., wiele si(cid:218) zmieni(cid:239)o. W skrócie: pierwsza wersja Bootstrapa by(cid:239)a zbiorem regu(cid:239) CSS-u, które dawa(cid:239)y programistom mo(cid:285)liwo(cid:258)(cid:202) opracowania uk(cid:239)adu strony, utworzenia formularzy, przycisków oraz poprawia(cid:239)y ogólny wygl(cid:200)d i nawigacj(cid:218) strony. Je(cid:258)li chodzi o te fundamentalne cechy, Bootstrap 4 jest ci(cid:200)gle podobny do swoich poprzedników — tak samo u(cid:285)ywa si(cid:218) frameworku do wykonania szkieletu i interfejsu posiadaj(cid:200)cego spójny styl. Je(cid:258)li chodzi o to ostatnie, osi(cid:200)gamy ten efekt poprzez zastosowanie stylów Bootstrapa dla przycisków, formularzy i innych elementów interfej- su u(cid:285)ytkownika. Utrzyma(cid:239)y si(cid:218) podstawowe elementy Bootstrapa, jednak(cid:285)e w pozosta(cid:239)ej cz(cid:218)(cid:258)ci kompletnie si(cid:218) on zmieni(cid:239). Framework wprowadza nowe klasy pomocnicze i nowe komponenty, a jednocze(cid:258)nie przestaje wspiera(cid:202) inne. Równie(cid:285) wygl(cid:200)d pojedynczych komponentów zosta(cid:239) zmodyfikowa- ny — tak samo, jak zmieni(cid:239) si(cid:218) sposób definiowania i tworzenia zewn(cid:218)trznych wtyczek. Dewelo- perzy Bootstrapa 4 wycofali te(cid:285) wsparcie dla niektórych ze starszych przegl(cid:200)darek, a dodali dla innych — (cid:258)ci(cid:258)lej mówi(cid:200)c: dla przegl(cid:200)darki systemu Android 5.0 Lollipop i WebView. Podczas omawiania g(cid:239)ównych elementów Bootstrapa w kolejnych podrozdzia(cid:239)ach powiemy sobie tak(cid:285)e o tych zmianach. Uk(cid:239)ad Prawdopodobnie najwa(cid:285)niejsz(cid:200) i najcz(cid:218)(cid:258)ciej wykorzystywan(cid:200) mo(cid:285)liwo(cid:258)ci(cid:200) frameworku jest jego zdolno(cid:258)(cid:202) do rozplanowania i zorganizowania elementów na stronie. U podstawy tej funk- cjonalno(cid:258)ci znajduje si(cid:218) system siatkowy Bootstrapa: szereg klas CSS i media queries, które 16 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa pozwalaj(cid:200) na proste zdefiniowanie pozycji poziomej i pionowej elementów na stronie, jed- nocze(cid:258)nie z uwzgl(cid:218)dnieniem ró(cid:285)nic w ich rozmiarach. Korzystanie z systemu siatkowego jest tak proste jak przypisanie elementom kilku klas i okre(cid:258)lenie wielko(cid:258)ci (rozmiaru ekranu, przy którym element zostanie przeskalowany). Nie ma potrzeby dodawania magicznego JavaScriptu ani pisania w(cid:239)asnych regu(cid:239) CSS-u. W Bootstrapie 4 system siatkowy zosta(cid:239) ca(cid:239)kowicie od(cid:258)wie(cid:285)ony i rozbudowano go o jedn(cid:200) now(cid:200) rozdzielczo(cid:258)(cid:202). To oznacza, (cid:285)e w przeciwie(cid:241)stwie do Bootstrapa 3 system siatkowy oferuje rozdzielczo(cid:258)ci dla superma(cid:239)ych, ma(cid:239)ych, (cid:258)rednich, du(cid:285)ych i bardzo du- (cid:285)ych wy(cid:258)wietlaczy. W rozdziale 2. „Deklarowanie stylu” obszernie omówimy wielko(cid:258)ci, re- sponsywne warto(cid:258)ci graniczne i system siatkowy Bootstrapa. Razem z systemem siatkowym Bootstrap oferuje tak(cid:285)e: (cid:81) responsywne kontenery; (cid:81) responsywne warto(cid:258)ci graniczne (z ang. breakpointy) dla poprawy widoczno(cid:258)ci layoutu na ró(cid:285)nych wielko(cid:258)ciach ekranu; (cid:81) obiekty multimedialne, które pozwalaj(cid:200) na wykonanie w(cid:239)asnych komponentów strukturalnych; (cid:81) klasy pomocnicze pozwalaj(cid:200)ce na manipulowanie elementami w responsywny sposób. Przyk(cid:239)adowo: mo(cid:285)esz skorzysta(cid:202) z klas pomocniczych layoutu, (cid:285)eby ukrywa(cid:202) elementy w zale(cid:285)no(cid:258)ci od rozmiaru ekranu. Bootstrap 4 otrzyma(cid:239) tak(cid:285)e wsparcie dla trybu CSS3, który nazywa si(cid:218) flexbox — pozwala on na (cid:239)atwiejsze pozycjonowanie elementów przy uwzgl(cid:218)dnieniu ró(cid:285)nych rozmiarów ekranu. Jak poradzi(cid:202) sobie z wyrównaniem elementów za pomoc(cid:200) flexboksa, powiemy w rozdziale 8. „Narz(cid:218)dzia”. Nadawanie tre(cid:258)ciom stylu Jak ju(cid:285) wspomniano, jednym z g(cid:239)ównych celów Bootstrapa jest utrzymanie spójnego interfejsu u(cid:285)ytkownika. To znaczy, (cid:285)e za pomoc(cid:200) Bootstrapa da si(cid:218) zaprojektowa(cid:202) strony, które b(cid:218)d(cid:200) si(cid:218) podobnie prezentowa(cid:202) niezale(cid:285)nie od rodzaju przegl(cid:200)darki internetowej. Inaczej mówi(cid:200)c, jak zaznaczono w oficjalnej dokumentacji Bootstrapa: cz(cid:218)(cid:258)(cid:202) zadania postawionego przed Bootstrapem sprowadza si(cid:218) do dostarczenia eleganc- kiej, spójnej i prostej bazy, na której mo(cid:285)na by dalej budowa(cid:202). Ró(cid:285)ne przegl(cid:200)darki maj(cid:200) ró(cid:285)ne domy(cid:258)lne style elementów, dlatego Bootstrap nadpisuje ustawie- nia przegl(cid:200)darek, daj(cid:200)c gwarancj(cid:218), (cid:285)e ró(cid:285)ne elementy w ró(cid:285)nych przegl(cid:200)darkach b(cid:218)d(cid:200) wy(cid:258)wie- tlane w sposób jednolity. Nadpisywanie jest mo(cid:285)liwe poprzez zastosowanie zestawu regu(cid:239) CSS-u znanych zbiorczo pod nazw(cid:200) Reboot. Te regu(cid:239)y s(cid:200) modyfikacj(cid:200) Normalize (biblioteki ze- wn(cid:218)trznej u(cid:285)ywanej przez Bootstrapa 3, wykonanej samodzielnie przez twórców Bootstrapa). Opieraj(cid:200)c si(cid:218) na tej bibliotece, Bootstrap 4 dostarcza zestaw podstawowych stylów, które pozwa- laj(cid:200) efektywnie poprawi(cid:202) ogólny wygl(cid:200)d elementów powszechnie u(cid:285)ywanych do tworzenia inter- fejsu u(cid:285)ytkownika. Przyk(cid:239)adem elementów, które mo(cid:285)na wystylizowa(cid:202), s(cid:200) przyciski (rysunek 1.2), pola wej(cid:258)ciowe, nag(cid:239)ówki (rysunek 1.3), akapity, tekst, rysunki, tabele i kontrolery nawigacji. 17 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Rysunek 1.2. Sze(cid:258)(cid:202) stylów przycisków, które dostarcza Bootstrap, to: btn-primary, btn-secondary, btn-danger, btn-link, btn-info i btn-warning. Istniej(cid:200) równie(cid:285) dodatkowe style, niepokazane tutaj (btn-light, btn-dark oraz przyciski z obrysem: btn-outline) Dodatkowo Bootstrap oferuje style stanu, które mo(cid:285)na stosowa(cid:202) do wszelkich kontrolerów wej- (cid:258)cia, np. do wy(cid:239)(cid:200)czonych przycisków lub do w(cid:239)(cid:200)czonych. Rysunek 1.3. Style typograficzne Bootstrapa. Na rysunku mo(cid:285)emy zobaczy(cid:202) stylizacj(cid:218) ró(cid:285)nych nag(cid:239)ówków Trzeba nadmieni(cid:202), (cid:285)e domy(cid:258)lny rozmiar czcionki w Bootstrapie 4 jest o 2 px wi(cid:218)kszy ni(cid:285) w po- przedniej wersji — powi(cid:218)kszy(cid:239) si(cid:218) z 14 px do 16 px. W konsekwencji tekst (taki jak tre(cid:258)(cid:202) elementu body oraz nag(cid:239)ówki) b(cid:218)dzie nieco wi(cid:218)kszy, jednak(cid:285)e zmiana rozmiaru nie b(cid:218)dzie si(cid:218) rzuca(cid:239)a w oczy. Wy(cid:258)wietlanemu tekstowi mo(cid:285)na teraz przypisa(cid:202) czcionk(cid:218) z zestawu rodzimych (znanych tak(cid:285)e pod nazw(cid:200) systemowych, co odnosi si(cid:218) do domy(cid:258)lnej kolekcji czcionek dost(cid:218)pnej w systemie operacyjnym) zamiast czcionek webowych. U(cid:285)ywanie czcionek rodzimych ma nast(cid:218)puj(cid:200)ce zalety: (cid:81) poprawiona zostaje pr(cid:218)dko(cid:258)(cid:202) renderowania tekstu, poniewa(cid:285) przegl(cid:200)darka nie musi ju(cid:285) (cid:258)ci(cid:200)ga(cid:202) plików czcionki; (cid:81) zapewnia to wi(cid:218)ksz(cid:200) spójno(cid:258)(cid:202) wygl(cid:200)du i jednolite wra(cid:285)enia wizualne, poniewa(cid:285) tre(cid:258)(cid:202) tekstowa odpowiada teraz tej dost(cid:218)pnej w systemie operacyjnym, pod którym pracuje przegl(cid:200)darka. Komponenty Bootstrap oferuje olbrzymi(cid:200) kolekcj(cid:218) podstawowych komponentów dla interfejsu u(cid:285)ytkow- nika (UI), które pozwalaj(cid:200) na utworzenie ka(cid:285)dego typu interfejsu w bardzo krótkim czasie. (cid:165)ci(cid:258)le mówi(cid:200)c, Bootstrap oferuje okienka modalne, pasek post(cid:218)pu, paski nawigacyjne, podpo- wiedzi, wyskakuj(cid:200)ce okna, karuzele, ostrze(cid:285)enia, rozwijane menu, grupy wej(cid:258)ciowe, karty, pagi- nacje, zak(cid:239)adki, formularze, grupy list, okruszki i jumbotrona (zob. rysunek 1.4). Wszystkie z tych komponentów, jak równie(cid:285) rozwijane elementy — np. akordeony — s(cid:200) od razu gotowe do u(cid:285)ycia. 18 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa Dodatkowo, (cid:285)eby spe(cid:239)nia(cid:239)y okre(cid:258)lon(cid:200) funkcj(cid:218), mo(cid:285)na je stylizowa(cid:202) na jeden z czterech kolorów kontekstowych omówionych w poprzednim podrozdziale. Rysunek 1.4. Ró(cid:285)ne komponenty Bootstrapa 4 w dzia(cid:239)aniu. Na rysunku widzimy jumbotrona, kart(cid:218), przyk(cid:239)adowy tekst, pasek post(cid:218)pu i kilka przycisków Czytelnicy zaznajomieni z Bootstrapem 3 zauwa(cid:285)(cid:200), (cid:285)e na rysunku 1.4 nie ma paneli, studni i mi- niatur. To dlatego, (cid:285)e te komponenty zosta(cid:239)y zast(cid:200)pione nowymi — zak(cid:239)adkami. Je(cid:285)eli obca Ci jest koncepcja studni: studnie s(cid:200) komponentem UI, który pozwala deweloperom podkre(cid:258)li(cid:202) tekst poprzez dodanie do niego zacienionej ramki. Z drugiej strony panel równie(cid:285) s(cid:239)u(cid:285)y uwydatnianiu informacji, ale poprzez okre(cid:258)lenie odst(cid:218)pu tekstu od ramki (padding) i zasto- sowanie zaokr(cid:200)glonych obramowa(cid:241). Jednak(cid:285)e ani panele, ani studnie nie dostosowuj(cid:200) si(cid:218) do ró(cid:285)nego rodzaju tre(cid:258)ci. Luk(cid:218) t(cid:218) wype(cid:239)niaj(cid:200) karty. S(cid:200) mniej restrykcyjne i zapewniaj(cid:200) wi(cid:218)ksz(cid:200) elastyczno(cid:258)(cid:202) w doborze typu tre(cid:258)ci, np. obrazków, list czy tekstu. Pozwalaj(cid:200) tak(cid:285)e na dodanie stopek i nag(cid:239)ówków (zob. rysunek 1.5). Równie(cid:285) formularze zosta(cid:239)y ca(cid:239)kowicie przebudowane i teraz umo(cid:285)liwiaj(cid:200) konfiguracj(cid:218) ró(cid:285)nych opcji uk(cid:239)adu (zob. rysunek 1.6) oraz maj(cid:200) walidacyjne klasy wej(cid:258)cia (rysunek 1.7). Dzi(cid:218)ki zastosowaniu tych klas programista mo(cid:285)e zosta(cid:202) szybko poinformowany o b(cid:239)(cid:218)dnych danych wej(cid:258)ciowych albo potwierdzi(cid:202) u(cid:285)ytkownikowi pomy(cid:258)lne przes(cid:239)anie formularza. W prze- sz(cid:239)o(cid:258)ci wymaga(cid:239)o to korzystania z zewn(cid:218)trznych bibliotek lub r(cid:218)cznej implementacji. Rozmiar mo(cid:285)na dostosowa(cid:202) równie(cid:285) pojedynczym kontrolerom formularzy — jak np. przyciskom — opcja, która wydaje si(cid:218) trywialna, ale cz(cid:218)sto jest po(cid:285)(cid:200)dana. 19 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Rysunek 1.5. Komponent karta zast(cid:200)pi(cid:239) studnie, miniatury i panele Rysunek 1.6. Formularze mo(cid:285)na dostosowa(cid:202) za pomoc(cid:200) ró(cid:285)nych opcji uk(cid:239)adu — na poprzednim rysunku mo(cid:285)na zobaczy(cid:202) trzy formularze: jeden z etykiet(cid:200) nad polem wej(cid:258)ciowym, jeden z elementami u(cid:239)o(cid:285)onymi w linii i jeden z etykiet(cid:200) po lewej stronie pola wej(cid:258)ciowego Rysunek 1.7. Nowe style walidacyjne danych wej(cid:258)ciowych wskazuj(cid:200) pomy(cid:258)lne przetworzenie danych Wygl(cid:200)d kontrolerów formularzy mo(cid:285)na dopasowa(cid:202), utrzymuj(cid:200)c jednocze(cid:258)nie spójno(cid:258)(cid:202) danych wej(cid:258)ciowych na ró(cid:285)nych przegl(cid:200)darkach — u(cid:285)yjemy do tego klasy custom-* (zob. rysunek 1.7). Mówi(cid:200)c w skrócie: te klasy pozwalaj(cid:200) zast(cid:200)pi(cid:202) domy(cid:258)lne pola wyboru (checkbox), przyciski opcji (radio), listy rozwijane (select) i pola przesy(cid:239)ania plików (file upload) przy zachowaniu spójnego wygl(cid:200)du — zob. rysunek 1.8. 20 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa Rysunek 1.8. Dopasowane do potrzeb kontrolki, które zast(cid:218)puj(cid:200) domy(cid:258)lne kontrolery przegl(cid:200)darek, aby zapewni(cid:202) konsekwencj(cid:218) w UI mi(cid:218)dzy przegl(cid:200)darkami Wsparcie urz(cid:200)dze(cid:241) mobilnych Podobnie jak jego poprzednik, Bootstrap 4 pozwala na tworzenie stron przyjaznych urz(cid:200)dzeniom mobilnym bez du(cid:285)ych nak(cid:239)adów dodatkowej pracy. Bootstrap domy(cid:258)lnie jest zaprojektowany tak, aby pracowa(cid:239) z ró(cid:285)nymi rozdzielczo(cid:258)ciami i rozmiarami ekranu — od telefonu, poprzez tablet, do komputera. W(cid:239)a(cid:258)ciwie Bootstrapowi przy(cid:258)wieca filozofia najpierw mobilne, co ozna- cza, (cid:285)e jego komponenty powinny si(cid:218) wy(cid:258)wietla(cid:202) i funkcjonowa(cid:202) bez zastrze(cid:285)e(cid:241) na najmniej- szym dost(cid:218)pnym rozmiarze ekranu. Stoj(cid:200)ca za tym idea jest prosta. Wyobra(cid:283)my sobie tworzenie strony internetowej bez pami(cid:218)tania o ma(cid:239)ych ekranach mobilnych. W takim przypadku „napa- kujemy” swoj(cid:200) stron(cid:218) du(cid:285)(cid:200) liczb(cid:200) przycisków, etykiet i tabel. Prawdopodobnie odkryjemy problemy z u(cid:285)yteczno(cid:258)ci(cid:200) takiej strony dopiero, gdy jaki(cid:258) u(cid:285)ytkownik wejdzie na ni(cid:200) z urz(cid:200)dze- nia mobilnego i jedyne, co b(cid:218)dzie w stanie zobaczy(cid:202), to ma(cid:239)(cid:200) stron(cid:218) pe(cid:239)n(cid:200) przycisków i formula- rzy. Na tym etapie b(cid:218)dziemy musieli poprawi(cid:202) ca(cid:239)y interfejs, (cid:285)eby móg(cid:239) si(cid:218) wy(cid:258)wietla(cid:202) na ma(cid:239)ych ekranach. W(cid:239)a(cid:258)nie z tego powodu Bootstrap promuje podej(cid:258)cie oddolne, wymusza- j(cid:200)c na deweloperach prac(cid:218) nad prawid(cid:239)owym wy(cid:258)wietlaniem interfejsu na najmniejszym do- st(cid:218)pnym ekranie, zanim rozpoczn(cid:200) prac(cid:218) na wi(cid:218)kszych rozmiarach ekranów. Klasy pomocnicze Pomijaj(cid:200)c gotowe elementy, Bootstrap oferuje du(cid:285)y wybór klas pomocniczych, które dostar- czaj(cid:200) najcz(cid:218)(cid:258)ciej spotykane funkcjonalno(cid:258)ci w celu zredukowania liczby powtarzaj(cid:200)cych si(cid:218) regu(cid:239) stylizacji. Przyk(cid:239)ady tych narz(cid:218)dzi zawieraj(cid:200) m.in. klasy szybkiej stylizacji obramowa(cid:241), usuwanie op(cid:239)ywania, tworzenie typowej ikony zamkni(cid:218)cia, definiowanie kolorów, zmiana opcji wy(cid:258)wietlania i widoczno(cid:258)ci elementów oraz dopasowanie rozmiaru i odst(cid:218)pów. Niektóre z tych klas pomocniczych istnia(cid:239)y ju(cid:285) w wersji 3, inne s(cid:200) ca(cid:239)kiem nowe lub zosta(cid:239)y zaadaptowane, zmo- dyfikowane i zmieniono im nazw(cid:218). B(cid:218)dziemy korzysta(cid:202) z tych klas podczas studiowania mate- ria(cid:239)u zawartego w ksi(cid:200)(cid:285)ce, a ca(cid:239)(cid:200) nasz(cid:200) niepodzieln(cid:200) uwag(cid:218) zyskaj(cid:200) w rozdziale 8. „Narz(cid:218)dzia”, np. regu(cid:239)y wyrównywania tekstu, ukrywania elementu lub ustawiania kontekstowego koloru dla ostrze(cid:285)e(cid:241). Wspierane przegl(cid:200)darki Framework wspiera wszystkie najnowsze, stabilne wersje wspó(cid:239)czesnych przegl(cid:200)darek zarówno na desktopach jak i urz(cid:200)dzeniach mobilnych: Firefoksa, Chrome’a, Opery, Safari, Internet Explorera 10-11 i Microsoft Edge’a. Co wi(cid:218)cej: 21 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Alternatywne przegl(cid:200)darki, które u(cid:285)ywaj(cid:200) ostatniej wersji WebKita, Blinka lub Gecko, czy to bezpo(cid:258)rednio, czy te(cid:285) API przegl(cid:200)darek udost(cid:218)pnianych przez system operacyjny, nie s(cid:200) wspierane wprost. Jednak(cid:285)e Bootstrap powinien (w wi(cid:218)kszo(cid:258)ci przypadków) dzia(cid:239)a(cid:202) prawid(cid:239)owo równie(cid:285) i w tych przegl(cid:200)darkach. Bardziej szczegó(cid:239)owe informacje znajduj(cid:200) si(cid:218) poni(cid:285)ej. ((cid:283)ród(cid:239)o: oficjalna dokumentacja Bootstrapa 4) Nale(cid:285)y podkre(cid:258)li(cid:202), (cid:285)e w przeciwie(cid:241)stwie do swojego poprzednika Bootstrap 4 nie wspiera ju(cid:285) Internet Explorera w wersji 9 i wcze(cid:258)niejszych. Decyzja o wsparciu jedynie nowszych wersji Internet Explorera by(cid:239)a rozs(cid:200)dna, poniewa(cid:285) Microsoft nie oferuje ju(cid:285) pomocy technicznej ani aktualizacji dla wersji 8 i wcze(cid:258)niejszych (stan na stycze(cid:241) 2016 r.). Co wi(cid:218)cej, jak przekonamy si(cid:218) w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki, Bootstrap 4 opiera si(cid:218) na flexboksie, który równie(cid:285) nie jest wspierany przez starsze przegl(cid:200)darki. Ponadto Internet Explorer 8 (i wcze(cid:258)niejsze) nie wspiera jednostek rem, co oznacza, (cid:285)e Boot- strap 4 musia(cid:239)by zapewni(cid:202) rozwi(cid:200)zanie problemu. To implikowa(cid:239)oby wiele dodatkowej pracy dla programistów i potencjalnych nie(cid:258)cis(cid:239)o(cid:258)ci. Poza tym tworzenie responsywnych stron dla Internet Explorera 8 (i wcze(cid:258)niejszych) jest trudne, bo przegl(cid:200)darka nie obs(cid:239)uguje media queries w CSS-ie. Bior(cid:200)c pod uwag(cid:218) te trzy rzeczy, porzucenie wsparcia dla Internet Explorera by(cid:239)o najbardziej rozs(cid:200)dn(cid:200) decyzj(cid:200). Sass zamiast Less Less i Sass (Syntactically Awesome Stylesheets) s(cid:200) rozszerzeniami j(cid:218)zyka CSS — tzn. s(cid:200) j(cid:218)zykami, które rozszerzaj(cid:200) s(cid:239)ownictwo CSS-u, (cid:285)eby uczyni(cid:202) prostszym tworzenie wielu olbrzymich i kom- pleksowych arkuszy stylów. Mimo (cid:285)e Less i Sass s(cid:200) diametralnie ró(cid:285)nymi j(cid:218)zykami, to sposób, w jaki rozszerzaj(cid:200) CSS, jest taki sam — oba opieraj(cid:200) si(cid:218) na preprocesorze. Podczas gdy two- rzymy swoj(cid:200) wersj(cid:218), preprocesor jest uruchomiony i parsuje skrypt Less/Sass, zamieniaj(cid:200)c instrukcje Less lub Sass na czysty CSS. Less jest oficjalnym j(cid:218)zykiem Bootstrapa 3, a Bootstrap 4 zosta(cid:239) napisany od nowa, ca(cid:239)kowicie w Sassie. Less i Sass s(cid:200) skompilowane w CSS do pliku bootstrap.css. Jednocze(cid:258)nie zosta(cid:239)a utwo- rzona wersja zminiaturyzowana — bootstrap.min.css — oraz pliki map. To ten plik CSS-u, do którego b(cid:218)dziemy si(cid:218) odwo(cid:239)ywa(cid:202) przez ca(cid:239)(cid:200) ksi(cid:200)(cid:285)k(cid:218) (z wyj(cid:200)tkiem rozdzia(cid:239)u 3. „Tworzenie layoutu”). W konsekwencji nie musisz zna(cid:202) Sassa, (cid:285)eby nad(cid:200)(cid:285)y(cid:202) za ksi(cid:200)(cid:285)k(cid:200). Jednak(cid:285)e zach(cid:218)camy, aby(cid:258) przerobi(cid:239) 20-minutowy kurs wprowadzaj(cid:200)cy do Sassa, je(cid:285)eli jest to dla Ciebie komplet- na nowo(cid:258)(cid:202). Mo(cid:285)esz by(cid:202) pewny, (cid:285)e je(cid:258)li znasz CSS, nie b(cid:218)dziesz potrzebowa(cid:202) niczego wi(cid:218)cej. Sk(cid:239)adnia j(cid:218)zyka jest bardzo zbli(cid:285)ona do normalnego CSS-u, a jego podstawowe koncepcje s(cid:200) podobne do zawartych w dowolnym j(cid:218)zyku programowania. Od pikseli do root emów W przeciwie(cid:241)stwie do swojego poprzednika Bootstrap 4 nie u(cid:285)ywa ju(cid:285) pikseli (px) jako jednostki miary typograficznej. Korzysta za to z root emów (rem). Rozumowanie stoj(cid:200)ce za wyborem rem jest oparte na powszechnym problemie z pikselami: strony u(cid:285)ywaj(cid:200)ce pikseli mog(cid:200) nie 22 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa renderowa(cid:202) si(cid:218) poprawnie lub nie tak, jak zak(cid:239)adano, poniewa(cid:285) u(cid:285)ytkownicy zmieniaj(cid:200) wielko(cid:258)(cid:202) czcionek przegl(cid:200)darki. Wykorzystanie jednostki miary, która jest powi(cid:200)zana z korzeniem strony, pomaga w rozwi(cid:200)zaniu tego problemu, gdy(cid:285) elementowi bazowemu zostan(cid:200) nadane wymiary relatywnie do bazowej czcionki przegl(cid:200)darki internetowej. W efekcie strona zostanie przeskalowana odpowiednio do korzenia. Typograficzne jednostki miary Ujmuj(cid:200)c to prosto: typograficzne jednostki miary determinuj(cid:200) rozmiar elementów i czcionki. Najcz(cid:218)(cid:258)ciej u(cid:285)ywanymi jednostkami s(cid:200) px i em. Pierwsze jest skrótem od piksel i jako punkt odniesienia, konieczny do podania dok(cid:239)adnego rozmiaru czcionki, wykorzystuje piksel. To znaczy, (cid:285)e dla wy(cid:258)wietlacza o rozdzielczo- (cid:258)ci 96 punktów na cal (dots per inch — dpi) 1 px b(cid:218)dzie równy faktycznemu pikselowi na ekranie. W przypadku wy(cid:285)szych rozdzielczo(cid:258)ci piksel referencyjny spowoduje przeskalowanie piksela tak, aby pokrywa(cid:239) si(cid:218) z rozdzielczo(cid:258)ci(cid:200) wy(cid:258)wietlacza. Przyk(cid:239)adowo: czcionka o rozmiarze 100 px oznacza, (cid:285)e czcionka ma dok(cid:239)adnie rozmiar 100 pikseli (na wy(cid:258)wietlaczu 96 dpi) bez wzgl(cid:218)du na inne elementy na stronie. Em jest jednostk(cid:200) miary powi(cid:200)zan(cid:200) z rodzicem elementu, do którego jest przypisywana. Przyk(cid:239)adowo: je(cid:258)li mieliby(cid:258)my dwa zagnie(cid:285)d(cid:285)one elementy div: zewn(cid:218)trzny element z czcionk(cid:200) o wielko(cid:258)ci 100 px i wewn(cid:218)trzny z czcionk(cid:200) o wielko(cid:258)ci 2 em, to czcionka wewn(cid:218)trznego elementu zosta(cid:239)aby przetrans- ponowana do wielko(cid:258)ci 200 px (w tym przypadku 1 em = 100 px). Problem z u(cid:285)ywaniem jednostki, która jest powi(cid:200)zana z elementem nadrz(cid:218)dnym, polega na tym, (cid:285)e wzrasta stopie(cid:241) skomplikowania ca(cid:239)ego kodu — zagnie(cid:285)d(cid:285)anie elementów utrudnia obliczenia wielko(cid:258)ci. Ostatnio wprowadzona jednostka rem ma na celu zlikwidowanie wad em i px oraz po(cid:239)(cid:200)czenie ich mocnych stron. Rem nie jest ju(cid:285) relatywny do elementu nadrz(cid:218)dnego, ale do korzenia strony. Mieszanie prefiksów Poniewa(cid:285) przy automatycznym dodawaniu prefiksów do regu(cid:239) CSS-u Bootstrap 4 polega na narz(cid:218)dziu zwanym Autoprefixer, domieszki z prefiksami dla ró(cid:285)nych przegl(cid:200)darek okaza(cid:239)y si(cid:218) niepo(cid:285)(cid:200)dane w wersji 3.2 i zosta(cid:239)y teraz ca(cid:239)kowicie usuni(cid:218)te. Dodatkowo równie(cid:285) poni(cid:285)sze domieszki zosta(cid:239)y usuni(cid:218)te ((cid:283)ród(cid:239)o: dokumentacja Bootstrapa 4 — https://getbootstrap.com/ docs/4.0/migration/): animation, animation-delay, animation-direction, animation-duration, (cid:180)animation-fill-mode, animation-iteration-count, animation-name, (cid:180)animation-timing-function, backface-visibility, box-sizing, content-columns, (cid:180)hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, (cid:180)scale, scaleX, scaleY, skew, transform-origin, transition-delay, (cid:180)transition-duration, transition-property, transition-timing-function, (cid:180)transition-transform, translate, translate3d, user-select. Ikony Do Bootstrapa 3 do(cid:239)(cid:200)czono Glifikony — (cid:239)adn(cid:200) kolekcj(cid:218) ponad 250 czcionek gotowych do u(cid:285)ycia. W teorii s(cid:200) wspania(cid:239)e, jednak praktyka przynosi kilka problemów: 23 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe (cid:81) ikony mog(cid:200) spowodowa(cid:202) awari(cid:218) czytników z syntezatorami mowy, poniewa(cid:285) b(cid:218)d(cid:200) si(cid:218) one stara(cid:239)y przeczyta(cid:202) ikon(cid:218); (cid:81) w przypadku czcionek wspieraj(cid:200)cych czytanie ikony si(cid:218) nie wy(cid:258)wietlaj(cid:200); (cid:81) je(cid:285)eli ikony si(cid:218) nie wy(cid:258)wietl(cid:200), przegl(cid:200)darka zast(cid:200)pi je domy(cid:258)ln(cid:200) czcionk(cid:200); kontrolki korzystaj(cid:200)ce z tych ikon b(cid:218)d(cid:200) w najlepszym wypadku wygl(cid:200)da(cid:202) zabawnie. Te trzy problemy po(cid:239)(cid:200)czone z ch(cid:218)ci(cid:200) uczynienia Bootstrapa 4 prostszym w u(cid:285)yciu doprowadzi(cid:239)y programistów do decyzji o usuni(cid:218)ciu glifikon (aczkolwiek nie przeszkadza to w samodzielnym do(cid:239)(cid:200)czeniu ikon przez u(cid:285)ytkowników). Szablony Bootstrap 4 dostarcza kolekcj(cid:218) szablonów premium. W czasie pisania ksi(cid:200)(cid:285)ki dost(cid:218)pne by(cid:239)y trzy ró(cid:285)ne szablony: (cid:81) Dashboard — zawiera komponenty premium dla stron administracyjnych i analitycznych; (cid:81) Marketing — dla generycznych stron marketingowych i e-commerce; (cid:81) Application — zawiera komponenty i narz(cid:218)dzia do budowy generycznych aplikacji webowych (zob. rysunek 1.9). Rysunek 1.9. Szablon premium, Application, ze strony https://themes.getbootstrap.com/ Ka(cid:285)dy z tych tematów bezproblemowo wspó(cid:239)pracuje z Bootstrapem 4 i prezentuje wszystkie jego zalety. Licencja do wielokrotnego wykorzystania tych szablonów kosztuje 49 dolarów, roz- szerzona licencja natomiast ma cen(cid:218) 499 dolarów i pozwala na redystrybucj(cid:218) oraz odsprzedanie. 24 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa Kosmetyka Programi(cid:258)ci po(cid:239)o(cid:285)yli szczególny nacisk na dopasowanie Bootstrapa 4 do indywidualnych potrzeb u(cid:285)ytkownika. Zosta(cid:239)o wprowadzonych wiele nowych zmiennych, aby w prosty sposób mo(cid:285)na by(cid:239)o dokona(cid:202) po(cid:285)(cid:200)danych zmian. Za pomoc(cid:200) zmiennych Sass $enabled-*- (do znale- zienia w node_modules/bootstrap/scss/_variables.scss) mo(cid:285)na teraz w(cid:239)(cid:200)czy(cid:202) lub wy(cid:239)(cid:200)czy(cid:202) dane ustawienia globalne CSS-u. Przygotowanie projektu Teraz, kiedy wiemy, czego si(cid:218) spodziewa(cid:202) po Bootstrapie, przygotujmy nasz projekt: 1. Utwórzmy nowy katalog projektu i nazwijmy go MojaFotka. To b(cid:218)dzie g(cid:239)ówny katalog naszego projektu. 2. Utwórzmy pusty plik index.html i wstawmy do niego poni(cid:285)szy kod: !DOCTYPE html html lang= pl head meta charset= utf-8 meta name= viewport content= width=device-width, initial-scale=1, (cid:180)shrink-to-fit=no meta http-equiv= x-ua-compatible content= ie=edge title MojaFotka /title /head body div class= alert alert-success Witaj, (cid:258)wiecie! /div /body /html Zwró(cid:202)my uwag(cid:218) na trzy znaczniki meta. Pierwszy z nich informuje przegl(cid:200)dark(cid:218), (cid:285)e dokument jest kodowany w utf-8. Jako (cid:285)e Bootstrap optymizuje swoje tre(cid:258)ci dla urz(cid:200)dze(cid:241) mobilnych, konieczny jest kolejny znacznik meta, aby wesprze(cid:202) skalowanie okna roboczego. Ostatni znacznik meta wymusza na przegl(cid:200)darce renderowanie dokumentu za pomoc(cid:200) trybu renderowania ostatniego dokumentu dost(cid:218)pnego podczas korzystania z Internet Explorera. 3. Otwórzmy w przegl(cid:200)darce plik index.html. Powinna si(cid:218) ukaza(cid:202) pusta strona z napisem Witaj, (cid:258)wiecie. Nadszed(cid:239) czas, aby za(cid:239)(cid:200)czy(cid:202) Bootstrapa. Jego trzon stanowi s(cid:239)awny arkusz stylów CSS-u. Bootstrap demonstruje pot(cid:218)(cid:285)ne cechy CSS-u przy zachowaniu prostej w u(cid:285)yciu sk(cid:239)adni. Poniewa(cid:285) jest to arkusz stylów, do(cid:239)(cid:200)czamy go do projektu tak samo jak ka(cid:285)dy inny wykonany samodzielnie arkusz stylów — tzn. otwieramy index.html i linkujemy bezpo(cid:258)rednio do arkusza. 25 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Skalowanie okna roboczego Termin okno robocze (viewport) odnosi si(cid:218) do rozmiaru wy(cid:258)wietlacza dost(cid:218)pnego dla renderowania tre(cid:258)ci strony. Metaznacznik viewport pozwala zdefiniowa(cid:202) ten dost(cid:218)pny rozmiar. Skalowanie viewportu za pomoc(cid:200) metaznacznika zosta(cid:239)o po raz pierwszy wprowadzone przez Apple, a w trakcie pisania ksi(cid:200)(cid:285)ki jest wspierane przez wszystkie g(cid:239)ówne przegl(cid:200)darki. Za pomoc(cid:200) parametru width mo(cid:285)emy zdefiniowa(cid:202) dok(cid:239)adn(cid:200) szeroko(cid:258)(cid:202) okna roboczego (viewportu) u(cid:285)ytkownika. Przyk(cid:239)adowo meta name= viewport content= width=320 wyda instrukcj(cid:218) przegl(cid:200)- darce, aby ustawi(cid:239)a szeroko(cid:258)(cid:202) okna na 320 px. Umiej(cid:218)tno(cid:258)(cid:202) kontrolowania szeroko(cid:258)ci okna jest przy- datna w trakcie tworzenia stron przyjaznych urz(cid:200)dzeniom mobilnym. Domy(cid:258)lnie przegl(cid:200)darki mobilne b(cid:218)d(cid:200) próbowa(cid:239)y zmie(cid:258)ci(cid:202) ca(cid:239)(cid:200) stron(cid:218) w swoim oknie, pomniejszaj(cid:200)c wszystko tak dalece, jak to mo(cid:285)liwe. To pozwala u(cid:285)ytkownikom ogl(cid:200)da(cid:202) strony, które nie by(cid:239)y przeznaczone do u(cid:285)ytku mobilnego, i wchodzi(cid:202) w interakcj(cid:218) z nimi. Jednak(cid:285)e Bootstrapowi przy(cid:258)wieca filozofia „najpierw urz(cid:200)dzenia mobilne”, wi(cid:218)c pomniejszanie b(cid:218)dzie stanowi(cid:239)o niepo(cid:285)(cid:200)dany skutek uboczny. Przyk(cid:239)adowo: punkty graniczne (które omó- wimy w rozdziale 2. „Deklarowanie stylu”), nie b(cid:218)d(cid:200) ju(cid:285) dzia(cid:239)a(cid:239)y jak trzeba, poniewa(cid:285) b(cid:218)d(cid:200) musia(cid:239)y sobie radzi(cid:202) z pomniejszonym odpowiednikiem na stronie. Dlatego jednoznaczne zdefiniowanie szeroko(cid:258)ci okna jest tak wa(cid:285)ne. Gdy wpiszemy content= width=device-width, initial-scale=1, shrink- -to-fit=no”, informujemy przegl(cid:200)dark(cid:218), (cid:285)e: (cid:81) chcemy, aby szeroko(cid:258)(cid:202) okna by(cid:239)a równa faktycznej szeroko(cid:258)ci okna na urz(cid:200)dzeniu; (cid:81) nie chcemy (cid:285)adnego pocz(cid:200)tkowego powi(cid:218)kszenia; (cid:81) nie chcemy, aby tre(cid:258)(cid:202) zosta(cid:239)a zmniejszona w celu zmieszczenia jej w oknie. Na tym etapie b(cid:218)dziemy u(cid:285)ywa(cid:202) instalacji Bootstrapa hostowanej na oficjalnym Content De- livery Network (CDN)1. W(cid:239)(cid:200)czymy w tym celu nast(cid:218)puj(cid:200)cy znacznik HTML do sekcji head do- kumentu HTML (sekcja head w dokumencie odnosi si(cid:218) do tre(cid:258)ci zawartej pomi(cid:218)dzy head znacznikiem otwieraj(cid:200)cym i /head zamykaj(cid:200)cym): link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/bootstrap/ (cid:180)4.0.0/css/bootstrap.min.css Bootstrap polega na jQuery, frameworku JavaScriptu, który stanowi abstrakcj(cid:218) pozwalaj(cid:200)c(cid:200) na uproszczenie najcz(cid:218)stszych operacji JavaScriptu (takich jak selekcja elementów i obs(cid:239)uga zdarze(cid:241)). Je(cid:285)eli chcia(cid:239)by(cid:258) wykorzysta(cid:202) Bootstrapa jedynie do nadania stronie szkieletu, nie musisz do(cid:239)(cid:200)cza(cid:202) plików JS. Te pliki potrzebne s(cid:200) jedynie, gdy wykorzystuje si(cid:218) który(cid:258) z nast(cid:218)pu- j(cid:200)cych komponentów: (cid:81) ostrze(cid:285)enia, (cid:81) przyciski, (cid:81) karuzele, (cid:81) zwijana tre(cid:258)(cid:202), (cid:81) rozwijane listy, 1 Polecamy t(cid:218) metod(cid:218) równie(cid:285), gdyby opisywany przez autora proces instalowania poszczególnych komponentów z ró(cid:285)nych powodów okaza(cid:239) si(cid:218) niemo(cid:285)liwy na komputerze Czytelnika lub nie przyniós(cid:239) oczekiwanych rezultatów. Dotyczy to nie tylko linku do samego Bootstrapa, ale tak(cid:285)e np. do zbioru Font Awesome (https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css), o którym b(cid:218)dzie mowa w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki. — przyp. t(cid:239)um. 26 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa (cid:81) paski nawigacyjne, (cid:81) podpowiedzi, (cid:81) Scrollspy. Poniewa(cid:285) b(cid:218)dziemy korzysta(cid:202) ze wszystkich wymienionych powy(cid:285)ej elementów, musimy do(cid:239)(cid:200)czy(cid:202) do Bootstrapa plik JavaScriptu, a najpierw musimy do(cid:239)(cid:200)czy(cid:202) jQuery. Oba w(cid:239)(cid:200)czenia powinny zosta(cid:202) wprowadzone przed znacznikiem zamykaj(cid:200)cym /body . Dodajmy do dokumentu HTML nast(cid:218)puj(cid:200)ce linijki: script src= https://code.jquery.com/jquery-3.2.1.slim.min.js /script script src= https://cdnjs.cloudflare.com/ajax/libs/popper.js/ (cid:180)1.12.9/umd/popper.min.js /script script src= https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js /script Te skrypty oczywi(cid:258)cie mog(cid:239)yby zosta(cid:202) wgrane na górze strony. Jednak(cid:285)e wgrywanie ich na dole dokumentu jest uwa(cid:285)ane za najlepsz(cid:200) praktyk(cid:218) i przyspiesza (cid:239)adowanie strony oraz pozwala omin(cid:200)(cid:202) problemy z JavaScriptem, które nie pozwoli(cid:239)yby stronie si(cid:218) wczyta(cid:202). Dzieje si(cid:218) tak dlatego, (cid:285)e przegl(cid:200)darki nie (cid:258)ci(cid:200)gaj(cid:200) równolegle wszystkich zale(cid:285)no(cid:258)ci (aczkolwiek pewna liczba zapyta(cid:241) tworzona jest asynchronicznie, w zale(cid:285)no(cid:258)ci od przegl(cid:200)darki i domeny). Konsekwentnie: wymuszenie na przegl(cid:200)darce wczesnego (cid:258)ci(cid:200)gni(cid:218)cia zale(cid:285)no(cid:258)ci zablokuje renderowanie strony do czasu (cid:258)ci(cid:200)gni(cid:218)cia tych elementów. Co wi(cid:218)cej: upewnienie si(cid:218), (cid:285)e skrypty zosta(cid:239)y za(cid:239)adowane, zagwarantuje, (cid:285)e w momencie odwo(cid:239)ania si(cid:218) do operacji Document Object Model (DOM) w skrypcie mamy pewno(cid:258)(cid:202), (cid:285)e elementy strony zosta(cid:239)y ju(cid:285) zrenderowane. W rezultacie mo(cid:285)emy omin(cid:200)(cid:202) sprawdzanie, czy dane elementy istniej(cid:200). Czym jest Content Delivery Network? Celem Content Delivery Network (CDN) jest udost(cid:218)pnienie u(cid:285)ytkownikom tre(cid:258)ci o najwy(cid:285)szym po- ziomie dost(cid:218)pno(cid:258)ci. To znaczy, (cid:285)e CDN stara si(cid:218) udost(cid:218)pni(cid:202) tre(cid:258)ci tak, (cid:285)eby nigdy (lub bardzo rzadko) nie by(cid:239)y one niedost(cid:218)pne. W tym celu tre(cid:258)ci s(cid:200) zazwyczaj przechowywane na du(cid:285)ych, zdecentralizo- wanych serwerach. CDN w zasadzie pozwala pod(cid:239)(cid:200)czy(cid:202) si(cid:218) do arkusza stylów Bootstrapa, zwalniaj(cid:200)c u(cid:285)ytkownika z konieczno(cid:258)ci jego samodzielnego hostowania. Teraz nale(cid:285)y zapisa(cid:202) zmiany i ponownie uruchomi(cid:202) index.html w przegl(cid:200)darce. (cid:146)a(cid:241)cuch Witaj, (cid:258)wiecie powinien teraz mie(cid:202) zielone t(cid:239)o (rysunek 1.10). Rysunek 1.10. Witaj, (cid:258)wiecie z u(cid:285)yciem Bootstrapa 4 Teraz, kiedy mamy ju(cid:285) Boostrapa w naszym projekcie, otwórzmy konsol(cid:218) przegl(cid:200)darki (na Chromie pod Windowsem to skrót Ctrl+Shift+I; na MacOS X mo(cid:285)esz nacisn(cid:200)(cid:202) Cmd+Alt+I). 27 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Do wy(cid:258)wietlenia wyskakuj(cid:200)cych okienek i podpowiedzi Bootstrap wymaga zewn(cid:218)trznej biblio- teki Popper, wi(cid:218)c konsola poinformuje o b(cid:239)(cid:218)dzie (rysunek 1.6). Ilustruje to rysunek 1.11. Rysunek 1.11. Narz(cid:218)dzia deweloperskie Chrome’a mo(cid:285)na otworzy(cid:202), wybieraj(cid:200)c kolejno z menu: Wi(cid:218)cej narz(cid:218)dzi, a nast(cid:218)pnie klikaj(cid:200)c Narz(cid:218)dzia dla programistów. Po prawej stronie pojawi si(cid:218) nowe okno. Na karcie Konsola wy(cid:258)wietli si(cid:218) b(cid:239)(cid:200)d z powodu braku elementu zale(cid:285)nego Popper dost(cid:218)pny jest poprzez CloudFlare CDN i sk(cid:239)ada si(cid:218) z pliku CSS-u oraz JavaScriptu. Zale(cid:285)no(cid:258)(cid:202) jest bibliotek(cid:200), która pozwala na proste pozycjonowanie podpowiedzi oraz wyska- kuj(cid:200)cych okien i zajmuje ok. 6 KB. Trzeba zaznaczy(cid:202), (cid:285)e dla Bootstrapa wymagana jest wersja 1.12.9, aczkolwiek framework wci(cid:200)(cid:285) b(cid:218)dzie dzia(cid:239)a(cid:239) prawid(cid:239)owo (z wyj(cid:200)tkiem podpowiedzi oraz wyskakuj(cid:200)cych okienek), je(cid:285)eli biblioteka zostanie do(cid:239)(cid:200)czona w nieprawid(cid:239)owej wersji: !DOCTYPE html html lang= pl head meta charset= utf-8 meta name= viewport content= width=device-width, initial-scale=1, shrink-to-fit=no meta http-equiv= x-ua-compatible content= ie=edge title MojaFotka /title link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/ bootstrap/4.0.0/css/bootstrap.min.css /head body div class= alert alert-success Witaj, (cid:258)wiecie! /div script src= https://code.jquery.com/jquery-3.2.1.slim.min.js /script script src= https://cdnjs.cloudflare.com/ajax/libs/popper. (cid:180)js/ 1.12.9/umd/popper.min.js /script script src= https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/ (cid:180)bootstrap.min.js /script /body /html 28 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa CDN jest warto(cid:258)ciowym udogodnieniem, jednak(cid:285)e istnieje kilka powodów, dla których czasami korzystanie z zewn(cid:218)trznego CDN mo(cid:285)e nie by(cid:202) po(cid:285)(cid:200)dane: (cid:81) CDN przynosi dodatkow(cid:200) przyczyn(cid:218) mo(cid:285)liwej awarii, poniewa(cid:285) polegasz na zewn(cid:218)trznych serwerach; (cid:81) prywatno(cid:258)(cid:202) i bezpiecze(cid:241)stwo u(cid:285)ytkowników mog(cid:200) by(cid:202) zagro(cid:285)one, gdy(cid:285) nie ma gwarancji, (cid:285)e dostawca CDN nie przemyci z(cid:239)o(cid:258)liwego kodu do hostowanych bibliotek, jak równie(cid:285) nie ma pewno(cid:258)ci, (cid:285)e CDN nie b(cid:218)dzie (cid:258)ledzi(cid:202) u(cid:285)ytkowników; (cid:81) niektóre CDN mog(cid:200) by(cid:202) blokowane przez dostawców w ró(cid:285)nych regionach geograficznych; (cid:81) je(cid:258)li b(cid:218)dziesz polega(cid:202) na zdalnym CDN, prace offline nie b(cid:218)d(cid:200) mo(cid:285)liwe; (cid:81) nie b(cid:218)dziesz móg(cid:239) optymalizowa(cid:202) plików hostowanych na CDN; ta utrata kontroli mo(cid:285)e mie(cid:202) wp(cid:239)yw na zachowanie przegl(cid:200)darki (aczkolwiek cz(cid:218)(cid:258)ciej ni(cid:285) rzadziej dostajesz zoptymalizowan(cid:200) wersj(cid:218) biblioteki poprzez CDN). Zamiast polega(cid:202) na CDN, mo(cid:285)na samodzielnie (cid:258)ci(cid:200)gn(cid:200)(cid:202) jQuery, Poppera i pliki projektu Bootstrap. Nast(cid:218)pnie mo(cid:285)na skopiowa(cid:202) te biblioteki do g(cid:239)ównego katalogu projektu i podlinko- wa(cid:202) je do plików dystrybucyjnych. Przewag(cid:200) tego sposobu jest to, (cid:285)e r(cid:218)czne utrzymywanie ko- lekcji zale(cid:285)no(cid:258)ci mo(cid:285)e szybko sta(cid:202) si(cid:218) k(cid:239)opotliwe i prawie niemo(cid:285)liwe, gdy zwi(cid:218)ksz(cid:200) si(cid:218) rozmiar i stopie(cid:241) skomplikowania strony. Dlatego nie b(cid:218)dziemy (cid:258)ci(cid:200)ga(cid:202) Bootstrapa samodzielnie. Zamiast tego polecimy NPM, by to zrobi(cid:239). NPM jest systemem zarz(cid:200)dzania pakietami — narz(cid:218)dziem, którego mo(cid:285)na u(cid:285)y(cid:202) do zarz(cid:200)dzania zale(cid:285)no(cid:258)ciami swojej strony. Automatycznie (cid:258)ci(cid:200)ga, organizuje i (na komend(cid:218)) uaktualnia zale(cid:285)no(cid:258)ci strony. Aby zainstalowa(cid:202) NPM, nale(cid:285)y przej(cid:258)(cid:202) do https://www.npmjs.com/get-npm. Kiedy NPM zostanie zainstalowany, trzeba otworzy(cid:202) terminal, przej(cid:258)(cid:202) do g(cid:239)ównego katalogu swojego projektu (tego, który zosta(cid:239) przygotowany wcze(cid:258)niej) i przej(cid:200)(cid:202) kontrol(cid:218) nad instalacj(cid:200) Bootstrapa: npm init npm install bootstrap Zostanie utworzony nowy folder w strukturze projektu: | node_modules | bootstrap | LICENSE | README.md | package.json | dist | js | scss Wszystkie te pliki i katalogi zostan(cid:200) wyja(cid:258)nione pó(cid:283)niej. Na razie mo(cid:285)emy spokojnie zignoro- wa(cid:202) wszystko oprócz katalogu dist znajduj(cid:200)cego si(cid:218) w node_modules/bootstrap/. Nale(cid:285)y otworzy(cid:202) katalog dist. Powinni(cid:258)my zobaczy(cid:202) dwa podfoldery: (cid:81) css, (cid:81) js. 29 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Nazwa dist oznacza dystrybucj(cid:218). Zazwyczaj katalog dystrybucji zawiera gotowy kod, który u(cid:285)yt- kownicy mog(cid:200) wykorzysta(cid:202). Jak sama nazwa wskazuje, katalog css wewn(cid:200)trz dist zawiera gotowe do u(cid:285)ycia arkusze stylów. Podobnie katalog js zawiera pliki JavaScriptu, które kompo- nuj(cid:200) Bootstrapa. Aby si(cid:218) odwo(cid:239)a(cid:202) do lokalnego pliku CSS-u w naszym index.html, zmodyfikujmy atrybut href znacznika linku, który si(cid:218) odwo(cid:239)uje do bootstrap.min.css: link rel= stylesheet href= node_modules/bootstrap/dist/css/bootstrap.min.css To samo zróbmy z plikiem JavaScriptu: script src= node_modules/bootstrap/dist/js/bootstrap.min.js /script Powtórzmy ten proces dla jQuery i Poppera. Aby zainstalowa(cid:202) jQuery za pomoc(cid:200) NPM, u(cid:285)yjmy poni(cid:285)szej komendy: npm install jquery@ =3.0.0 Tak jak poprzednio nowy folder zostanie utworzony wewn(cid:200)trz folderu node_modules: | node_modules | jquery | AUTHORS.txt | LICENSE.txt | README.md | bower.json | dist | external | package.json | src Tak jak poprzednio interesuje nas tylko zawarto(cid:258)(cid:202) folderu dist, który oprócz innych plików b(cid:218)dzie zawiera(cid:239) skompresowan(cid:200) wersj(cid:218) biblioteki jquery.min.js. Odwo(cid:239)ajmy si(cid:218) do tego pliku, modyfikuj(cid:200)c atrybut src skryptu, który w chwili obecnej wskazuje na jquery.min.js z CDN, zamieniaj(cid:200)c URL na (cid:258)cie(cid:285)k(cid:218) do naszej lokalnej kopii jQuery: script src= node_modules/jquery/dist/jquery.min.js /script Na koniec powtórzmy te kroki dla Poppera: npm install popper.js@^1.12.9 Gdy instalacja si(cid:218) zako(cid:241)czy, powstanie podobna struktura folderów jak poprzednio. Zweryfi- kujmy zawarto(cid:258)(cid:202) node_modules/popper.js/dist i zamie(cid:241)my odniesienie do CDN Poppera w pliku index.html na jego lokalny odpowiednik. Ko(cid:241)cowy plik index.html powinien wygl(cid:200)da(cid:202) nast(cid:218)puj(cid:200)co: !DOCTYPE html html lang= pl head meta charset= utf-8 30 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Podkr(cid:266)canie Bootstrapa meta name= viewport content= width=device-width, initial-scale=1, (cid:180)shrink-to-fit=no meta http-equiv= x-ua-compatible content= ie=edge title MojaFotka /title link rel= stylesheet href= node_modules/bootstrap/dist/css/bootstrap.min.css /head body div class= alert alert-success Witaj, (cid:258)wiecie! /div script src= node_modules/jquery/dist/jquery.min.js /script script src= node_modules/popper.js/dist/umd/popper.min.js /script script src= node_modules/bootstrap/dist/js/bootstrap.min.js /script /body /html Teraz trzeba od(cid:258)wie(cid:285)y(cid:202) index.html w przegl(cid:200)darce, aby si(cid:218) upewni(cid:202), (cid:285)e wszystko dzia(cid:239)a. Z jakiego IDE i przegl(cid:200)darki powinienem korzysta(cid:202), gdy przerabiam przyk(cid:239)ady z tej ksi(cid:200)(cid:285)ki? Chocia(cid:285) polecamy IDE firmy JetBrains czy Sublime Text oraz Google Chrome, mo(cid:285)esz wybra(cid:202) dowolne narz(cid:218)dzie. Nasz gust co do IDE i przegl(cid:200)darki jest subiektywny. Jednak(cid:285)e trzeba pami(cid:218)ta(cid:202), (cid:285)e Bootstrap 4 nie wspiera Internet Explorera 9 i wcze(cid:258)niejszych. Je(cid:285)eli zatem korzystasz z IE9, powiniene(cid:258) zaktualizowa(cid:202) go do najnowszej wersji. Podsumowanie Celem tego rozdzia(cid:239)u by(cid:239)o wprowadzenie do Bootstrapa 4 i wyja(cid:258)nienie: (cid:81) co nam oferuje; (cid:81) dlaczego powinni(cid:258)my z niego korzysta(cid:202); (cid:81) jak rozpocz(cid:200)(cid:202) prac(cid:218). Teraz powiniene(cid:258) rozumie(cid:202), (cid:285)e Bootstrap pomaga deweloperom w tworzeniu strony, nadawa- niu jej struktury i stylizowaniu tre(cid:258)ci. Powiniene(cid:258) tak(cid:285)e wiedzie(cid:202), jak zainicjowa(cid:202) prost(cid:200) stron(cid:218) HTML. Podczas szerszej dyskusji nakre(cid:258)lili(cid:258)my i wyja(cid:258)nili(cid:258)my wa(cid:285)ne koncepcje w tworzeniu stron inter- netowych, takie jak: typograficzne jednostki miary czy definicj(cid:218), przeznaczenie i uzasadnienie u(cid:285)ycia sieci Content Delivery Network. 31 Poleć książkęKup książkę Bootstrap 4 dla zaawansowanych. Jak pisa(cid:252) znakomite aplikacje internetowe Na koniec zaznajomili(cid:258)my Ci(cid:218) z przyk(cid:239)adowym projektem — Moja Fotka — który b(cid:218)dzie obecny z nami przez reszt(cid:218) ksi(cid:200)(cid:285)ki i b(cid:218)dziemy z niego korzysta(cid:202), by zilustrowa(cid:202) sposób korzysta- nia z Bootstrapa, (cid:285)eby zaprojektowa(cid:202) wspó(cid:239)czesn(cid:200) stron(cid:218). Przejd(cid:283)my teraz do rozdzia(cid:239)u 2. „Deklarowanie stylu”, (cid:285)eby(cid:258)my mogli wprowadzi(cid:202) system siatkowy Bootstrapa, tworz(cid:200)c ogólny uk(cid:239)ad pierwszej strony naszego projektu. 32 Poleć książkęKup książkę Skorowidz A D akordeony, 226 AngularJS, 252 animacja, 187 animowanie siatki Salvattore’a, 191 arkusze stylów karuzeli, 164 ostrze(cid:285)enia, 157 automatyczne rozmieszczanie kolumn, 46 uruchamianie zada(cid:241), 240 biblioteka Hover, 192 Lightbox, 135 React, 262 Salvattore, 179, 261 Typeahead, 142 bootpag, 126 Bootstrap 4, 13, 16 breakpoint, 35 budowa pude(cid:239)kowa, 39 B C DataTables, 139 definicja klasy, 149 siatki, 42 stylu, 33 dodawanie animacji, 187 komponentów, 64 DOM, Document Object Model, 27 dostosowanie ostrze(cid:285)e(cid:241), 102 dynamika referencji, 254 dyrektywa testimonial, 260 dyrektywy, 257 element code, 218 sub, 219 sup, 219 flex, 50 listy, 222 elementy E F CDN, Content Delivery Network, 27 clearfix, 220 cytaty, 121 czas renderowania, 235 Flexbox, 17, 201 floating, 211 formatowanie danych, 220 Poleć książkęKup książkę Skorowidz formularze, 109 walidacja, 116 framework AngularJS, 252 Bootstrap, 4, 13, 16 galeria, 264 Grunt, 236 grupy list, 221
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje internetowe. Wydanie II
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: