De Bootstrap-componenten gebruiken

Bootstrap Het heeft twee geweldige solide basissen die ons een standaard startpunt geven voor de verschillende webdesign-oplossingen die we nodig hebben of willen doen, dit zijn de Grid en de basis-CSS, met deze twee tools kunnen we een grote centrale basis bouwen waar we plaats het om alle verschillende elementen die deel uitmaken van onze interface te laten rusten.
Zoals alle bases, doen deze op zichzelf niet de rest van de constructie, om een ​​grotere mate van verfijning en detail te bereiken, is het noodzakelijk om extra componenten te gebruiken die zich op onze basis bevinden en hun kracht zal natuurlijk worden beïnvloed door de stevigheid. van laatstgenoemde.
In het geval van Bootstrap We hebben verschillende componenten die ons helpen om de details van onze ontwerpen te maximaliseren, componenten die variëren van pictogrammen, panelen en zelfs kopteksten. Elementen die ons helpen om onze toepassing te onderscheiden en te benadrukken van anderen.
De componenten in Bootstrap Ze kunnen onafhankelijk van de rest van onze pagina's worden gebruikt, dat wil zeggen, we kunnen zoveel componenten genereren als we nodig hebben in een enkel document zonder dat ze in conflict komen met de andere.
Bovendien is de basisstijl standaard al vooraf gedefinieerd, zodat we onze applicatie snel en zonder veel moeite kunnen bouwen, waar we uiteindelijk onze hele applicatie kunnen aanpassen door de basisstijl voor onze eigen stijlen te wijzigen.
De componenten kunnen van CSS, JavaScript of beide, dus sommige naast de Basis-CSS ze hebben bibliotheken van derden nodig, zoals: jQuery, dit lijkt misschien wat ongemakkelijk, maar de realiteit is dat de implementatie zo eenvoudig is dat we ons niet eens realiseren dat we meer dingen gebruiken dan wat standaard wordt gebracht Bootstrap.
Een van de eerste componenten die we moeten begrijpen, zijn de pictogrammen, omdat we met deze kleine stukjes afbeelding de gebruiker de functionaliteit van elk onderdeel van ons ontwerp kunnen laten begrijpen, dus wanneer we een pictogram van een groot x we weten dat het gerelateerd is aan het sluiten van de huidige sectie of in het geval dat we een pictogram zien in de vorm van + we zullen weten dat het is om iets toe te voegen.
glyphiconsIn Bootstrap er is een bibliotheek met pictogrammen glyphicons, erg populair in webdesign en dat biedt ons praktisch een pictogram voor elke actie die we op een webpagina kunnen uitvoeren, dit levert ons veel werk op omdat we niet hoeven na te denken over het zoeken naar iemand om grafische stukken te ontwerpen die dienen deze doeleinden.
In de volgende afbeelding kunnen we de pictogrammen zien die we direct op de website van . hebben Bootstrap:

VERGROTEN

Dit is slechts een klein voorbeeld van de pictogrammen die we beschikbaar hebben, maar als we door de officiële pagina bladeren, zien we alle opties die we hebben voor ons gebruik.
Het gebruik van deze pictogrammen is heel eenvoudig, we hoeven alleen de klasse toe te voegen glyphicon naar het element HTML en voeg vervolgens de klasse van het bijbehorende pictogram toe uit de beschikbare lijst. Pictogrammen worden meestal toegevoegd aan items zoals of omdat we er op deze manier voor zorgen dat ze alleen visueel zijn, waardoor we het best mogelijke resultaat krijgen. Laten we dan in de volgende code een voorbeeld bekijken van hoe dit onderdeel te gebruiken in HTML.

 De Glyphicons gebruiken in Bootstrap
Betaal in
Mail
Gebruikers
Prullenbak
Afmelden

In deze code hebben we eenvoudig de insluitsels uit onze bibliotheken van . geplaatst Bootstrap corresponderend, toevoegend jQuery als een bibliotheek van derden en voeg vervolgens de bibliotheek toe js van Bootstrap, is het belangrijk om deze volgorde te behouden aangezien de js-bibliotheek van Bootstrap nodig hebben jQuery en als het is opgenomen, geeft het ons een fout in de implementatie.
Vervolgens hebben we binnen onze enkele secties gemaakt waar we de . hebben toegevoegd glyphiconsVoor onze doeleinden was het plaatsen van de pictogrammen in het label voldoende. Als we het in onze browser uitvoeren, krijgen we het volgende resultaat:

