„Bootstrap“ komponentų naudojimas

Bootstrap Jis turi du puikius tvirtus pagrindus, kurie suteikia mums standartinį atspirties tašką įvairiems žiniatinklio dizaino sprendimams, kurių mums reikia ar norime padaryti, tai yra tinklelis ir bazinė CSS, su šiais dviem įrankiais galime sukurti didelę centrinę bazę, kurioje galime įdėkite jį į visus skirtingus mūsų sąsajos elementus.
Kaip ir visos bazės, šios savaime neatlieka likusios konstrukcijos dalies, norint pasiekti didesnį įmantrumą ir detalumą, būtina naudoti papildomus komponentus, esančius mūsų bazėje, ir, žinoma, jų galia bus paveikta tvirtumo. iš pastarųjų.
Jeigu Bootstrap Turime kelis komponentus, kurie padeda mums maksimaliai išnagrinėti savo dizainą, komponentus, pradedant nuo piktogramų, skydų ir net antraščių. Elementai, padedantys atskirti ir paryškinti mūsų taikymą nuo kitų.
Sudedamosios dalys Bootstrap Jie gali būti naudojami mūsų puslapiuose nepriklausomai nuo kitų, tai yra, mes galime sukurti tiek komponentų, kiek mums reikia viename dokumente, ir jie neprieštarauja kitiems.
Be to, pagrindinis stilius pagal numatytuosius nustatymus jau yra iš anksto apibrėžtas, todėl galime greitai ir be didelių pastangų sukurti savo programą, kur galiausiai galime pritaikyti visą savo programą, pakeisdami savo stilių pagrindinį stilių.
Komponentai gali būti CSS, „JavaScript“ arba abu, taigi kai kurie be Bazinė CSS jiems reikės trečiųjų šalių bibliotekų, tokių kaip „jQuery“, tai gali atrodyti šiek tiek nepatogu, tačiau realybė yra tokia, kad įgyvendinimas yra toks paprastas, kad net nesuprasime, kad naudojame daugiau dalykų nei numatyta pagal nutylėjimą Bootstrap.
Vienas iš pirmųjų komponentų, kurį turime suprasti, yra piktogramos, nes su šiomis mažomis vaizdo detalėmis mes galime priversti vartotoją suprasti bet kurios mūsų dizaino dalies funkcionalumą, taigi, kai matome didelės X žinome, kad tai susiję su dabartinio skyriaus uždarymu arba tuo atveju, jei matome piktogramą + žinosime, kad reikia ką nors pridėti.
GlifikonaiIn Bootstrap yra piktogramų biblioteka Glifikonai, yra labai populiarus kuriant žiniatinklį ir praktiškai suteikia mums kiekvieno veiksmo, kurį galime atlikti tinklalapyje, piktogramą, todėl mums tenka daug dirbti, nes mums nereikia galvoti apie tai, kaip ieškoti, kas suprojektuotų grafinius elementus šiais tikslais.
Kitame paveikslėlyje matome piktogramas, kurias turime tiesiogiai svetainėje Bootstrap:

DIDELIS

Tai tik nedidelis mūsų turimų piktogramų pavyzdys, tačiau naršydami oficialiame puslapyje pamatysime visas mūsų galimybes.
Šių piktogramų naudojimas yra labai paprastas, mes tiesiog turime pridėti klasę glifikonas prie stichijos HTML ir tada iš turimo sąrašo pridėkite atitinkamos piktogramos klasę. Piktogramos paprastai pridedamos prie tokių elementų kaip arba kadangi tokiu būdu mes užtikriname, kad jie būtų tik vizualūs, taip gauname geriausią įmanomą rezultatą. Toliau pateiktame kode pamatysime pavyzdį, kaip naudoti šį komponentą HTML.

 „Glyphicons“ naudojimas „Bootstrap“
Susimokėti; įmoka
Paštas
Vartotojai
Šiukšliadėžė
Atsijungti

Į šį kodą mes tiesiog įtraukėme savo bibliotekų intarpus Bootstrap atitinkamas, pridedamas „jQuery“ kaip trečiosios šalies biblioteka, tada pridėkite biblioteką js apie Bootstrap, svarbu išlaikyti šią tvarką, nes js biblioteka Bootstrap poreikis „jQuery“ ir jei jis įtrauktas, tai sukels mums klaidą įgyvendinant.
Tada savo viduje sukūrėme keletą skyrių, į kuriuos pridėjome GlifikonaiMūsų tikslams pakako piktogramų įdėjimo į etiketę. Jei vykdysime savo naršyklėje, gausime tokį rezultatą:

