Als je nog nooit hebt gehoord van Bootstrap, een door Twitter ontwikkeld framework voor het maken van prachtige websites, mis je het! Bootstrap maakt het vrij snel en gemakkelijk om een website te ontwerpen zonder veel kennis van CSS (Cascading Style Sheets). Als je nieuw bent met programmeren voor het web, hoef je niets te weten over CSS om te leren hoe Bootstrap werkt; alles wat je nodig hebt is een enkel HTML-document. We gaan Bootstrap bekijken en laten zien waar het allemaal om draait, hoe het werkt en of het een goede optie is voor elke website die je bouwt.
De Bootstrap-API in uw HTML-bestand invoegen
U hebt een paar opties voor het invoegen van Bootstrap in uw hoofdprojectbestand. De eerste optie is om alle benodigde Bootstrap-bestanden in uw project in te voegen. U kunt dit doen door het pakket te downloaden en naar uw projectmap te uploaden. U moet natuurlijk het primaire Bootstrap CSS-bestand aan uw document koppelen. De officiële website van Bootstrap heeft een stapsgewijze handleiding om dit te doen.
De andere optie is om het downloaden van het pakket over te slaan en een Content Delivery Network (CDN) te gebruiken. Met een CDN kunt u de primaire Bootstrap-bestanden aan uw HTML-document koppelen zonder het ooit te downloaden. Dit is natuurlijk niet altijd een goede zaak voor professionele websites, omdat ik niet te snel mijn bedrijfs- of portfoliopagina zou verlaten om het lot te krijgen als die server ooit zou uitvallen. Het is het beste om de bestanden in uw project te hebben, maar voor het doel van het leren doet de CDN het prima.
Om Bootstrap in uw HTML-document in te voegen, moet u gewoon de volgende code in de
tag in uw HTML-document:Zodra die koppelingen in die head-tag zijn ingevoegd, zou u klaar moeten zijn om Bootstrap-klassen te gaan gebruiken. Uw document zou er ongeveer zo uit moeten zien:
Bootstrap en klassen
Bootstrap-elementen zijn onderverdeeld in klassen, die slechts een stel vooraf geschreven CSS zijn die u in uw markup kunt invoegen. Het invoegen van klassen in uw markeringen is eenvoudig, u hoeft alleen de naam te weten van de klasse die u wilt gebruiken en deze vervolgens op een van uw HTML-elementen toe te passen met de waarde class = "classname", zoals in een vorig artikel is besproken.
Het moeilijke deel is uitzoeken hoe dat allemaal samenwerkt om iets moois te creëren. Je kunt alle verschillende klassen die beschikbaar zijn in Bootstrap rechtstreeks uit de officiële documentatie bekijken. Nu is Bootstrap beheersen een ander verhaal. Dat is niet iets dat wij of iemand anders u kunnen leren. Je kunt zelfstudie na zelfstudie bekijken, maar om goed te worden in het gebruik van het framework, komt dat met veel vallen en opstaan. En dat vereist dat u er in uw eigen projecten mee aan de slag gaat.
Met dat in gedachten smeek ik je om je eigen HTML-project op je computer te starten met behulp van Atom of een andere teksteditor, te bekijken waar HTML en CSS-klassen allemaal over gaan, en dan te beginnen met spelen met Bootstrap. En als u voldoende opmaak kent, kunt u misschien zelfs uw eigen portfoliowebsite maken als testoefening.
Is Bootstrap een haalbare optie voor elke website?
Bootstrap is een geweldig framework, maar is het een haalbare optie voor elke website die u maakt? Het hangt echt af van de ontwikkelaar en de vereisten van het project. In veel professionele omgevingen heb je niet echt de keuze welke technologieën je gebruikt, want dat is grotendeels aan de Project Manager. Als Project Manager ervoor kiest Bootstrap te gebruiken, ga je dit ook combineren met heel veel aangepaste CSS. Dit maakt uw website over het algemeen uniek en anders dan andere websites die Bootstrap gebruiken.
Persoonlijk zie ik Bootstrap niet als een geweldige optie voor elke website. Natuurlijk kan het helpen en enkele snelkoppelingen bieden, maar ik heb uiteindelijk ontdekt dat het van de grond af ontwerpen met CSS de beste route is, grotendeels vanwege de controle die je erover hebt. Maar nogmaals, als je net begint met webprogrammeren, is het helemaal niet erg om Bootstrap te gebruiken, maar vertrouw er niet op voor je carrière.
Het is vermeldenswaard dat als je een beginnende ontwikkelaar bent, je Bootstrap niet voor alle projecten in je portfolio moet gebruiken. Het kan zijn dat je de API bedreven bent, maar je bent nog niet helemaal bekend met CSS. Dat gezegd hebbende, het is goed om een behoorlijke mix van beide in je portfolio te hebben (of zelfs uitsluitend CSS, omdat het gemakkelijk is om Bootstrap op te halen).
Sluitend
Dat is alles wat Bootstrap in een notendop is. Zoals ik al eerder zei, moedig ik je aan om je eigen HTML-project te starten en enkele van de verschillende klassen aan elementen toe te voegen om met het framework te beginnen spelen. U kunt alle verschillende componenten die Bootstrap biedt met uitleg en codevoorbeelden hier vinden.
Bootstrap is echt een nette tool, maar vergeet niet alleen te vertrouwen! Het is goed om ermee bekend te zijn en je weg te vinden in het framework, maar zorg er ook voor dat je CSS induikt om echt te begrijpen wat er achter de schermen gebeurt. Niet alleen dat, maar een grondige kennis van CSS complimenteert Bootstrap enorm, zodat je echt een aantal unieke en mooie websites kunt maken met je eigen aanpassingen.
