Treść książki
Przejdź do opcji czytnikaPrzejdź do nawigacjiPrzejdź do informacjiPrzejdź do stopki
Systemsiatkowy
11
Rysunek3.Kopiowaniepodstawowejstrukturyplikuhtml
1ś2śSystemsiatkowy
Projektującstronyresponsywne,należywziąćpoduwagętypowerozdzielczościdla
urządzeńmobilnychorazekranówmonitorów.Odczegozacząć?Przedewszystkim
odutworzeniasiatki(ang.grid),którabędziestanowiłaszkieletnaszejstrony.
Systemsiatkowy,którystosujesięwBootstrapie,topodzieleniecałejstronyna
rzędyikolumny.Każdyrządskładasięzdwunastukolumn,którewsposóbdyna-
micznydopasowująsiędorozmiaruoknaprzeglądarki.Liczbarzędówniejestściśle
sprecyzowana–zależyonaodindywidulanychpotrzeb.
Większośćstronprojektowanajesttak,abypobokachzostawałoniecopustej
przestrzeni,dziękiczemustronajestbardziejprzejrzysta.WBootstrapiebędzie-
mykorzystalizklasy.container,któraautomatycznietworzymarginesyzlewej
iprawejstronyorazwyśrodkowujezawartość.Oilepodczasprojektowaniastronre-
sponsywnychw„czystym”HTML-umusieliśmypamiętaćosamodzielnymustawianiu
punktówgranicznych,którewskazywały,jakmasięzachowywaćstronaprzyokreślo-
nychrozdzielczościach,otyleBootstrapnaswtymwyręcza.Założonesąrozdziel-
czości:<768px,768–992px,992–1200pxoraz>1200px.Wystarczy,żetowiemy,
natomiastniemusimymartwićsięowłaściwedostosowanieszerokościelementów.
