Bootstrap 5

snel ontwikkelen met een CSS library

Bootstrap website Bootstrap 5

vorige les: verschuiven: positioneren en maateenheden

Inhoudsopgave

Leerdoelen vandaag

  • Wat is Bootstrap?
  • Bootstrap starten CDN
  • Bootstrap grid gebruiken
  • Een component inzetten
  • Padding & marge
opstarten
Bootstrap betekent ook: zelfstartend

Bootstrap

CSS library (soms ook framework genoemd)

  • CSS door Bootstrap geschreven (je schrijft dus zelf geen CSS)
  • stijlen door de juiste class-namen in je markup te plaatsen
  • goed grid-systeem voor je layout
  • voor veel gebruikte UI componenten heeft Bootstrap ook JS geschreven
logo Bootstrap 5

Voorbeeldcode

Het resultaat van de navigatiebalk

Bootstrap 5

voordelen

  1. snel resultaat bij standaard gebruik
  2. bij standaard gebruik mooi resultaat
  3. goede ondersteuning browsers/devices
  4. responsive (mobile first)
  5. ondersteuning Sass
  6. ARIA voor betere toegankelijkheid
  7. goede documentatie

Dus goed gereedschap voor prototypes

nadelen

  1. elementen krijgen erg veel classes
  2. soms zijn er extra div's nodig -> verlies aan semantiek
  3. vergt moeite en kennis om voor een unieke look aanpassingen te maken
    (sites lijken gauw erg op elkaar)

expo van sites met Bootstrap

Voorbeeldcode

voor een start met het maken van 2 kolommen

  1. start met container class: er zijn twee soorten:
    • .container heeft een beperkte responsive breedte
    • .container-fluid strekt zich over de volledige breedte uit
  2. daarbinnen een .row, die een rij vormt
  3. daarbinnen weer jouw kolommen met .col
  4. het grid kent een onderverdeling in 12 stappen:
    • .col-12 pakt de volledige breedte en is dan dus 1 kolom
    • .col-6 pakt de helft, je kant er naddus nog een van dezelfde breedte naast plaatsen.
    • .col-4 pakt een derde, je kunt er dan nog 2 naast zetten of een die met .col-8 2 keer zo breed is.
    • enz. enz.

Link naar het resultaat
Open deze link en probeer te achterhalen hoeveel regels CSS-code hier zijn gebruikt.

opdracht

  1. Bekijk het resultaat hiernaast
  2. Download de startcode
  3. Zet deze in jouw opdracht-map
  4. Doorloop de instructie-video's op de volgende slides
  5. Deze voorlopige versie online
    en op GitHub
  6. Link live versie in README.md
  7. GitHub link in Magister

Layout met Bootstrap 5 stap 1:
kolommen maken (00:12:15)

  • Eerst wordt Bootstrap gekoppeld met een CDN. https://getbootstrap.com/docs/5.0/getting-started/download/
  • Enkele afbeeldingen zijn breder dan de viewport. Bootstrap maakt deze 'responsive' met de class img-fluid. Dan krijgen ze een maximale breedte van 100%. https://getbootstrap.com/docs/5.0/content/images/#responsive-images
  • Het grid van Bootstrap maak je door een parent element de class container te geven.
    Wil je daarbinnen kolommen maken, dan zet je ze eerst samen in een element met de class row.
    De children krijgen dan de class col en dan worden ze naast elkaar geplaatst waarbij de breedte gelijk zijn. Het grid van Bootstrap heeft 12 kolommen, en je kunt elke kolom laten uitstrekken over een aantal kolommen. Wil je een kolom over 3 grid-kolommen uitstrekken, dan krijgt deze de class col-3. Een kolom met de class col-6 is dus de helft van de breedte van de container. https://getbootstrap.com/docs/5.0/layout/grid/
  • Is de som van de gebruikte kolommen minder dan 12, dan blijft er dus ruimte over. Door de row class aan te vullen met justify-content-around worden de tussenruimtes in de rij mooi verdeeld: https://getbootstrap.com/docs/5.0/utilities/flex/#justify-content