Kaip matome, piktogramos lydi pranešimus, suteikdamos jiems daugiau svorio ir supratimo, pavyzdžiui, paieškos laukelyje, jei kas nors nekalba angliškai, jis nesupras pranešimo PaieškaBet jei naudojote kompiuterines sistemas ir iš karto matote didinamojo stiklo piktogramą, žinote, kad tai reiškia paieškas, tai yra tikroji šio komponento galia.
Kitas svarbus komponentas yra naršymo skirtukai, kurie leidžia mums tvarkyti turinį tame pačiame puslapyje, taip išvengiant daug vietos ir taip palengvinant vartotojo gyvenimą, nes nereikia mokytis daugybės žiniatinklio programos skyrių.
Norėdami naudoti šiuos skirtukus, mums reikia klasės pagalbos nav, tai pašalina numatytąjį stilių HTML elementų ir jo sūnūs , taip palengvinant naudojimą ir vėliau pritaikant jį prie mūsų dizaino. Norėdami tai naudoti, mes tiesiog turime pridėti klases nav Y naršymo skirtukai prie elemento ir tokiu būdu gausime reikiamą rezultatą.
Pažiūrėkime šį kodą, kuriame įgyvendiname šį sprendimą, kaip ir ankstesniame pavyzdyje, turime įtraukti failus bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, pažiūrėkime mūsų kodą:

 „Glyphicons“ naudojimas „Bootstrap“

Saugumas
Įrašai
Turinys

Kaip pastebime elemento naudojimą su šia klase leidžia mums sukurti struktūrą HTML normalu, tačiau rezultatas, kurį matysime žemiau, suteikia mums kitą informacijos tvarkymo būdą. Galime pabrėžti dar vieną įdomų mūsų kodo aspektą, tai yra Glifikonai šiuo sprendimu parodydamas, ką mes paaiškiname apie elementų nepriklausomumą.

DIDELIS

Kitas labai naudingas komponentas yra išskleidžiamieji meniu, kurie leidžia sutelkti daugybę galimybių į mažą erdvę, ypač tiems tinklalapiams, kuriuose yra daug kategorijų, kurias jiems reikia sutvarkyti.
Išskleidžiamasis meniuKomponentas Bootstrap kas tai tvarko vadinamas Išskleidžiamasis meniu ir kaip ir ankstesnis komponentas, jis taikomas elementui tačiau jo konstrukcija yra šiek tiek sudėtingesnė, nors ji neapsiriboja HTML darbo stiliumi.
Pirmiausia turime turėti elementą, kuris yra išskleidžiamojo meniu antraštė, tada turime turėti kuriame bus rodomos parinktys. Šiuo tikslu mes suformuluosime ankstesnį pavyzdį, kad turinio skirtuko lape būtų pridėtas išskleidžiamasis meniu, ir mes galime geriau suprasti savo pavyzdį.
Trumpai apibendrinant parodysime tik turinį, nes antraštė bus tokia pati. Pažvelkime į išskleidžiamojo meniu funkcijų kodą:

Saugumas
Įrašai
Turinys

Vaizdo įrašai
Vaizdai
Garsas

Tada mes matome, kaip elementas su klase pradėjome išskleidžiamąjį meniu išskleidžiamajame meniu, tada šiame elemente mes apibrėžiame elementą kaip parinkties aktyviklį pridedant klasę išskleidžiamasis meniu ir galiausiai sukūrėme a ką turi klasė išskleidžiamasis meniu nustatyti, kad ji turi visas galimybes, kurias matysime. Jei vykdysime savo pavyzdį naršyklėje, gausime tokį rezultatą:

DIDELIS

Žinoma, tai tik maža dalis to, ką galime pasiekti, nes galima įtraukti daugiau efektų ir pakeisti skirtingus stilius. Tuo baigiame šį vadovėlį, kuriame pamatėme tris naudingiausius komponentus, kuriuos galime naudoti Bootstrap, taip pasiekiant daug didesnį mūsų programos pritaikymą.