Bootstrap brukergrensesnitt

Brukergrensesnitt er en av de viktigste delene av applikasjoner, siden det er måten brukerne vil samhandle med våre kreasjoner, men utover det gjør et godt grensesnitt opplevelsen med applikasjonen vår positiv. På den annen side betyr et tvilsomt grensesnitt at en god applikasjon ikke lenger kan brukes.
Støvelhempe Det gir oss ikke bygde grensesnitt, det er noe vi må konstruere selv, men det gir oss komponentene for å kunne bygge disse, og selv om de fleste av komponentene er beregnet på design av webapplikasjoner, har det faktisk andre komponenter å forbedre opplevelsen av brukernavn.
Disse komponentene er basert på JavaScript Y jQuery, så vi kommer til å kreve at dette siste biblioteket skal kunne bruke disse elementene som vi nevnte, men når vi ser noen av resultatene, vil vi rettferdiggjøre denne inkluderingen.
Som vi har angitt i innledningen, er det nødvendig å bruke jQuery For å bruke disse komponentene, er det derfor det første vi skal definere, hvordan etiketten vår skal være hode av alle eksemplene vi vil se. La oss se koden til den:

Først av alt inkluderer vi bootstrap.css i sin minifiserte versjon og deretter theme.css, så langt har alt vært det vanlige, men da må vi inkludere jQuery og vi må også inkludere bootstrap.js som er måten dette rammeverket skal gi oss muligheten til å inkorporere komponentene for våre grensesnitt.
Disse inkluderingene kan gjøres som vi ser i koden fra en mappe på maskinen vår der vi lagrer prosjektet, eller vi kan også bruke en CDN, som vi ser i følgende kodebit:

Alle alternativene vi bruker er fine. Det som er viktig er å respektere rekkefølgen vi inkluderer bibliotekene på, ellers fungerer ikke komponentene våre slik vi vil.
Et godt grensesnitt bør alltid være til hjelp for brukeren, det skal alltid vise dem hvilken vei de skal gå og hva de forskjellige komponentene fungerer for, på denne måten er det intuitivt og unngår gjetninger fra brukeren når han prøver knapper og menyer for å finne noe. .
VerktøytipsEt verktøy som lar oss unngå dette er Verktøytips, som ikke er mer enn små popup-bokser som hjelper oss med å forklare deler av applikasjonen vår, de er også kjent som hjelpebokser, tanken er at i disse små boksene legger vi til små setninger som gir mening til handlingen vi kan utføre i grensesnittet vårt.
La oss se en liten kode hvor vi demonstrerer hvordan du bygger et verktøytips ved hjelp av Støvelhempe:

 Eksempel verktøytips Lagre

I koden vår har vi inkludert bibliotekene som er nevnt og deretter i etiketten manus vi bruker arrangementet dokument. klar å lage vår verktøytips som kommer til å gjelde for alt som klassen har verktøy 1, kan dette klassens navn tilpasses av alle vi ønsker, og i tillegg legger vi til som et alternativ at det har et oppsett til høyre, det vil si at hjelpen vår vises på høyre side. Deretter lager vi en generell stil for kroppen slik at innholdet vårt blir mer synlig på skjermen for demonstrasjonsformål.
Endelig inne i kropp vi lager et element knapp, den har et attributt kalt data-veksle og vi indikerer at det vil være et verktøytips hvor i attributtet tittel vi plasserer teksten som hjelpeboksen vår skal vise, og selvfølgelig i attributtet klasse må vi inkludere verktøy 1 som var klassen vi definerte i begynnelsen. Når alt er på plass, når vi passerer musen over knappen vår, kan vi visualisere det opprettede verktøytipset, som når det kjøres i nettleseren vår skal se slik ut:

Som vi kan se, er denne komponenten ganske nyttig siden den gir oss muligheten til å forklare brukeren gjennom hjelpeboksene hvordan de fungerer eller hva noen elementer brukes til i grensesnittet vårt.
Det er en annen veldig viktig komponent i brukergrensesnittet, og det er trekkspill, Hensikten med dette elementet er å kunne lagre teksten under en komponent i applikasjonen vår, med dette får vi et førsteinntrykk av både rekkefølge og renslighet i grensesnittet, der brukeren når du klikker på den, vises innholdet.
Dette er viktig fordi en annen kvalitet som et godt brukergrensesnitt trenger, er renslighet, siden et rent grensesnitt betyr at brukeren ikke føler seg bedøvet, og derfor blir det mer behagelig å bruke det.
Konstruksjonen til trekkspillet er enkel, i dette tilfellet trenger vi ikke å bygge et manus som sådan, vi må bare lage en struktur av divs som lar oss indikere at de er av typen panel, vil tittelen på trekkspillet vårt være en div av typen paneloverskrift og innholdet vårt vil være en annen div av typen panelinnhold, som vi må gjenta for mengden elementer vi vil vise.
La oss se i følgende eksempel hvor vi lager et trekkspill med to elementer:

 Trekkspilleksempel
Første element
Dette er det første elementet i trekkspillet vårt
Andre element
Dette er innholdet i vårt andre element i trekkspillet

Det viktigste for å få trekkspillet til å fungere etter strukturen er identifikatorene, hvis vi ser på tittelen på trekkspillet har vi et anker og dette er rettet i eksemplet til element 1 Y element2 hvor hvert av disse ankrene tilsvarer identifikatoren for innholdet, så ser vi hvordan innholdsblokken til hver enkelt har som gå disse to ordene, noe som betyr at når vi klikker på titlene blir innholdet vist. La oss se hvordan det ser ut i nettleseren vår når vi kjører vårt eksempel:

FORSTØRRE

Som vi kan se, viser element1 innholdet uten problemer, mens element2 ikke viser informasjon, hvis vi klikker på det kan vi se hvordan innholdet i element1 er skjult og innholdet i element2 vises:

FORSTØRRE

Til slutt er en av de store komponentene for brukergrensesnitt modale bilderDette er elementer som påkalles når du klikker på en knapp eller et anker, og funksjonaliteten deres er å vise oss et slags popup-vindu.
Dette vinduet er veldig nyttig fordi det lar oss vise tekst som på grunn av lengden ikke er praktisk i a verktøytips, eller kanskje vi trenger at brukeren fyller ut informasjon, og vi vil ikke sende den til en annen side. Denne typen komponenter hjelper oss med å opprettholde rensligheten i applikasjonen vår, men den hjelper oss også med å tvinge brukeren til å ta hensyn til noe som kan være veldig viktig.
Selvfølgelig må regler for sunn fornuft gjelde her, siden selv om det er mulig for en modal å heve en annen modal, er dette i dårlig smak og skader brukerens navigasjon, også hvis vi trenger å inkludere mer enn fire felt i en form, er det bedre å gjøre det på en ny side og ikke i et modal for å nevne noen eksempler. La oss se i følgende kode hvordan vi kan lage en modal:

 Modal -diagrammer×
Når du går videre til neste fase, er alle handlingene dine endelige.

Jeg kan ikke angre svarene dine
Avslutt Fortsett

I dette tilfellet er modalen konfigurert i dokument. klar for å bli vist direkte, er denne typen implementering mye brukt for å gi advarsler før brukeren fortsetter. Så består vår modal av tre deler; øvre del (Overskrift), kropp (kropp) og bunntekst (bunntekst).
Normalt i Overskrift Det er en tittel med en størrelse som skiller seg ut for å indikere årsaken til modalen, i kropp forklaringen eller innholdet, for eksempel et skjema eller en melding, og i bunntekst handlingsknapper som fortsett eller lukk. Så la oss se hvordan vårt modalvindu ser ut når vi kjører det i nettleseren:

Denne komponenten er ganske enkel å implementere og gir applikasjonen vår en profesjonell stil, men det er viktig at vi vet hvordan vi bruker logikken vår til å plassere den på et sted som ikke avbryter harmonien i applikasjonen.
Med dette avslutter vi denne opplæringen, der vi effektivt har utviklet tre store komponenter som hjelper oss med å lage brukergrensesnitt for å oppnå en bedre organisering og forståelse av handlingene i applikasjonen vår, og dermed forbedre nettopplevelsen og bruken av den.