Layout met Bootstrap 5 stap 1: kolommen maken (00:12:15)

Layout met Bootstrap 5 stap 2:
padding en marge (00:06:17)

  • Een container-class geeft de container-div een vaste breedte en een margin-left en margin-right auto.
    Dan staat deze gecentreerd in de viewport.
    De header willen we echter tot de rand en dat kan met de class container-fluid.
  • Om de header wat meer vulling te geven maken we gebruik van padding. Daardoor zal de achtergrondafbeelding ook wat meer in beeld komen.
    Bootstrap gebruik de class p- voor het toevoegen van padding. Er kan een getalletje achter het streepje komen van 0 tot en met 5 waarbij de padding sprongsgewijs toeneemt.
    px-, py-, pt- en pb- leveren dan padding voor horizontaal, verticaal, top, en bottom. De left en right met pl- en pe-.
    Vervang je de p door een m dan heb je het over marges.

Layout met Bootstrap 5 stap 2:
padding en marge (00:06:17)

Layout met Bootstrap 5 stap 3:
typografie (00:05:54)

  • De linkjes worden ontdaan van hun standaard blauwe kleur en onderstrepen en worden met .text-uppercase omgezet in gekapitaliseerde tekst.
    Bovendien wordt de header vergroot dor het laatste element wat extra marge aan de onderkant te geven.

Layout met Bootstrap 5 stap 3:
typografie (00:05:54)

Layout met Bootstrap 5 stap 4:
navigatiebalk (00:09:59)

  • Vanuit de documentatie van Bootstrap https://getbootstrap.com/docs/5.0/components/navbar/ halen we een compleet menu in onze mark-up.
    We verwijderen de overbodige elementen en voegen onze eigen elementen toe.
  • Het logo wordt geplaatst in het nav-brand-element.
    Hij krijgt wat horizontale padding, waardoor de afmeting wat toeneemt.

Layout met Bootstrap 5 stap 4:
navigatiebalk (00:09:59)

Layout met Bootstrap 5 stap 5:
invoergroep (00:04:28)

  • De aangebrachte achtergrondkleur voor het log is niet meer nodig en wordt verwijderd.
    Daarna wordt het deel van de nieuwsbrief gestyled met padding, marge, kleur en typografie.
  • De aanvraag van de nieuwsbrief gaat met een invoergroep, die bestaat uit een input-element van het type tekst en een input van het type submit.
    Met de documentatie op https://getbootstrap.com/docs/5.0/forms/input-group/ zet je dat zo neer.

Layout met Bootstrap 5 stap 5:
invoergroep (00:04:28)

Layout met Bootstrap 5 stap 6:
vierkoloms footer (00:11:31))

  • De footer bestaat uit 4 kolommen. Dat zijn hier 4 secties. Geef de footer zelf de class container. Om de secties een div met de class row.
    Omdat er het Bootstrap-grid een 12-koloms-raster heeft maken we elke kolom met de class col-3 zo breed, dat het 3 kolommen in het raster bedekt.
    Binnen 2 secties komen navigatie kolommen. De documentatie op https://getbootstrap.com/docs/5.0/components/navs-tabs/ laat dan zien welke classes nodig zijn.
  • Het ul element krijgt de class nav en flex-column om de elementen onder elkaar te plaatsen.
    Elk list-item de class nav-link en elk a-element een class nav-link.
    Vervolgens geven we de link nog een kleur.
  • De beide andere kolommen wil ik de afbeelding verkleinen, zodat er meer ruimte tussen de kolommen lijkt te komen.
    Met een omringende div, kan je dat goed doen als die een verticale padding krijgt met py-3 en rechts met pe-5.

Layout met Bootstrap 5 stap 6:
vierkoloms footer (00:11:31)

Credits

Deze presentatie is gemaakt met gebruik van:

  1. WebSlides
  2. Video tutorial Brad Traversy
  3. documentatie WebSlides