Bootstrap korisnička sučelja

Korisnička sučelja jedan su od najvažnijih dijelova aplikacija, budući da je to način na koji će korisnici komunicirati s našim kreacijama, ali osim toga, dobro sučelje čini iskustvo s našom aplikacijom pozitivnim. S druge strane, dvojbeno sučelje znači da se dobra aplikacija više ne može koristiti.
Bootstrap Ne daje nam izgrađena sučelja, to je nešto što moramo sami projektirati, međutim daje nam komponente da bismo ih mogli izgraditi, iako je većina njegovih komponenti namijenjena dizajnu web aplikacija, ona zapravo ima i druge komponente poboljšati korisničko ime.
Te se komponente temelje na JavaScript Y jQuery, pa ćemo od ove posljednje biblioteke zahtijevati da se može koristiti ovim elementima koje smo spomenuli. Međutim, kad vidimo neke od rezultata, opravdat ćemo ovo uključivanje.
Kao što smo u uvodu naznačili, potrebno je koristiti jQuery Kako bismo koristili ove komponente, zato ćemo prvo definirati kako bi naša oznaka trebala biti glava od svih primjera koje ćemo vidjeti. Pogledajmo njegov kod:

Prije svega uključujemo bootstrap.css u svojoj minificiranoj verziji, a zatim tema.css, do sada je sve bilo uobičajeno, ali onda moramo uključiti jQuery a moramo i uključiti bootstrap.js što je način na koji će nam ovaj okvir dati priliku da ugradimo komponente za naša sučelja.
Ove se uključke mogu učiniti kao što vidimo u kodu iz mape na našem stroju u kojoj pohranjujemo projekt, ili također možemo koristiti CDN, kao što vidimo u sljedećem dijelu koda:

Bilo koja od opcija koju koristimo je u redu, važno je poštivati ​​redoslijed kojim uključujemo knjižnice, inače naše komponente neće raditi onako kako želimo.
Dobro sučelje uvijek bi trebalo biti od pomoći korisniku, uvijek bi mu trebalo pokazati kojim smjerom krenuti i čemu služe njegove različite komponente, na taj način je intuitivno i izbjegava nagađanja korisnika prilikom pokušaja gumba i izbornika da nešto pronađe. .
Opis alataAlat koji nam omogućuje da to izbjegnemo je Opis alata, koje nisu ništa drugo do mali skočni okviri koji nam pomažu objasniti odjeljke naše aplikacije, poznati su i kao okviri za pomoć, ideja je da u te male okvire dodamo male izraze koji daju smisao radnji koju možemo izvesti u našem sučelju.
Pogledajmo mali kod u kojem ćemo pokazati kako izgraditi opis s pomoću Bootstrap:

 Primjer opisa spremanja

U naš kôd uključili smo spomenute knjižnice, a zatim i oznaku skripta koristimo događaj dokument.spreman stvoriti naše opis alata što će se primijeniti na sve što razred ima alat 1, ovaj naziv klase može prilagoditi svatko tko želi, a dodatno dodajemo kao opciju da ima izgled s desne strane, odnosno da će se naša pomoć prikazati s desne strane. Zatim stvaramo opći stil tijela kako bi naš sadržaj bio vidljiviji na ekranu u svrhu demonstracije.
Konačno unutar tijelo stvaramo element dugme, ima atribut tzv prebacivanje podataka a mi ukazujemo da će to biti a opis alata gdje u atributu titula stavljamo tekst koji bi trebao prikazati naš okvir za pomoć, i naravno u atribut razred moramo uključiti alat 1 što je klasa koju smo definirali na početku. Kad sve postavite na svoje mjesto, kada prijeđete mišem preko našeg gumba, možemo vizualizirati stvoreni opis alata koji bi, kada se izvrši u našem pregledniku, trebao izgledati ovako:

