Bootstrap brugergrænseflader

Brugergrænseflader er en af ​​de vigtigste dele af applikationer, da det er måden, hvorpå brugerne vil interagere med vores kreationer, men udover det gør en god grænseflade oplevelsen med vores applikation positiv. På den anden side betyder en tvivlsom grænseflade at en god applikation ikke længere kan bruges.
Bootstrap Det giver os ikke indbyggede grænseflader, det er noget, vi selv skal konstruere, men det giver os komponenterne til at kunne bygge disse, og selvom de fleste af dets komponenter er beregnet til design af webapplikationer, har det faktisk andre komponenter til forbedre oplevelsen af ​​brugernavn.
Disse komponenter er baseret på JavaScript Y jQuery, så vi vil kræve, at dette sidste bibliotek er i stand til at gøre brug af disse elementer, som vi nævnte, men når vi ser nogle af resultaterne, vil vi begrunde denne inklusion.
Som vi har angivet i indledningen, er det nødvendigt at bruge jQuery For at bruge disse komponenter er det derfor, det første, vi skal definere, er, hvordan vores etiket skal være hoved af alle de eksempler, vi vil se. Lad os se koden til det:

Først og fremmest inkluderer vi bootstrap.css i sin formindskede version og derefter tema.css, indtil videre har alt været det sædvanlige, men så må vi inkludere jQuery og vi skal også inkludere bootstrap.js hvilket er den måde, denne ramme vil give os mulighed for at inkorporere komponenterne til vores grænseflader.
Disse inklusioner kan gøres, som vi ser i koden fra en mappe på vores maskine, hvor vi gemmer projektet, eller vi kan også bruge en CDN, som vi ser i det følgende stykke kode:

Enhver af de muligheder, vi bruger, er fine, det vigtige er at respektere den rækkefølge, vi inkluderer bibliotekerne i, ellers fungerer vores komponenter ikke, som vi vil.
En god grænseflade skal altid være en hjælp for brugeren, den skal altid vise dem, hvilken vej de skal gå, og hvad dens forskellige komponenter fungerer til, på denne måde er den intuitiv og undgår gætterier fra brugeren, når han prøver knapper og menuer for at finde noget. .
VærktøjstipEt værktøj, der giver os mulighed for at undgå dette, er Værktøjstip, som ikke er mere end små pop-up-bokse, der hjælper os med at forklare sektioner af vores applikation, de er også kendt som hjælpebokse, tanken er, at vi i disse små kasser tilføjer små sætninger, der giver mening til den handling, vi kan udføre i vores interface.
Lad os se en lille kode, hvor vi demonstrerer, hvordan man bygger et værktøjstip ved hjælp af Bootstrap:

 Eksempel Værktøjstip Gem

I vores kode har vi inkluderet de nævnte biblioteker og derefter i etiketten manuskript vi bruger arrangementet dokument. klar at skabe vores værktøjstip som kommer til at gælde for alt, hvad klassen har værktøj 1, dette klassens navn kan tilpasses af alle, vi ønsker, og derudover tilføjer vi som en mulighed, at det har et layout til højre, det vil sige, at vores hjælp vises i højre side. Derefter skaber vi en generel stil for kroppen, så vores indhold er mere synligt på skærmen til demonstrationsformål.
Endelig inde i legeme vi skaber et element knap, den har en attribut kaldet data-skifte og vi angiver, at det vil være et værktøjstip hvor i attributten titel vi placerer den tekst, som vores hjælpeboks skal vise, og selvfølgelig i attributten klasse vi skal inkludere værktøj 1 hvilket var den klasse, vi definerede i begyndelsen. Når alt er på plads, når vi passerer musen over vores knap, kan vi visualisere det oprettede værktøjstip, som når det udføres i vores browser skal se sådan ud:

Som vi kan se, er denne komponent ganske nyttig, da den giver os mulighed for at forklare brugeren gennem hjælpeboksene, hvordan de fungerer, eller hvad nogle elementer bruges til i vores grænseflade.
Der er en anden meget vigtig komponent i brugergrænsefladen, og det er harmonika, Formålet med dette element er at være i stand til at gemme teksten under en komponent i vores applikation, med dette får vi et første indtryk af både rækkefølge og renlighed af vores grænseflade, hvor brugeren når der klikkes på den, vises indholdet.
Dette er vigtigt, fordi en anden kvalitet, som en god brugergrænseflade har brug for, er renlighed, da en ren grænseflade betyder, at brugeren ikke føler sig bedøvet, og derfor vil det være mere behageligt at bruge den.
Konstruktionen af ​​harmonikaen er enkel, i dette tilfælde behøver vi ikke at bygge et script som sådan, vi skal bare lave en struktur af divs der tillader os at angive, at de er af typen panel, vil titlen på vores harmonika være en div af typen paneloverskrift og vores indhold vil være en anden div af typen panelindhold, som vi skal gentage for mængden af ​​elementer, vi ønsker at vise.
Lad os se i følgende eksempel, hvor vi opretter et harmonika med to elementer:

 Trekkspil eksempel
Første element
Dette er det første element i vores harmonika
Andet element
Dette er indholdet af vores andet element i harmonikaen

Det vigtigste for at få harmonikaen til at fungere efter strukturen er identifikatorerne, hvis vi ser på titlen på harmonikaen, har vi et anker, og dette er rettet i eksemplet til element 1 Y element2 hvor hvert af disse ankre svarer til identifikatoren for indholdet, så ser vi, hvordan indholdsblokken for hver enkelt har som gå disse to ord, hvilket betyder, at når vi klikker på titlerne, vises indholdet. Lad os se, hvordan det ser ud i vores browser, når vi kører vores eksempel:

FORSTØRRE

Som vi kan se, viser element1 dets indhold uden problemer, mens element2 ikke viser nogen oplysninger, hvis vi klikker på det, kan vi se, hvordan indholdet af element1 er skjult, og indholdet af element2 vises:

FORSTØRRE

Endelig er en af ​​de store komponenter til brugergrænseflader modale billederDette er elementer, der påberåbes, når du klikker på en knap eller et anker, og deres funktionalitet er at vise os en slags pop-up-vindue.
Dette vindue er meget nyttigt, fordi det giver os mulighed for at vise tekst, der på grund af dens længde ikke er praktisk i a værktøjstip, eller måske har vi brug for brugeren til at udfylde nogle oplysninger, og vi ønsker ikke at sende dem til en anden side. Denne type komponent hjælper os med at opretholde renheden i vores applikation, men det hjælper os også med at tvinge brugeren til at være opmærksom på noget, der kan være meget vigtigt.
Selvfølgelig skal reglerne om sund fornuft gælde her, da selvom det er muligt for et modal at hæve et andet modal, er dette i dårlig smag og skader brugerens navigation, også hvis vi skal integrere mere end fire felter i en form, er det bedre at gøre det på en ny side og ikke i en modal for at nævne et par eksempler. Lad os se i følgende kode, hvordan vi kan oprette et modal:

 Modale diagrammer×
Når du går videre til den næste fase, er alle dine handlinger endelige.

Jeg kan ikke fortryde dine svar
Afslut Fortsæt

I dette tilfælde er modal konfigureret i dokument. klar for at blive vist direkte, bruges denne type implementering i vid udstrækning til at give advarsler, før brugeren fortsætter. Så består vores modal af tre dele; øvre del (header), krop (legeme) og sidefod (sidefod).
Normalt i header Der er en titel med en størrelse, der skiller sig ud for at angive årsagen til modalen, i legeme forklaringen eller indholdet, f.eks. en form eller et budskab, og i sidefod handlingsknapper som fortsæt eller luk. Så lad os se, hvordan vores modalvindue ser ud, når vi udfører det i browseren:

Denne komponent er ganske enkel at implementere og giver vores applikation en professionel stil, men det er vigtigt, at vi ved, hvordan vi kan bruge vores logik til at placere det på et sted, der ikke afbryder applikationens harmoni.
Med dette afslutter vi denne vejledning, hvor vi effektivt har udviklet tre store komponenter, der hjælper os med at oprette brugergrænseflader for at opnå en bedre organisation og forståelse af handlingerne i vores applikation, og dermed forbedre browseroplevelsen og brugen af ​​den.