Hoe Bootstrap te installeren
Bootstrap is een open source webframework. Het wordt voornamelijk gebruikt voor front-end ontwikkeling. Het is gratis. Bootstrap is ontwikkeld door Bootstrap Core Team. Bootstrap is oorspronkelijk gemaakt door Mark Otto en Jacob Thornton. Het werd oorspronkelijk uitgebracht in het jaar 2011. Het werd geschreven in HTML, CSS en JavaScript.
Bootstrap-pakket
Dit pakket bevat de volgende items:
- CSS : het wordt Cascading-stijlblad genoemd dat wordt gebruikt om de HTML-elementen te stijlen.
- Componenten : in het Bootstrap-pakket zijn er veel herbruikbare componenten voor dropdowns, iconografie, waarschuwingen, navigatie enz.
- Aanpassen : in Bootstrap-pakket kunnen de componenten worden aangepast, minder variabel en Jquery-plug-ins om de stijl te krijgen.
- Steiger : in een bootstrap-pakket biedt het de basisstructuur met het rastersysteem, de koppelingsstijl en de achtergrond.
- JavaScript : in een bootstrap-pakket zijn er JavaScript-invoegtoepassingen.
Stappen om Bootstrap te installeren
Laten we de stappen bespreken die nodig zijn om Bootstrap te installeren.
Stap 1: Gebruik de onderstaande link om bootstrap te downloaden. Klik op Downloaden, het bootstrap-pakket wordt gedownload in een map Zip. Deze map bevat de CSS- en JS-map.
https://getbootstrap.com/docs/4.0/getting-started/download/
Het gedownloade bootstrap-pakket is klaar om gecompileerde code te gebruiken en kan eenvoudig in het project worden geïntegreerd. Het bestaat uit gecompileerde en verkleinde CSS-bundels en Javascript-plug-ins.
Stap 2: Bronbestand : Bootstrap kan worden samengesteld met een eigen activapijplijn met behulp van JavaScript-, SASS- en documentatiebestanden.
Klik op Downloadbron om de bestanden te downloaden. Het bevat js, CSS en andere bestanden.
Stap 3: Pakketbeheerders: Bootstrap kan worden geïnstalleerd in door Node.js aangedreven bestanden of toepassingen.
$ npm install bootstrap
Stap 4: Voor Node.js-toepassingen kan bootstrap ook worden geïnstalleerd met behulp van een garenpakket.
$ yarn add bootstrap
Stap 5: Als de gebruiker bootstrap voor ruby gems-applicaties wil installeren
- Bundler gebruiken :
gem 'bootstrap', '~> 4.0.0' - Zonder bundler :
$ gem install bootstrap –v 4.0.0
Stap 6: De componist kan worden gebruikt om de bootstraps sass en javascript te installeren en beheren
$ Composer require twbs/bootstrap: 4.0.0
Stap 7: Met NuGet kunt u bootstraps CSS en sass en javascript for.Net-toepassingen installeren en beheren.
- Bootstrap van installatiepakket
- Installatiepakket bootstrap.sass
Stap 8: Jquery wordt ook gebruikt met bootstrap-bestanden of installatiemap. Jquery moet worden gedownload en plaats het Jquery-bestand in de rootmap van Bootstrap om de betere gebruikersinterface te ervaren en vooral Jquery verbetert de functies van bootstrap die het uiterlijk aantrekkelijker en responsiever maken.
Stap 9: Na het uitvoeren van de bovenstaande stappen, kan de ontwikkelaar de HTML-code schrijven om alle bestanden voor de HTML-pagina te koppelen en het HTML-bestand openen om het antwoord te controleren.
Ondersteunde browsers
De bootstrap ondersteunt voornamelijk de nieuwste en stabiele release van alle browsers en platforms. Browser voor mobiele apparaten is ondersteund Android- en IOS-platform. De desktopbrowsers voor verschillende platforms zoals Mac en Windows worden ook ondersteund door bootstrap.
Bootstrap Bestandsstructuur
- Bootstrap is vooraf gecompileerd, de gecompileerde versie van bootstrap wordt gedownload en pak het zip-bestand en de volgende bestandsstructuur uit:
De bovenstaande afbeelding bevat ook de mapbestanden met lettertypen als de ontwikkelaar extra lettertypen nodig heeft om de gebruikersinterface volgens de vereisten te maken, kan die bestanden bevatten die beschikbaar zijn in het bronpakket van bootstrap. De broncode van de bootstrap heeft een meer gedetailleerde bestandsstructuur.
Bootstrap 4
Er zijn belangrijke veranderingen die worden aangebracht in Bootstrap 4, zoals het herschrijven van de code, CSS-ondersteuning voor flexibele formaten, navigatie-aanpassingsopties zijn toegevoegd, responsafstand en grootte-hulpprogramma's zijn toegevoegd, de globale lettergrootte is vergroot van 14 px tot 16 px, aantal hulpprogramma's klassen worden toegevoegd, stijlknop, vervolgkeuzemenu's, mediaobjecten en afbeeldingsklassen worden toegevoegd. Het ondersteunt ook de nieuwste versie van browsers.
Het belangrijkste kenmerk van Bootstrap is het vereenvoudigen van de ontwikkeling van webpagina's. De primaire reden om bootstrap te gebruiken is de keuze van kleur, grootte, lettertype en lay-out om te projecteren. Het biedt basisstijldefinities voor HTML-elementen. De Jquery-plug-ins en Javascript-componenten bieden enkele aanvullende elementen die kunnen worden gebruikt voor gebruikersinterface zoals dialoogvensters en tooltips enz. De bootstrap-componenten bestaan ook uit elementen van HTML, CSS-verklaringen en ook Javascript-code. Het heeft ook een functie voor het uitbreiden van de bestaande interface-elementen.
Het andere hoofdonderdeel van bootstrap zijn de lay-outcomponenten. De basislay-outcomponent wordt een container genoemd waarin elk element van de pagina wordt geplaatst. De container wordt op de webpagina geplaatst en vervolgens kunnen andere lay-outcomponenten zoals CSS-lay-out worden gedefinieerd door rijen en kolommen. Het is afhankelijk van de ontwikkelaar om te kiezen welke container met vaste breedte of vloeistofbreedte voor het ontwerpen van de webpagina. De eerste gebruikt de vier vooraf gedefinieerde breedten, maar later gebruikt de vullingen afhankelijk van de grootte van het scherm waarop de webpagina wordt bekeken.
Gebruik van bootstrap
Bootstrap is zeer eenvoudig te gebruiken en met behulp van bootstrap ontwikkelden ontwikkelaars responsieve websites. Bootstrap wordt ook gebruikt omdat het vele browsers ondersteunt, zoals Google Chrome, Mozilla Firefox, Internet Explorer, safari, opera enz. Bootstrap is eenvoudig om te beginnen en een responsief rastersysteem te maken. Het heeft javascript-plug-ins gebundeld en er is een lijst met te gebruiken bedrijven. Het heeft goede documentatie om te starten en kan snel werken. Bootstrap heeft een responsief ontwerp en een mobiele eerste benadering getoond. Het is open source en gratis. Het bespaart veel moeite en tijd. Het is aanpasbaar. Het belangrijke gebruik van bootstrap is responsief webontwerp, dat helpt bij het aanpassen van de website aan de schermgrootte voor alle apparaten zoals laptop, desktop, mobiele telefoon en tablet.
Conclusie - Hoe Bootstrap te installeren
Bootstrap wordt veel gebruikt als een front-end webframework. Het ondersteunt ook veel programmeertaal en platformonafhankelijk. Het biedt geweldige online communityondersteuning voor beginners en documentatie is ook goed op de officiële site waar alle updates met betrekking tot de release van een nieuwe versie en de geavanceerde functies correct zijn gepubliceerd en gedocumenteerd. Het is het populaire webframework geworden om verschillende tools te bouwen en te integreren met een andere scripttaal.
Aanbevolen artikelen
Dit is een handleiding geweest voor het installeren van Bootstrap. Hier hebben we de stappen besproken om bootstrap te installeren en ook het basisconcept van Bootstrap 4 en het gebruik van Bootstrap. U kunt ook de volgende artikelen bekijken voor meer informatie -
- Bootstrap-opdrachten gebruiken
- Bootstrap-interviewvragen met antwoorden
- Vergelijkingen van Bootstrap en WordPress
- Installatie van WordPress