Inleiding tot Bootstrap-componenten
Oorspronkelijk genoemd als de Twitter Blueprint, werd deze ontwikkeld door Mark Otto en Jacob Thronton op Twitter. Bootstrap is een gratis CSS-framework dat responsiviteit geeft aan de webpagina's. Door responsiviteit betekent dit dat verschillende DOM-elementen zich overeenkomstig aanpassen aan de verandering van de schermgrootte zonder de elegantie van de webpagina in gevaar te brengen, omdat dit anders traditioneel zou gebeuren met CSS-methoden voor pixel- of percentagegrootte.
Dit wordt ook wel het 'mobile-first' CSS-framework genoemd omdat het is ontworpen om een CSS Grid-lay-out te hebben door de rijen en kolommen te definiëren. Dit framework bevat ook JavaScript-componenten en CSS-klassen. Om dit framework te gebruiken, moet u jQuery en JavaScript Framework for Bootstrap verplicht koppelen aan de andere Bootstrap CSS-bestanden. Deze CSS-bestanden kunnen zowel worden gedownload als in de vorm van CDN's (Content Delivery Network).
Verschillende Bootstrap-componenten:
Bootstrap is gebundeld met tientallen componenten die kunnen worden hergebruikt om een goede gebruikerservaring en gebruikersinteracties op een webpagina te bieden, zoals navigatiebalken, pop-ups, dropdowns, pictogrammen, knoppen, vooraf ontworpen formulieren en ook maatopties voor verschillende DOM-elementen.
1) Glyphicons - Dit zijn de pictogrammen met lettertypeopmaak die beschikbaar zijn in Bootstrap. Ze zijn ongeveer 200 in getal. Deze glyphicons zijn te vinden op https://glyphicons.com.
Hoe te gebruiken?
Er zijn glyphicons om bijna alle acties aan te duiden, zoals zoomen, bewerken, waarschuwing, bestand, verwijderen, enz. En ze zijn gedefinieerd in een individuele klasse. U moet dus de basisklasse en de afzonderlijke klasse gebruiken, idealiter in een span-element en deze glyphicons gebruiken.
Syntaxis:
2) Dropdowns - Dit zijn de op toggle gebaseerde menu's, een lijst met links. Deze zijn dynamischer gemaakt door de JS-plug-in en zijn te vinden op http: // getbootstrap / javascript / # dropdowns
Hoe te gebruiken?
U moet de .dropdown-klasse gebruiken omdat de klasse van het element de lijstitems bevat met het klasse .dropdown-menu.
Syntaxis:
3) Knopgroepen - Met deze Bootstrap-component kunt u een reeks knoppen groeperen in een reeks naast elkaar.
Hoe te gebruiken?
Definieer divisie-elementen met .btn-groepsklasse en nest die elementen met knop met .btn-klasse. Correct
Mis
4) Dropdowns van knoppen - Deze component wordt gebruikt om een knopelement te gebruiken om een dropdown te activeren.
Syntaxis:
5) Invoergroepen - dit breidt de vormbesturingsklasse uit en voegt tekst of knoppen toe aan beide zijden van een invoerveld van een invoerelement. U moet .input-group class gebruiken met een .input-group-addon class om deze inputgroepen te gebruiken.
Syntaxis:
@
6) Navbar - Deze componenten dienen als navigatie-headers voor uw website. Ze zijn samengevouwen om verticaal te worden uitgebreid met een wisselend hamburgermenu in de apparaten met kleinere schermformaten en worden horizontaal naarmate de schermbreedte toeneemt.
Syntaxis:
7) Jumbotron - Dit is een bootstrap-component die zich over het volledige scherm (of kijkvenster) kan uitstrekken om enkele belangrijke inhoud weer te geven.
Syntaxis:
8) Waarschuwingen - Dit is een Bootstrap-component met een jQuery-plug-in die contextuele feedbackberichten biedt, afhankelijk van de actie van de gebruiker. Dit wordt in principe gebruikt om waarschuwingsberichten weer te geven.
Syntaxis: …
9) Voortgangsbalken - Dit onderdeel wordt gebruikt om de beelden over de feedback op de voortgang van het werk of actie te voorzien van een voortgangsbalk.
Synatx:
Voorbeeld:
10) Badges - Dit is een component om iets als ongelezen items te markeren door de klasse .badge toe te voegen aan het DOM-element, bij voorkeur een overspanning.
Syntaxis:
Berichten 3
11) Paginering - Dit onderdeel geeft uw site paginering met meerdere pagina's zodat de inhoud dat kan
op te splitsen in meerdere pagina's en gemakkelijk te navigeren. Gewoonlijk wordt het DOM-element voor niet-geordende lijsten gedefinieerd met deze klasse .pagination.
Syntaxis:
Hoe dit zal helpen in je carrière?
Alle bedrijven richten zich nu op User Interaction en User Experience (UI / UX). Omdat de overgrote meerderheid van de bevolking handheld-apparaten zoals tablets en smartphones gebruikt, die sterk variëren qua pixelresolutie en schermgrootte. Dit is waarom het echt belangrijk is om het front-end ontwerp te hebben dat responsief genoeg is om zichzelf aan te passen aan elk soort scherm zonder de elegantie van de webpagina in gevaar te brengen.
Dus bekwaam zijn bij Bootstrap is waardevol voor je in de technische carrière en bedrijven kijken ernaar uit je aan te nemen met een knappe salaris. En omdat het gratis en open-source is, zijn er veel mogelijkheden voor u om als ontwikkelaar bij te dragen en het nog beter te maken dan het nu is.
Conclusie-
Bootstrap-framework is een zeer handige tool om responsiviteit op de webpagina's te brengen. De componenten die in deze blog worden uitgelegd, zijn enkele van de meest gebruikte componenten die u helpen minder code te schrijven voor meer functionaliteit en meer elegantie toevoegen aan de webpagina die u bouwt.
Aanbevolen artikelen
Dit is een handleiding voor Bootstrap-componenten. Hier bespreken we ook een introductie en verschillende componenten van bootstrap samen met de syntaxis. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- Hoe Bootstrap te installeren
- Hoekig versus Bootstrap
- Bootstrap-training
- Vragen tijdens solliciteren bij Bootstrap
- Hoe Bootstrap Layout gebruiken?
- Top 5 soorten boosts met voorbeeldcode