Kao što vidimo, ova je komponenta vrlo korisna jer nam daje priliku da objasnimo korisniku kroz okvire za pomoć kako oni rade ili za što se neki elementi koriste u našem sučelju.
Postoji još jedna vrlo važna komponenta korisničkog sučelja, a to je harmonika, Svrha ovog elementa je da može spremiti tekst pod komponentu naše aplikacije, čime dobivamo prvi dojam o uređenosti i čistoći našeg sučelja, gdje se korisnik prilikom klika na njega prikazuje sadržaj.
To je važno jer je još jedna kvaliteta koja je potrebna dobrom korisničkom sučelju čistoća, budući da čisto sučelje znači da se korisnik ne osjeća omamljenim, pa će ga stoga biti ugodnije koristiti.
Konstrukcija harmonike je jednostavna, u ovom slučaju ne moramo graditi skriptu kao takvu, samo moramo napraviti strukturu divi koji nam omogućuju da naznačimo da su tog tipa ploča, naslov naše harmonike bit će div tog tipa panel-heading a naš će sadržaj biti još jedan div te vrste panel-sadržaj, što moramo ponoviti za količinu elemenata koje želimo prikazati.
Pogledajmo u sljedećem primjeru gdje stvaramo harmoniku s dva elementa:

 Primjer harmonike
Prvi element
Ovo je prvi element naše harmonike
Drugi element
Ovo je sadržaj našeg drugog elementa harmonike

Najvažnija stvar da bi harmonika funkcionirala nakon strukture su identifikatori, ako pogledamo naslov harmonike, imamo sidro, a to je u primjeru usmjereno na stavka 1 Y element 2 gdje svako od ovih sidara odgovara identifikatoru sadržaja, tada vidimo kako sadržajni blok svakog od njih ima ići ove dvije riječi, što znači da kada kliknemo na naslove prikazuje se sadržaj. Pogledajmo kako to izgleda u našem pregledniku kada pokrenemo naš primjer:

POVEĆAJTE

Kao što vidimo, element1 prikazuje svoj sadržaj bez problema, dok element2 ne prikazuje nikakve podatke, ako kliknemo na njega, možemo vidjeti kako je sadržaj elementa1 skriven, a sadržaj elementa2 prikazan:

POVEĆAJTE

Konačno, još jedna od sjajnih komponenti korisničkog sučelja su modalne slikeTo su elementi koji se pozivaju pri kliku na gumb ili sidro, a njihova je funkcija prikazati nam svojevrsni skočni prozor.
Ovaj je prozor vrlo koristan jer nam omogućuje prikaz teksta koji zbog svoje duljine nije praktičan u a opis alata, ili nam je možda potrebno da korisnik unese neke podatke, a ne želimo ih poslati na drugu stranicu. Ova vrsta komponenti pomaže nam u održavanju čistoće naše aplikacije, ali nam pomaže i da natjeramo korisnika da obrati pažnju na nešto što može biti jako važno.
Naravno, ovdje se moraju primjenjivati ​​pravila zdravog razuma, jer iako je moguće da modal podigne još jedan modalitet, to je lošeg ukusa i šteti korisničkoj navigaciji, također ako moramo ugraditi više od četiri polja u oblik, bolje je učiniti to na novoj stranici, a ne modalno spomenuti nekoliko primjera. Pogledajmo u sljedećem kodu kako možemo stvoriti modal:

 Modalni grafikoni×
Kad prijeđete na sljedeću fazu, sve vaše radnje bit će konačne.
Ne mogu poništiti vaše odgovore

Izlaz Nastavi

U ovom slučaju modal je konfiguriran u dokument.spreman da bi se izravno prikazao, ova se vrsta implementacije naširoko koristi za davanje upozorenja prije nego što korisnik nastavi. Tada se naš modal sastoji od tri dijela; Gornji dio (Zaglavlje), tijelo (tijelo) i podnožje (podnožje).
Normalno u Zaglavlje Postoji naslov veličine koja se ističe kako bi naznačila razlog modaliteta, u tijelo objašnjenje ili sadržaj, poput obrasca ili poruke, te u podnožje akcijske tipke poput nastavka ili zatvaranja. Pa da vidimo kako izgleda naš modalni prozor kada ga izvršimo u pregledniku:

Ova je komponenta vrlo jednostavna za implementaciju i daje našoj aplikaciji profesionalni stil, no važno je da znamo koristiti svoju logiku da je postavimo na mjesto koje ne narušava sklad aplikacije.
Ovime zaključujemo ovaj vodič, gdje smo učinkovito razvili tri velike komponente koje nam pomažu u stvaranju korisničkih sučelja za postizanje bolje organizacije i razumijevanja radnji u našoj aplikaciji, poboljšavajući tako iskustvo pregledavanja i njegovu upotrebu.