Darbas su tinklalapiais reikalauja daug daugiau nei tik kalbų, kurias privalome naudoti, žinojimas. Yra keletas etapų, kuriuos turime įvykdyti, kad sukurtume išskirtinio rezultato produktą. Vienas iš šių etapų yra ekrane rodomų elementų dizainas ir išdėstymas.
Įsivaizduokime, kad turime sukurti tinklalapį, jei pradedame nuo nulio, turime atsižvelgti į tai, kaip turėtų atrodyti meniu, lentelės, mygtukai, tokie paprasti dalykai kaip piktogramos, kurias įdėsime ant kai kurių veiksmų mygtukų ir pan.
Kaip matome, tai sunkus darbas, ypač jei norime, kad jis atrodytų optimaliai ir patraukliai, taip pat turime būti išsamūs, kad svetainė taptų asmeniška, o ką daryti, jei nesame dizaineriai? Tai yra didelis klausimas, yra kūrėjų, kurie užmerkia akis, kai kalbama apie gerą skonį ir dizainą, ir tokio tipo profiliai neleidžiami kokybiškai pasirodyti žiniatinklyje. O kas, jei turime gerą skonį, bet mažai laiko projektuoti?
Norėdami išspręsti šiuos du didelius reikalavimus, turime Bootstrap kuris yra ne kas kita, kaip a CSS sistema tai leidžia mums iš karto gauti pagrindinį mūsų puslapio aspektą, nenukentėjus dėl dizaino, tačiau be to, jis taip pat padeda mums sukurti pagrindinius efektus ir yra ypatingas būdas struktūrizuoti turinį, kurį ketiname pateikti.
„Bootstrap“ pranašumaiMes tai jau žinome Bootstrap tai yra CSS sistema ir tai padeda mums nustatyti pagrindinius mūsų svetainės aspektus, tačiau, be to, ji turi tam tikrų pranašumų, susijusių su jos naudojimu, toliau matysime kai kuriuos teigiamus dalykus, kuriuos ji mums suteikia Bootstrap:
1. Pakartotinis naudojimasSu Bootstrap Turime daug komponentų, pagamintų pagal numatytuosius nustatymus, kad galėtume juos naudoti be pakeitimų įvairiose mūsų svetainės dalyse, taip sutrumpindami naudojamo kodo laiką ir kiekį. Tai taip pat skatina modulinę mūsų programų plėtrą.
2. NuoseklumasDėl to, kad turime daug bendro pobūdžio komponentų, kodas yra nuoseklus, tai yra, jis tvarko labai panašias struktūras, todėl jį skaitydami ar prižiūrėdami programą mes jau žinosime, kaip jis veikia daug paprasčiau.
3. Lankstus dizainasMobilus dizainas yra labai svarbus ir Bootstrap į tai atsižvelgiama nuo pat pradžių, mes turime lankstumą, kurį mūsų svetainė automatiškai pritaiko prie įvairių rezoliucijų ir ekrano išdėstymų, taip sutaupydami daug darbo nuo to, kad nuo pat pradžių turime kurti mobiliųjų vaizdus.
4. BendruomenėKitas aspektas, į kurį reikia atsižvelgti, yra dokumentai, kai mes naudojame trečiosios šalies sistemą, labai svarbu turėti, kur kreiptis, kai kyla abejonių ir šia prasme Bootstrap Jame nėra palyginimo, nes be didelių pastangų galime gauti beveik bet kokį atsakymą į savo abejones.
„Bootstrap“ trūkumaiNors beveik viskas yra gerai, mes taip pat turime kalbėti apie trūkumus ar ne tokius gerus aspektus, su kuriais susiduriame, kai tai naudojame CSS sistemaPažvelkime į kai kuriuos jo trūkumus žemiau.
1. Mažas originalusJei nesudarysime šiek tiek laiko savo dizainui, mes galime likti kuo mažiau originalūs, jei naudosime Bootstrap be daugiau, nors ši sistema yra skirta jai, dėl didelio jos priėmimo turime šiek tiek daugiau dirbti, kad neatrodytume kaip kopijos kopija.
2. Mokymosi kreivėMes, kaip ir viskas, turime pereiti mokymosi kreivę, jei norime iš to kuo geriau išnaudoti, problema ta, kad jei norime pereiti nuo pagrindinio aspekto prie pažangaus, šokas yra šiek tiek stiprus.
3. Prastas versijų suderinamumasPakeitus versiją, ankstesnė versija praranda daug galiojimo ir jei norime ją atnaujinti, tai mums kainuos, ypač jei padarėme svarbių pakeitimų, kad mūsų svetainė atrodytų kitaip.
MontavimasKai tik žinosime, kas tai yra Bootstrap, taip pat privalumus ir trūkumus, susijusius su jo naudojimu projektuose, turime pereiti prie praktinės pamokos dalies, o dabar sužinosime, iš kur galime gauti šią sistemą ir kaip ją įtraukti į savo projektą.
„Bootstrap“ gavimasPirmas dalykas, kurį turime padaryti, yra gauti reikiamus failus, kuriuos reikia įtraukti Bootstrap mūsų projekte, todėl turime apsilankyti jų svetainėje getbootstrap.com ir atsisiųsti reikiamus failus arba naudoti CDN kad išvengtumėte failų prieglobos mūsų serveryje ir sumažintumėte pralaidumo naudojimą.
Kad ir kokia būtų parinktis, jei lankydamiesi pagrindiniame puslapyje spustelėsime pradinio atsisiuntimo mygtuką, turime būti panašiame į šį puslapį:
DIDELIS
Kad palengvintume darbą, tarkime, kad atsisiuntėme projektą, jis yra suspaustame faile, kurį turime išgauti toje vietoje, kurią galime naudoti, ir tai turėtų būti kažkas panašaus į šį:
Kaip matome, mūsų projekte turi būti trys aplankai, vienas skirtas CSS, kitas - šaltiniai, kurie naudojami, ir galiausiai vienas JS būtinas. Su tuo mes jau turime Bootstrap, tai yra ne kas kita, kaip projekto kopijavimas į mūsų išteklių aplanką.
Pradėkite nuo „Bootstrap“Kadangi turime visus išteklius, turime tai įtraukti į savo dizainą, todėl galime sukurti failą HTML ir atlikę reikiamus įtraukimus, tai galime pamatyti išsamiau šiame kode:
„Bootstrap“ diegimasKaip matome, vienintelis dalykas, kurį padarėme, buvo trys failai, konkrečiai du .css ir a .js, tai mums reikia pradėti naudoti visą struktūrą, jei dabar atidarysime savo failą naršyklėje, pamatysime, kaip raidžių šriftas skiriasi nuo to, ką paprastai matytume su etikete H1:
„Bootstrap“ tinklelisNorėdami pasiekti mūsų dizaino organizavimą, Bootstrap naudokite tinklelį arba tinklelis, jį sudaro 12 stulpelių, todėl viskas, ką matome mūsų ekrane, turi būti sutvarkyta taip, todėl pasiekiama, kad puslapį būtų galima sukurti taip, kad galėtume pasinaudoti mums siūlomomis priemonėmis labai skaidriai.
Žinoma, tai yra prisitaikymo procesas, tačiau svarbu tai, kad galime sudaryti keletą stulpelių, taip pat kai dirbame su lentelėmis HTML kad mes galime sudaryti stulpelius su keliomis jungtimis su span ypatybe. Norėdami sukurti svetainę, kurioje naudojama ši struktūra, turime turėti tik šiuos dalykus:
DIV su klase konteineris, viduje div su klase eilėir galiausiai vieno ar kelių divų viduje su klase kopūstai, toliau esančiame kode pamatysime puslapio, kuriame yra 3 stulpeliai, pavyzdį, todėl kiekvienas stulpelis turi sugrupuoti 4, kad iš viso pridėtų 12, o tai, ką mes paaiškinome, yra numatytoji vertė Bootstrap.
Stulpeliai „Bootstrap“Taip gaunamas puslapis, kuriame trys vidiniai skyriai yra vienoje eilutėje, padalyti į tris vienodus stulpelius, kaip matome šiame paveikslėlyje:Pavyzdys, kaip naudoti stulpelius „bootstrap“
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam palengvina mano in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tik ex, prašymas dėl efektyvumo, vieta po to. Cras id semper felis. Būk ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Sveikasis skaičius eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam palengvina mano in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tik ex, prašymas dėl efektyvumo, vieta po to. Cras id semper felis. Būk ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Sveikasis skaičius eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam palengvina mano in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tik ex, prašymas dėl efektyvumo, vieta po to. Cras id semper felis. Būk ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Sveikasis skaičius eu eleifend mauris.
DIDELIS
Ši struktūra, nepaisant to, kad atrodo šiek tiek kvadratinė, yra labai lanksti, nes norėdami pasiekti norimų rezultatų turime tik suvaidinti tam tikrą žaidimą su konteineriais ir jų stulpeliais. Baigę šį vadovėlį, veiksmingai žengėme pirmuosius žingsnius Bootstrap ir dabar mes galime tiesiogiai pasinaudoti jo pranašumais savo projektuose ar žiniatinklio programose.
