„Bootstrap“ vartotojo sąsajos

Vartotojų sąsajos yra viena iš svarbiausių programų dalių, nes tai yra būdas, kuriuo vartotojai sąveikaus su mūsų kūryba, tačiau be to, gera sąsaja daro mūsų programos patirtį teigiamą. Kita vertus, abejotina sąsaja reiškia kad gera programa nebegali būti naudojama.
Bootstrap Tai nesuteikia mums sukurtų sąsajų, tai turime sukurti patys, tačiau suteikia mums komponentų, kad galėtume juos sukurti, ir nors dauguma jo komponentų yra skirti žiniatinklio programoms kurti, jis iš tikrųjų turi kitų komponentų pagerinti vartotojo vardo patirtį.
Šie komponentai yra pagrįsti „JavaScript“ Y „jQuery“, todėl mes reikalausime, kad ši paskutinė biblioteka galėtų pasinaudoti šiais mūsų paminėtais elementais, tačiau kai pamatysime kai kuriuos rezultatus, pateisinsime šį įtraukimą.
Kaip nurodėme įvade, būtina naudoti „jQuery“ Kad galėtume naudoti šiuos komponentus, pirmiausia mes nustatysime, kaip turėtų būti mūsų etiketė galva visų pavyzdžių, kuriuos pamatysime. Pažiūrėkime jo kodą:

Pirmiausia įtraukiame bootstrap.css jos sutrumpintoje versijoje, o tada tema.css, iki šiol viskas buvo įprasta, bet tada turime įtraukti „jQuery“ ir mes taip pat turime įtraukti bootstrap.js tai yra būdas, kuriuo ši sistema suteiks mums galimybę įtraukti mūsų sąsajų komponentus.
Šiuos įtraukimus galima atlikti taip, kaip matome kode iš aparato aplanko, kuriame saugome projektą, arba taip pat galime naudoti CDN, kaip matome šioje kodo dalyje:

Bet kuri iš mūsų naudojamų parinkčių yra tinkama, svarbu laikytis bibliotekų įtraukimo tvarkos, kitaip mūsų komponentai neveiks taip, kaip norime.
Gera sąsaja visada turėtų padėti vartotojui, ji visada turėtų parodyti, kuriuo keliu eiti ir kam skirtingi jos komponentai veikia, tokiu būdu ji yra intuityvi ir neleidžia vartotojui spėlioti, bandant ką nors rasti mygtukais ir meniu. .
PatarimasĮrankis, leidžiantis to išvengti, yra Patarimas, kurie yra ne kas kita, kaip nedideli iššokantys langeliai, padedantys mums paaiškinti mūsų programos skyrius, jie taip pat žinomi kaip pagalbos langeliai, idėja yra ta, kad į šias mažas dėžutes pridedame mažas frazes, kurios įprasmina veiksmą, kurį galime atlikti mūsų sąsajoje.
Pažiūrėkime nedidelį kodą, kuriame pademonstruosime, kaip sukurti patarimą Bootstrap:

 Įrankio patarimo išsaugojimo pavyzdys

Į savo kodą įtraukėme paminėtas bibliotekas ir etiketę scenarijus mes naudojame renginį dokumentas.paruoštas sukurti mūsų patarimas kuris bus taikomas viskam, ką turi klasė įrankis1, šį klasės pavadinimą gali pritaikyti kiekvienas norintis asmuo, be to, kaip parinktį priduriame, kad jo išdėstymas yra dešinėje, tai yra, mūsų pagalba bus rodoma dešinėje pusėje. Tada mes sukuriame bendrą kūno stilių, kad mūsų turinys būtų geriau matomas ekrane demonstravimo tikslais.
Pagaliau viduje kūnas sukuriame elementą mygtuką, jis turi atributą, vadinamą duomenų perjungimas ir nurodome, kad tai bus a patarimas kur atribute titulas mes dedame tekstą, kurį turėtų parodyti mūsų pagalbos langelis, ir, žinoma, į atributą klasė turime įtraukti įrankis1 kurią klasę apibrėžėme pradžioje. Kai viskas bus paruošta, pervedę pelę virš savo mygtuko, galime vizualizuoti sukurtą patarimą, kuris, įvykdytas mūsų naršyklėje, turėtų atrodyti taip:

Kaip matome, šis komponentas yra gana naudingas, nes suteikia mums galimybę per pagalbos langelius paaiškinti vartotojui, kaip jie veikia arba kam kai kurie elementai naudojami mūsų sąsajoje.
Yra dar vienas labai svarbus vartotojo sąsajos komponentas, tai yra akordeonas, Šio elemento paskirtis yra išsaugoti tekstą po mūsų programos komponentu, todėl susidarome pirmąjį įspūdį apie mūsų sąsajos tvarką ir švarumą, kai vartotojas, spustelėjęs jį, yra rodomas.
Tai svarbu, nes dar viena geros vartotojo sąsajos savybė yra švara, nes švari sąsaja reiškia, kad vartotojas nesijaučia apstulbęs, todėl ja naudotis bus maloniau.
Akordeono konstitucija yra paprasta, šiuo atveju mums nereikia kurti scenarijaus kaip tokio, mes tiesiog turime sukurti struktūrą divs kurie leidžia mums nurodyti, kad jie yra tokio tipo skydelis, mūsų akordeono pavadinimas bus tokio tipo div skydo antraštė o mūsų turinys bus dar vienas tokio tipo padalinys skydelio turinys, kurį turime pakartoti norėdami parodyti elementų kiekį.
Pažvelkime į šį pavyzdį, kuriame sukuriame dviejų elementų akordeoną:

 Akordeono pavyzdys
Pirmasis elementas
Tai pirmasis mūsų akordeono elementas
Antrasis elementas
Tai mūsų antrojo akordeono elemento turinys

Svarbiausias dalykas, kad akordeonas veiktų po struktūros, yra identifikatoriai, jei pažvelgsime į akordeono pavadinimą, turime inkarą ir tai pavyzdyje nurodyta 1 punktas Y elementas2 kur kiekvienas iš šių inkarų atitinka turinio identifikatorių, tada matome, kaip kiekvieno turinio blokas turi eiti šiuos du žodžius, o tai reiškia, kad spustelėjus pavadinimus rodomas turinys. Pažiūrėkime, kaip tai atrodo mūsų naršyklėje, kai vykdome savo pavyzdį:

DIDELIS

Kaip matome, elementas1 rodo savo turinį be problemų, o elementas2 nerodo jokios informacijos, jei spustelėsime jį, pamatysime, kaip paslėptas 1 elemento turinys ir rodomas 2 elemento turinys:

DIDELIS

Galiausiai, dar vienas puikus vartotojo sąsajų komponentas yra modalios nuotraukosTai yra elementai, kurie iškviečiami spustelėjus mygtuką ar inkarą, ir jų funkcija yra parodyti mums tam tikrą iššokantį langą.
Šis langas yra labai naudingas, nes leidžia rodyti tekstą, kuris dėl savo ilgio nėra praktiškas patarimas, o gal mums reikia, kad vartotojas užpildytų tam tikrą informaciją ir nenorime jos siųsti į kitą puslapį. Šio tipo komponentai padeda išlaikyti mūsų programos švarumą, tačiau taip pat padeda priversti vartotoją atkreipti dėmesį į tai, kas gali būti labai svarbu.
Žinoma, čia turi būti taikomos sveiko proto taisyklės, nes nors modalas gali pakelti kitą modalą, tai yra blogo skonio ir kenkia vartotojo naršymui, taip pat jei mums reikia įtraukti daugiau nei keturis laukus į formą tai padaryti naujame puslapyje, o ne modaliai, kad būtų paminėti keli pavyzdžiai. Šiame kode pamatysime, kaip galime sukurti modalą:

 Modalinės diagramos×
Kai pereisite į kitą etapą, visi jūsų veiksmai bus galutiniai.
Negaliu anuliuoti jūsų atsakymų
Išeiti Tęsti

Šiuo atveju modalas sukonfigūruotas dokumentas.paruoštas kad būtų rodomas tiesiogiai, tokio tipo diegimas yra plačiai naudojamas įspėti prieš vartotojui tęsiant. Tada mūsų modalą sudaro trys dalys; viršutinė dalis (antraštė), kūnas (kūnas) ir poraštė (poraštė).
Paprastai antraštė Yra pavadinimas, kurio dydis išsiskiria ir nurodo modalo priežastį kūnas paaiškinimą ar turinį, pvz., formą ar pranešimą, ir poraštė veiksmo mygtukai, pvz., tęsti arba uždaryti. Taigi pažiūrėkime, kaip atrodo mūsų modalinis langas, kai jį vykdome naršyklėje:

Šis komponentas yra gana lengvai įgyvendinamas ir suteikia mūsų programai profesionalų stilių, tačiau svarbu žinoti, kaip panaudoti savo logiką, kad ją patalpintume į vietą, kuri nepertraukia programos harmonijos.
Tuo baigiame šią pamoką, kurioje efektyviai sukūrėme tris didelius komponentus, kurie padeda mums sukurti vartotojo sąsajas, kad būtų galima geriau organizuoti ir suprasti mūsų programos veiksmus, taip pagerindami naršymo patirtį ir jos naudojimą.