Inhoudsopgave
Het is een raamwerk om consistentie te bevorderen door middel van interne tools. Vóór Bootstrap werden verschillende bibliotheken gebruikt voor de ontwikkeling van gebruikersinterfaces, wat leidde tot inconsistenties en een hoge onderhoudsbelasting.
Bootstrap is modulair en bestaat in wezen uit een reeks stylesheets die de verschillende componenten van de tool implementeren. Een stylesheet met de naam bootstrap.less bevat de stylesheetcomponenten. Ontwikkelaars kunnen hetzelfde Bootstrap-bestand aanpassen door de componenten te selecteren die ze in hun project willen gebruiken.
Tools en klassen beschikbaar in Bootstrap
Gang-systeem en responsief ontwerp
Bootstrap wordt geleverd met een standaard 940 pixel brede rasterlay-out. Als alternatief kan de ontwikkelaar een lay-out met variabele breedte gebruiken. Hiermee wordt de breedte van de kolommen automatisch aangepast.
Het CSS-stijlblad
Bootstrap biedt een set stijlbladen die basisstijldefinities bieden voor alle HTML-componenten. Dit geeft uniformiteit aan de browser en het breedtesysteem, geeft een moderne uitstraling voor de opmaak van tekstelementen, tabellen en formulieren.
Herbruikbare componenten
De reguliere HTML-elementen, Bootstrap, bevatten een andere veelgebruikte elementinterface. Het bevat knoppen met geavanceerde functies zoals knopgroep of knoppen met vervolgkeuzemenu-optie, navigatielijsten, horizontale en verticale labels, broodkruimel, paginering, labels, geavanceerde typografische miniatuurmogelijkheden, formaten voor waarschuwingsberichten en voortgangsbalken.
Javascript- en jQuery-plug-ins
De Javascript-componenten voor Bootstrap zijn gebaseerd op de jQuery Javascript-bibliotheek. De plug-ins zijn te vinden in de jQuery plug-in tool. Ze bieden extra elementen van de gebruikersinterface, zoals dialoogvensters, tooltips en carrousels.
Ze breiden ook de functionaliteit van sommige bestaande interface-elementen uit, waaronder bijvoorbeeld een auto-complete functie voor invoervelden. Versie 2.0 ondersteunt de volgende Javascript plug-ins: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel en Typeahead.
Om Bootstrap op een HTML-pagina te gebruiken, hoeft de ontwikkelaar alleen maar de Bootstrap CSS-stylesheet te downloaden en deze in het HTML-bestand te linken.
Download de gecompileerde CSS- en Javascript-code, wat de gemakkelijkste manier is om met Bootstrap aan de slag te gaan. Het nadeel is dat deze versie niet de originele bestanden of documentatie bevat. Om deze versie te downloaden, ga naar getbootstrap.com en druk op de Download Bootstrap-knop.
We kunnen er ook voor kiezen om als volgt te linken naar de bootstrap-bestanden van externe servers:
Wijzig de volgende links op uw pagina's om deze bestanden te gebruiken:
Na het uitpakken van het bestand dat je hebt gedownload met de gecompileerde versie van Bootstrap, zie je de volgende bestands- en directorystructuur:
bootstrap /
css /
├── bootstrap.css
├── bootstrap.min.css
├── bootstrap-theme.css
└── bootstrap-theme.min.css
js /
├── bootstrap.js
└── bootstrap.min.js
└── lettertypen /
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Deze bestanden zijn de bibliotheken waaruit bootstrap bestaat, later zullen we de componenten zien en hoe ze worden gebruikt.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