Zoals we kunnen zien, vergezellen de pictogrammen de berichten waardoor ze meer gewicht en begrip krijgen, bijvoorbeeld in het zoekvak als iemand geen Engels spreekt, zullen ze het bericht niet begrijpen zoekenMaar als je computersystemen hebt gebruikt en je ziet meteen het vergrootglaspictogram, dan weet je dat het verwijst naar zoekopdrachten, dat is de ware kracht van dit onderdeel.
Een ander belangrijk onderdeel zijn de navigatietabs, deze stellen ons in staat om onze inhoud op dezelfde pagina te ordenen, waardoor we veel ruimte vermijden en het leven van de gebruiker gemakkelijker maken door niet een groot aantal secties in onze webtoepassing te hoeven leren.
Om deze tabbladen te gebruiken hebben we de hulp van de klas nodig nav, dit is wat het doet is het verwijderen van de standaardstijl van HTML van de elementen en zijn zonen , waardoor het gebruik en de daaropvolgende aanpassing aan ons ontwerp wordt vergemakkelijkt. Om dit te gebruiken, hoeven we alleen maar de klassen toe te voegen nav Y nav-tabbladen naar een element en hiermee zullen we het juiste resultaat krijgen.
Laten we de volgende code bekijken waarin we deze oplossing implementeren, net als in het vorige voorbeeld moeten we de bestanden opnemen bootstrap.css, bootstrap-thema.css, bootstrap.js Y jquery.js, laten we onze code eens bekijken:

 De Glyphicons gebruiken in Bootstrap

Veiligheid
Records
Inhoud

Zoals we het gebruik van het element opmerken met deze klasse kunnen we een structuur maken HTML normaal, maar het resultaat zoals we hieronder zullen zien, geeft ons een andere manier om de informatie te ordenen. We kunnen een ander interessant aspect van onze code benadrukken en het is de combinatie van de glyphicons met deze oplossing, waarmee we laten zien wat we uitleggen over de onafhankelijkheid van de elementen.

VERGROTEN

Een ander zeer nuttig onderdeel zijn de vervolgkeuzemenu's, deze stellen ons in staat om veel opties in een kleine ruimte samen te brengen, vooral voor webpagina's met veel categorieën die ze moeten organiseren.
Laten vallenHet onderdeel van Bootstrap wie dit afhandelt heet Laten vallen en net als het vorige onderdeel wordt het toegepast in het element de constructie ervan is echter iets complexer, hoewel het niet verder gaat dan de HTML-werkstijl.
We moeten eerst een element hebben dat de kop van de vervolgkeuzelijst is, dan moeten we de . hebben die de opties bevat die moeten worden weergegeven. Hiervoor gaan we het vorige voorbeeld herformuleren om een ​​drop-down toe te voegen in het content tabblad, hiermee kunnen we ons voorbeeld beter begrijpen.
Om een ​​beetje samen te vatten, gaan we alleen de inhoud van de tonen, aangezien de kop hetzelfde zal zijn. Laten we de code dan eens bekijken voor onze vervolgkeuzemenufunctionaliteit:

Veiligheid
Records
Inhoud

Videos
Afbeeldingen
Audio

We zien dan hoe in een element we zijn begonnen met de vervolgkeuzelijst met de klas laten vallen, dan definiëren we hierin een element als de optietrigger bij het toevoegen van de klasse dropdown-toggle en tot slot creëerden we een wat heeft de klas? drop-down menu om te identificeren dat het alle opties heeft die we zullen zien. Als we ons voorbeeld in de browser uitvoeren, krijgen we het volgende resultaat:

VERGROTEN

Dit is natuurlijk maar een klein deel van wat we kunnen bereiken, aangezien het mogelijk is om meer effecten toe te voegen en met verschillende stijlen de visuele weergave hiervan te veranderen. Hiermee sluiten we deze tutorial af, waar we drie van de handigste componenten hebben gezien die we kunnen gebruiken in Bootstrap, waardoor een veel grotere aanpassing van onze applicatie wordt bereikt.