Werken met webpagina's vereist veel meer dan alleen de talen kennen die we moeten gebruiken, er zijn een reeks mijlpalen waaraan we moeten voldoen om een product te ontwikkelen met een uitzonderlijk resultaat. Een van deze mijlpalen is het ontwerp en de opstelling van de elementen die op het scherm worden weergegeven.
Laten we ons voorstellen dat we een webpagina moeten ontwerpen, als we helemaal opnieuw beginnen, moeten we rekening houden met hoe het menu, tabellen, knoppen eruit moeten zien, dingen zo eenvoudig als de pictogrammen die we op sommige actieknoppen plaatsen, enz.
Zoals we kunnen zien, is het hard werken, vooral als we willen dat het er optimaal uitziet en aantrekkelijk is, moeten we ook gedetailleerd zijn om de site een persoonlijk tintje te geven, nu, wat als we geen ontwerpers zijn? Dit is de grote vraag, er zijn ontwikkelaars die een oogje dichtknijpen als het gaat om goede smaak en design, en dit soort profielen worden geremd om kwalitatieve webverschijningen te maken. Of wat als we een goede smaak hebben maar weinig tijd hebben om te ontwerpen?
Om deze twee geweldige vereisten op te lossen, hebben we: Bootstrap dat is niets meer dan een CSS-framework dat stelt ons in staat om het basisaspect van onze pagina in één keer te verkrijgen zonder te hoeven lijden aan het ontwerp, maar daarnaast helpt het ons ook met basiseffecten en een heel speciale manier om de inhoud die we gaan presenteren te structureren.
Bootstrap-voordelen:Dat weten we al Bootstrap het is een CSS-framework en dat helpt ons om de basisaspecten van onze website vast te stellen, maar daarnaast heeft het bepaalde voordelen in termen van gebruik, we gaan hieronder enkele van de positieve dingen zien die het ons brengt Bootstrap:
1. HergebruikMet Bootstrap We hebben veel componenten standaard gemaakt, zodat we ze zonder aanpassingen in verschillende delen van onze website kunnen gebruiken, waardoor we de tijd en de hoeveelheid code die we gebruiken verminderen. Dit bevordert ook de modulaire ontwikkeling van onze applicaties.
2. ConsistentieDankzij het feit dat we veel componenten op een generieke manier hebben gemaakt, is de code consistent, dat wil zeggen dat hij zeer vergelijkbare structuren aankan, dus bij het lezen of onderhouden van de applicatie zullen we al een stuk eenvoudiger weten hoe het werkt.
3. Flexibel ontwerpMobiel ontwerp is erg belangrijk en Bootstrap houdt er vanaf het begin rekening mee, we hebben de flexibiliteit dat onze site zich automatisch aanpast aan verschillende resoluties en schermlay-outs, wat ons veel werk bespaart omdat we mobiele weergaven helemaal opnieuw moeten ontwerpen.
4. GemeenschapEen ander aspect om rekening mee te houden is de documentatie, wanneer we een raamwerk van derden gebruiken, is het erg belangrijk om te weten waar we terecht kunnen als we twijfels hebben en in die zin Bootstrap Het is niet te vergelijken, omdat we bijna elk antwoord op onze twijfels kunnen krijgen zonder veel moeite.
Nadelen van BootstrapHoewel bijna alles goed is, moeten we het ook hebben over de nadelen of minder goede aspecten waarmee we worden geconfronteerd wanneer we dit gebruiken CSS-frameworkLaten we eens kijken naar enkele van de zwakke punten hieronder.
1. Weinig origineelAls we niet wat tijd nemen om ons ontwerp te maken, kunnen we zo weinig origineel blijven als we gebruiken Bootstrap zonder meer, hoewel dit raamwerk ervoor is ontworpen, vanwege de grote acceptatie die het heeft gehad, moeten we wat meer werken om er niet uit te zien als de kopie van de kopie.
2. LeercurveZoals alles, moeten we een leercurve doormaken als we er het maximale uit willen halen, het probleem is dat als we van het basisaspect naar het geavanceerde willen gaan, de schok een beetje sterk is.
3. Slechte compatibiliteit tussen versiesWanneer er een versiewijziging is, verliest de vorige versie veel geldigheid en als we willen updaten kost het ons, vooral als we belangrijke wijzigingen hebben aangebracht zodat onze site er anders uitziet.
InstallatieZodra we weten wat het is Bootstrap, en de voor- en nadelen van het gebruik ervan in onze projecten, moeten we naar het praktische deel van de tutorial gaan, nu gaan we leren waar we dit raamwerk vandaan kunnen halen en hoe we het in ons project kunnen opnemen.
Bootstrap verkrijgenHet eerste dat we moeten doen, is de benodigde bestanden verkrijgen om op te nemen: Bootstrap in ons project moeten we daarom hun website getbootstrap.com bezoeken en de benodigde bestanden downloaden, of als alternatief een CDN om te voorkomen dat de bestanden op onze server worden gehost en het gebruik van onze bandbreedte te verminderen.
Wat de optie ook is, we moeten op een pagina zijn die lijkt op de volgende als we op de eerste downloadknop klikken wanneer we de framework-pagina bezoeken:
VERGROTEN
Om het werk te vergemakkelijken, laten we aannemen dat we het project hebben gedownload, het komt in een gecomprimeerd bestand dat we moeten uitpakken op een locatie die we kunnen gebruiken en dat zou ongeveer als volgt moeten zijn:
Zoals we kunnen zien, moeten er binnen ons project drie mappen zijn, één voor de CSS, een andere voor de bronnen die worden gebruikt en tot slot een voor de JS noodzakelijk. Hiermee hebben we al beschikbaar Bootstrap, wat niets meer is dan het kopiëren van het project naar onze bronnenmap.
Aan de slag met BootstrapOmdat we alle bronnen in ons bezit hebben, moeten we het in ons ontwerp opnemen, hiervoor kunnen we een bestand maken HTML en maak daar de nodige insluitsels, we kunnen dit in meer detail zien in de volgende code:
Bootstrap installerenZoals we kunnen zien, was het enige dat we deden drie bestanden opnemen, in het bijzonder twee .css en een .js, dit is wat we nodig hebben om de hele structuur te gaan gebruiken, als we ons bestand nu openen met een browser zullen we zien hoe het lettertype van de letters verschilt van wat we normaal zouden zien met een label H1:
Het Bootstrap-rasterOm de organisatie van onze ontwerpen te bereiken, Bootstrap gebruik een raster of rooster, deze is opgebouwd uit 12 kolommen, dus alles wat we op ons scherm zien moet op deze manier worden georganiseerd, hiermee wordt bereikt dat de pagina zo kan worden gestructureerd dat we gebruik kunnen maken van de tools die ons worden aangeboden op een zeer transparante manier.
Natuurlijk is het een aanpassingsproces, maar het belangrijkste is dat we kolommen kunnen maken die meerdere groeperen, evenals wanneer we werken met de tabellen van HTML dat we kolommen met meerdere joins kunnen maken met de eigenschap span. Om een website te maken die deze structuur gebruikt, hebben we alleen het volgende nodig:
Een div met de klas container, hierin een div met de klas rij, en ten slotte binnen een of meer div met de klasse kool, laten we in de volgende code een voorbeeld zien van een pagina met 3 kolommen, hiervoor moet elke kolom 4 groeperen om in totaal 12 toe te voegen, wat we hebben uitgelegd is de standaardwaarde van Bootstrap.
Kolommen in BootstrapDit resulteert in een pagina waar de drie interne div's in een enkele rij zijn verdeeld in drie gelijke kolommen, zoals we kunnen zien in de volgende afbeelding:Voorbeeld van het gebruik van kolommen in bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam faciliteert mijn in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Noem gewoon ex, verzoek om efficitur vel, placerat sit amet purus. Cras id semper felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam faciliteert mijn in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Noem gewoon ex, verzoek om efficitur vel, placerat sit amet purus. Cras id semper felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam faciliteert mijn in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Noem gewoon ex, verzoek om efficitur vel, placerat sit amet purus. Cras id semper felis. Be ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
VERGROTEN
Deze structuur, ondanks dat het er een beetje vierkant uitziet, is erg flexibel, omdat we alleen een soort spel met de containers en hun kolommen hoeven te maken om de gewenste resultaten te bereiken. Hiermee ronden we deze tutorial af, we hebben effectief onze eerste stappen gezet met Bootstrap en nu kunnen we de voordelen ervan directer gaan benutten voor onze projecten of webapplicaties.
