Bootstrap-gebruikersinterfaces

Gebruikersinterfaces zijn een van de belangrijkste onderdelen van applicaties, omdat het de manier is waarop gebruikers omgaan met onze creaties, maar verder maakt een goede interface de ervaring met onze applicatie positief. dat een goede applicatie niet meer gebruikt kan worden.
Bootstrap Het geeft ons geen ingebouwde interfaces, het is iets dat we zelf moeten ontwikkelen, maar het geeft ons de componenten om deze te kunnen bouwen en hoewel de meeste componenten bedoeld zijn voor het ontwerpen van webapplicaties, heeft het eigenlijk andere componenten om de ervaring van Gebruikersnaam verbeteren.
Deze componenten zijn gebaseerd op: JavaScript Y jQuery, dus we zullen deze laatste bibliotheek nodig hebben om gebruik te kunnen maken van deze elementen die we noemden, maar zodra we enkele van de resultaten zien, zullen we deze opname rechtvaardigen.
Zoals we in de inleiding hebben aangegeven, is het noodzakelijk om jQuery Om deze componenten te gebruiken, is het eerste wat we gaan definiëren hoe ons label zou moeten zijn hoofd van alle voorbeelden die we zullen zien. Laten we de code ervan bekijken:

Allereerst nemen we de bootstrap.css in zijn verkleinde versie en dan de thema.css, tot nu toe is alles de gebruikelijke geweest, maar dan moeten we opnemen jQuery en we moeten ook opnemen bootstrap.js dat is de manier waarop dit raamwerk ons ​​de mogelijkheid zal bieden om de componenten voor onze interfaces op te nemen.
Deze insluitsels kunnen worden gedaan zoals we zien in de code van een map op onze machine waar we het project opslaan, of we kunnen ook een CDN, zoals we zien in het volgende stukje code:

Elk van de opties die we gebruiken is prima, het is belangrijk om de volgorde te respecteren waarin we de bibliotheken opnemen, anders zullen onze componenten niet werken zoals we willen.
Een goede interface zou de gebruiker altijd moeten helpen, het moet hen altijd laten zien welke weg ze moeten gaan en waar de verschillende componenten voor werken, op deze manier is het intuïtief en vermijdt het giswerk van de gebruiker bij het proberen van knoppen en menu's om iets te vinden. .
KnopinfoEen hulpmiddel waarmee we dit kunnen voorkomen, is de Knopinfo, die niets meer zijn dan kleine pop-upvensters die ons helpen delen van onze applicatie uit te leggen, ze worden ook wel helpvensters genoemd, het idee is dat we in deze kleine vakjes kleine zinnen toevoegen die betekenis geven aan de actie die we kunnen uitvoeren in onze interface.
Laten we een kleine code bekijken waarin we laten zien hoe u een tooltip kunt bouwen met behulp van Bootstrap:

 Voorbeeld Knopinfo opslaan

In onze code hebben we de genoemde bibliotheken opgenomen en vervolgens in het label script we gebruiken het evenement document.klaar om onze te creëren knopinfo die van toepassing is op alles wat de klas heeft gereedschap1, deze klassenaam kan worden aangepast door iedereen die we willen, en bovendien voegen we als optie toe dat deze een lay-out aan de rechterkant heeft, dat wil zeggen dat onze hulp aan de rechterkant wordt weergegeven. Vervolgens creëren we een algemene stijl voor het lichaam, zodat onze inhoud beter zichtbaar is op het scherm voor demonstratiedoeleinden.
Eindelijk in de lichaam we creëren een element knop, het heeft een attribuut genaamd data-toggle en we geven aan dat het een knopinfo waar in het attribuut titel we plaatsen de tekst die ons helpvenster zou moeten tonen, en natuurlijk in het attribuut klas we moeten opnemen gereedschap1 wat de klasse was die we in het begin hadden gedefinieerd. Zodra alles op zijn plaats staat, kunnen we de gemaakte tooltip visualiseren wanneer we de muis over onze knop bewegen, die er als volgt uit zou moeten zien als deze in onze browser wordt uitgevoerd:

Zoals we kunnen zien, is dit onderdeel best handig omdat het ons de mogelijkheid geeft om de gebruiker via de helpboxen uit te leggen hoe ze werken of waarvoor sommige elementen in onze interface worden gebruikt.
Er is nog een heel belangrijk onderdeel van de gebruikersinterface en het is de accordeon, Het doel van dit element is om de tekst onder een onderdeel van onze applicatie te kunnen opslaan, hiermee krijgen we een eerste indruk van zowel de orde als de netheid van onze interface, waar de gebruiker bij het aanklikken de inhoud wordt getoond.
Dit is belangrijk omdat een andere kwaliteit die een goede gebruikersinterface nodig heeft, netheid is, aangezien een schone interface betekent dat de gebruiker zich niet verbijsterd voelt en daarom zal het prettiger zijn om het te gebruiken.
De opbouw van de accordeon is eenvoudig, in dit geval hoeven we geen script te bouwen als zodanig, we moeten alleen een structuur maken van div's waarmee we kunnen aangeven dat ze van het type zijn paneel, de titel van onze accordeon is een div van het type paneeltitel en onze inhoud zal een andere div van het type zijn panel-inhoud, die we moeten herhalen voor het aantal elementen dat we willen laten zien.
Laten we in het volgende voorbeeld kijken waar we een accordeon met twee elementen maken:

 Accordeon voorbeeld
Eerste element
Dit is het eerste element van onze accordeon

Tweede Element
Dit is de inhoud van ons tweede element van de accordeon

Het belangrijkste om de accordeon te laten werken na de structuur zijn de identifiers, als we naar de titel van de accordeon kijken, hebben we een anker en dit is in het voorbeeld gericht op item 1 Y element2 waar elk van deze ankers overeenkomt met de identifier van de inhoud, dan zien we hoe het inhoudsblok van elk ervan heeft als Gaan deze twee woorden, wat betekent dat wanneer we op de titels klikken, de inhoud wordt weergegeven. Laten we eens kijken hoe het eruit ziet in onze browser wanneer we ons voorbeeld uitvoeren:

VERGROTEN

Zoals we kunnen zien, toont element1 zijn inhoud zonder problemen, terwijl element2 geen informatie toont, als we erop klikken, kunnen we zien hoe de inhoud van element1 is verborgen en de inhoud van element2 wordt weergegeven:

VERGROTEN

Tot slot, een andere van de geweldige componenten voor gebruikersinterfaces zijn de modale afbeeldingenDit zijn elementen die worden aangeroepen bij het klikken op een knop of anker en hun functionaliteit is om ons een soort pop-upvenster te laten zien.
Dit venster is erg handig omdat het ons in staat stelt om tekst weer te geven die vanwege de lengte niet praktisch is in een knopinfo, of misschien hebben we de gebruiker nodig om wat informatie in te vullen en willen we deze niet naar een andere pagina sturen. Dit type component helpt ons om de netheid van onze applicatie te behouden, maar het helpt ons ook om de gebruiker te dwingen aandacht te schenken aan iets dat heel belangrijk kan zijn.
Natuurlijk moeten hier regels van gezond verstand van toepassing zijn, want hoewel het mogelijk is voor een modaal om een ​​ander modaal op te heffen, is dit in slechte smaak en schaadt het de navigatie van de gebruiker, ook als we meer dan vier velden in een formulier moeten opnemen, is het beter om het op een nieuwe pagina te doen en niet in een modaal om een ​​paar voorbeelden te noemen. Laten we in de volgende code kijken hoe we een modaal kunnen maken:

 Modale grafieken×
Zodra je doorgaat naar de volgende fase, zijn al je acties definitief.

Ik kan je antwoorden niet ongedaan maken
Afsluiten Doorgaan

In dit geval wordt de modal geconfigureerd in de document.klaar om direct te worden weergegeven, wordt dit type implementatie veel gebruikt om waarschuwingen te geven voordat de gebruiker verder gaat. Dan bestaat onze modal uit drie delen; bovenste deel (koptekst), lichaam (lichaam) en voettekst (voettekst).
Normaal gesproken in de koptekst Er is een titel met een formaat dat opvalt om de reden voor de modal aan te geven, in de lichaam de uitleg of inhoud zoals een formulier of bericht, en in de voettekst actieknoppen zoals doorgaan of sluiten. Laten we dus eens kijken hoe ons modale venster eruitziet wanneer we het in de browser uitvoeren:

Dit onderdeel is vrij eenvoudig te implementeren en geeft onze applicatie een professionele stijl, maar het is belangrijk dat we weten hoe we onze logica moeten gebruiken om het op een plaats te plaatsen die de harmonie van de applicatie niet onderbreekt.
Hiermee sluiten we deze tutorial af, waar we effectief drie grote componenten hebben ontwikkeld die ons helpen gebruikersinterfaces te creëren om een ​​betere organisatie en begrip van de acties in onze applicatie te bereiken, waardoor de browse-ervaring en het gebruik ervan wordt verbeterd.