Bootstrap -användargränssnitt

Användargränssnitt är en av de viktigaste delarna av applikationer, eftersom det är sättet på vilket användare kommer att interagera med våra skapelser, men utöver det gör ett bra gränssnitt upplevelsen med vår applikation positiv. Å andra sidan innebär ett tvivelaktigt gränssnitt att en bra applikation inte längre kan användas.
Bootstrap Det ger oss inte byggda gränssnitt, det är något som vi måste konstruera själva, men det ger oss komponenterna för att kunna bygga dessa och även om de flesta av dess komponenter är avsedda för design av webbapplikationer, har det faktiskt andra komponenter att förbättra upplevelsen av användarnamn.
Dessa komponenter är baserade på JavaScript Y jQuery, så vi kommer att kräva att det här sista biblioteket ska kunna använda de element som vi nämnde, men när vi väl ser några av resultaten kommer vi att motivera denna inkludering.
Som vi har angett i inledningen är det nödvändigt att använda jQuery För att kunna använda dessa komponenter är det det första vi ska definiera hur vår etikett ska vara huvud av alla exempel som vi kommer att se. Låt oss se koden för det:

Först och främst inkluderar vi bootstrap.css i sin minifierade version och sedan tema.css, hittills har allt varit som vanligt men då måste vi inkludera jQuery och vi måste också inkludera bootstrap.js vilket är det sätt på vilket denna ram kommer att ge oss möjlighet att införliva komponenterna för våra gränssnitt.
Dessa inkluderingar kan göras som vi ser i koden från en mapp på vår maskin där vi lagrar projektet, eller så kan vi också använda en CDN, som vi ser i följande kodbit:

Några av de alternativ som vi använder är bra, det som är viktigt är att respektera i vilken ordning vi inkluderar biblioteken, annars fungerar inte våra komponenter som vi vill.
Ett bra gränssnitt ska alltid vara till hjälp för användaren, det ska alltid visa dem vilken väg man ska gå och vad dess olika komponenter fungerar för, på så sätt är det intuitivt och undviker gissningar av användaren när man försöker knappar och menyer för att hitta något. .
VerktygstipsEtt verktyg som gör att vi kan undvika detta är Verktygstips, som inte är mer än små popup-rutor som hjälper oss att förklara delar av vår applikation, de är också kända som hjälpboxar, tanken är att vi i dessa små rutor lägger till små fraser som ger mening åt den handling som vi kan utföra i vårt gränssnitt.
Låt oss se en liten kod där vi visar hur man bygger ett verktygstips med hjälp av Bootstrap:

 Exempel Verktygstips Spara

I vår kod har vi inkluderat de nämnda biblioteken och sedan i etiketten manus vi använder evenemanget dokument. redo att skapa vår verktygstips som kommer att gälla allt som klassen har verktyg 1, detta klassnamn kan anpassas av alla vi vill, och dessutom lägger vi till som ett alternativ att det har en layout till höger, det vill säga att vår hjälp visas på höger sida. Sedan skapar vi en allmän stil för kroppen så att vårt innehåll blir mer synligt på skärmen för demonstrationsändamål.
Äntligen inuti kropp vi skapar ett element knapp, det har ett attribut som heter data-växling och vi anger att det kommer att vara a verktygstips var i attributet titel vi placerar texten som vår hjälpruta ska visa, och naturligtvis i attributet klass måste vi inkludera verktyg 1 vilket var klassen vi definierade i början. När allt är på plats, när vi för musen över vår knapp, kan vi visualisera det skapade verktygstipset, som när det körs i vår webbläsare ska se ut så här:

Som vi kan se är denna komponent ganska användbar eftersom den ger oss möjlighet att förklara för användaren genom hjälprutorna hur de fungerar eller vad vissa element används för i vårt gränssnitt.
Det finns en annan mycket viktig komponent i användargränssnittet och det är dragspel, Syftet med detta element är att kunna spara texten under en komponent i vår applikation, med detta får vi ett första intryck av både ordning och renhet i vårt gränssnitt, där användaren när du klickar på den visas innehållet.
Detta är viktigt eftersom en annan kvalitet som ett bra användargränssnitt behöver är renlighet, eftersom ett rent gränssnitt innebär att användaren inte känner sig bedövad och därför blir det trevligare att använda det.
Konstruktionen av dragspelet är enkel, i det här fallet behöver vi inte bygga ett manus som sådant, vi måste bara göra en struktur av div som gör att vi kan ange att de är av typen panel, titeln på vårt dragspel kommer att vara en div av typen panelrubrik och vårt innehåll kommer att vara en annan div av typen panelinnehåll, som vi måste upprepa för mängden element vi vill visa.
Låt oss se i följande exempel där vi skapar ett dragspel med två element:

 Dragspel exempel
Första elementet
Detta är det första elementet i vårt dragspel
Andra elementet
Detta är innehållet i vårt andra element i dragspelet

Det viktigaste för att få dragspelet att fungera efter strukturen är identifierarna, om vi tittar på dragspelet har vi ett ankare och detta är riktat i exemplet till artikel 1 Y element2 där vart och ett av dessa ankare motsvarar innehållets identifierare, då ser vi hur innehållsblocket för var och en har som gå dessa två ord, vilket innebär att innehållet visas när vi klickar på titlarna. Låt oss se hur det ser ut i vår webbläsare när vi kör vårt exempel:

FÖRSTORA

Som vi kan se visar element1 innehållet utan problem medan element2 inte visar någon information, om vi klickar på det kan vi se hur innehållet i element1 är dolt och innehållet i element2 visas:

FÖRSTORA

Slutligen är en annan av de stora komponenterna för användargränssnitt modala bilderDet här är element som åberopas när du klickar på en knapp eller ett ankare och deras funktion är att visa oss ett slags popup-fönster.
Detta fönster är mycket användbart eftersom det tillåter oss att visa text som på grund av dess längd inte är praktisk i a verktygstips, eller kanske behöver vi användaren för att fylla i lite information och vi vill inte skicka den till en annan sida. Den här typen av komponenter hjälper oss att behålla renheten i vår applikation, men den hjälper oss också att tvinga användaren att uppmärksamma något som kan vara mycket viktigt.
Naturligtvis måste sunt förnuft gälla här, eftersom även om det är möjligt för en modal att höja en annan modal, är detta i dålig smak och skadar användarens navigering, även om vi behöver integrera mer än fyra fält i en form är det bättre att göra det på en ny sida och inte i en modal för att nämna några exempel. Låt oss se i följande kod hur vi kan skapa en modal:

 Modal -diagram×
När du går vidare till nästa fas kommer alla dina handlingar att vara slutgiltiga.

Jag kan inte ångra dina svar
Avsluta Fortsätt

I det här fallet är modalen konfigurerad i dokument. redo för att visas direkt, används denna typ av implementering i stor utsträckning för att ge varningar innan användaren fortsätter. Sedan består vår modal av tre delar; övre del (rubrik), kropp (kropp) och sidfot (sidfot).
Normalt i rubrik Det finns en titel med en storlek som sticker ut för att ange orsaken till modalen, i kropp förklaringen eller innehållet, till exempel en blankett eller ett meddelande, och i sidfot åtgärdsknappar som fortsätt eller stäng. Så låt oss se hur vårt modala fönster ser ut när vi kör det i webbläsaren:

Denna komponent är ganska enkel att implementera och ger vår applikation en professionell stil, men det är viktigt att vi vet hur vi använder vår logik för att placera den på en plats som inte avbryter applikationens harmoni.
Med detta avslutar vi denna handledning, där vi effektivt har utvecklat tre stora komponenter som hjälper oss att skapa användargränssnitt för att uppnå en bättre organisation och förståelse för åtgärderna i vår applikation, vilket förbättrar surfupplevelsen och användningen av den.