In 2011 introduceerde Twitter het Bootstrap-framework. Sindsdien heeft dit CSS-framework twee belangrijke herschrijvingen ondergaan, met de meest recente (Bootstrap 3) uitgebracht in 2013. Bootstrap 3 heeft de CSS-bibliotheek getransformeerd door een mobile-first benadering te implementeren die het framework volledig responsief maakte.
Vanaf 2022 bevindt Bootstrap zich in versie vijf en is het een van de meest populaire frontend-frameworks. Het heeft een uitgebreide lijst met vooraf gebouwde componenten en een indrukwekkende verzameling JavaScript-plug-ins. In dit artikel leert u hoe u Bootstrap kunt gebruiken en hoe u optimaal gebruik kunt maken van de functies.
Bootstrap in uw project installeren
Er zijn drie manieren om gebruik Bootstrap in uw project. U kunt de CSS- en JavaScript-bestanden downloaden en hosten, in uw project installeren met npm, of de juiste cdn-links in uw project kopiëren en plakken.
Met de cdn-benadering moet u eraan denken om de Bootstrap-link voor elke andere CSS-link in de head-tag van uw HTML-bestand te plaatsen.
Sommige Bootstrap-componenten hebben functionele activiteiten, zoals het wisselen van knoppen en positionering waarvoor JavaScript en Popper-script nodig zijn. Dus als u van plan bent om functionele componenten te gebruiken, moet u de scripttag ook aan uw HTML-bestand toevoegen.
Het laatste dat u nodig hebt om Bootstrap te gaan gebruiken, is de uitkijk postje label.
Omdat Bootstrap een mobile-first technologie is, uitkijk postje label zal helpen bij responsief ontwerp. Een eenvoudige manier om bootstrap in uw project te gebruiken, is door gewoon te kopiëren Startsjabloon van Bootstrap.
Een website maken met Bootstrap
Wanneer u een nieuwe website maakt, is een van de eerste dingen die u moet overwegen de lay-out. Daarna kunt u naar andere componenten gaan, zoals knoppen en typografie.
Bootstrap heeft een verzameling structurele componenten die u kunt gebruiken om elementen op een webpagina te ordenen. Deze lay-outstructuren omvatten:
- containers
- Rooster
- kolommen
- dakgoten
- Breekpunten
Met een licht gewijzigde versie van de Bootstrap-startsjabloon kunt u beginnen met het uittekenen van de structuur van uw webpagina en nieuwe componenten toevoegen.
Het index.html-bestand
Vereiste metatagsBootstrap-CSS
Bootstrap
Aparte Popper en Bootstrap JS
De Bootstrap-containerklasse
De Bootstrap container class pads, bevat en lijnt de elementen op uw webpagina uit. Als u van plan bent om Bootstrap's te gebruiken standaardraster, dan moet je ook Bootstrap's. gebruiken container klas. Er zijn drie soorten container klassen; container, containervloeistof, en container-{breekpunt}. De containerklasse is de standaardcontainer; het is responsief en heeft een vaste breedte bij elk van de zes breekpunten van Bootstrap.
De zes standaard breekpunten van Bootstrap omvatten:
- Extra klein: Minder dan 576 pixels.
- Klein: Groter dan of gelijk aan 576px.
- Medium: Groter dan of gelijk aan 768px.
- Groot: Groter dan of gelijk aan 992px.
- X-groot: Groter dan of gelijk aan 1200px.
- XX-Groot: Groter dan of gelijk aan 1400px.
Bootstrap's gebruiken container in uw project kunt u eenvoudig de gewenste containerklasse toevoegen aan de externe div op uw webpagina.
De container van Bootstrap gebruiken
plaats hier website-elementen Door de bovenstaande code in de hoofdtekst van uw bestaande HTML-bestand in te voegen, wordt uw webpagina responsief en wordt er ook opvulling aan elke kant van uw webpagina gecreëerd.
Het Bootstrap-rastersysteem
Het raster van Bootstrap maakt gebruik van een systeem met twaalf kolommen dat afhankelijk is van de rij en col rasterklassen, evenals de containerklasse. Elke rij heeft twaalf kolommen en elk element kan zich over een of meer van deze kolommen uitstrekken. De kolomklasse geeft aan hoeveel kolommen een element moet innemen. Bijvoorbeeld, een element dat de gebruikt col-2 klasse zal zich over twee kolommen uitstrekken, een element dat gebruik maakt van de col-3 klasse zal zich over drie kolommen uitstrekken, enzovoort.
Het Bootstrap-rastersysteem is gebaseerd op de flexbox-module. Als slechts twee kolommen een rij bezetten, verdelen ze de ruimte gelijkelijk onder elkaar. De goot class is een van de structurele elementen van Bootstrap en bepaalt de afstand tussen elke kolom in de grid-systeem. Elk rooster kolom heeft aan weerszijden 12px opvulling.
Het rastersysteem van Bootstrap gebruiken
hoofdinhoud op een webpagina
Artikel
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Als u de bovenstaande code in de container-div invoegt, wordt een Bootstrap-rastersysteem van drie rijen en twee kolommen gemaakt. De eerste rij bovenaan bevat de navigatiebalk, de derde rij onderaan bevat de voettekst van de website en de tweede rij in het midden bevat de inhoud van de webpagina. De tweede rij heeft twee kolommen: het hoofdartikel en een terzijde.
Door een lokaal CSS-bestand te maken en een rand aan elk gedeelte van het raster toe te voegen, kunt u het duidelijker zien.
Het style.css-bestand
.rij{
rand: 2px blauw effen;
}
.col, .col-sm-4{
rand: 2px rood effen;
}
Als u naar het bovenstaande CSS-bestand linkt, wordt de volgende uitvoer in uw browser gemaakt:
Een duidelijk verschil in de afbeelding hierboven is de grootte van de kolommen. Gewoonlijk nemen twee (of meer) kolommen in een rij dezelfde hoeveelheid ruimte in beslag, tenzij u expliciet anders aangeeft. De col-sm-4 class in de bovenstaande HTML-code zorgt ervoor dat de tweede kolom slechts vier van de twaalf kolommen in de rij beslaat. De sm in de col-sm-4 class vertegenwoordigt het kleine breekpunt, dus het zijgedeelte beslaat slechts vier kolommen vanaf het kleine breekpunt en hoger.
Bootstrap-componenten
Nadat u de lay-out van uw webpagina hebt bepaald, is de volgende stap het toevoegen van website-bouwelementen, die Bootstrap componenten noemt. De lijst met componenten van Bootstrap omvat:
- navigatiesysteem
- Toetsen
- Knop groep
- Lijst groep
- Kaarten
- Instorten
- Dropdownmenu's
De Bootstrap Navbar-klasse
Elke Bootstrap-navigatiebalk vereist de navigatiebalk klas. Ze vereisen ook het gebruik van de of het toewijzen van het trefwoord "navigatie" aan de Bootstrap rol attribuut in de ouder van de navigatiebalk div. Om de navigatiebalk responsief te maken, moet u de. gebruiken JavaScript-plug-in samenvouwen.
De Bootstrap navigatiebalk klasse gebruikt een aria-stroom attribuut dat de waarde "page" nodig heeft om de huidige pagina aan te geven, of "true" om het huidige gedeelte van een webpagina aan te geven. De waarde die u toewijst, is afhankelijk van de structuur van uw website (één pagina of meerdere pagina's). Je moet ook de gebruiken actieve klas om de huidige pagina of sectie aan te geven.
De navigatiebalk van Bootstrap gebruiken
De navigatie vervangen rij van de Bootstrap rooster met de bovenstaande code zal de volgende uitvoer in uw browser worden gemaakt:
Er zijn verschillende andere belangrijke klassen en Bootstrap-attributen in de bovenstaande code, zoals de navbar-merk class, die gericht is op het logogedeelte van uw navigatiebalk. De navigatiebalk is ook volledig responsive dankzij de JavaScript-plug-in samenvouwen.
Responsieve navigatiebalk
U herinnert zich misschien dat Bootstrap zes standaardinstellingen heeft breekpunten en een van die breekpunten is groot (lg). De navbar-uitbreiden-lg klas in de hierboven wordt uitgevouwen tot een horizontale lijst met navigatie-items op het grote breekpunt en daarboven, en die lijst keert terug naar een knop op elk breekpunt onder groot.
Als u meer wilt weten over het maken van responsieve websites, hebben we een stuk over dit samengesteld hoe dit te doen met mediaquery's in HTML en CSS.
De Bootstrap-knopcomponent
De Bootstrap knop component maakt gebruik van de en vereist dat u de type toeschrijven aan "knop".
Bootstrap heeft verschillende soorten knoppen. Om de meer conventionele knop te maken, gebruikt u de btn class, maar om een hamburgerknop te maken zoals in de bovenstaande code, gebruik je de navbar-toggle klas.
Wanneer moet u Bootstrap gebruiken?
Bootstrap staat bekend als een van de meer populaire CSS-frameworks omdat het een pionier is. Lang voordat responsive design zo gewoon was in softwareontwikkeling, transformeerde Bootstrap zichzelf in een volledig responsive framework.
Door de jaren heen is Bootstrap blijven groeien en verbeteren, waardoor het de nummer één keuze is voor topbedrijven, zoals Twitter en Spotify. Het zal echter niet altijd de beste optie zijn voor uw softwareontwikkelingsbehoeften. Als u bijvoorbeeld een React-toepassing maakt, is er een ontwerpsysteem genaamd MUI dat is aangepast voor React-toepassingen.
Material-UI heeft een nieuwe naam en heeft als doel een nieuw ontwerpsysteem te creëren als alternatief voor Material Design. Hier leest u hoe u MUI kunt gebruiken in ReactJS-projecten.
Lees volgende
- Programmeren
- Codeertips
- Programmeren
- Programmeerhulpmiddelen
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren
