Bootstrap 4

snel ontwikkelen met een CSS library

website Bootstrap 4

Inhoudsopgave

Leerdoelen vandaag

  • Wat is Bootstrap?
  • Bootstrap starten CDN
  • Bootstrap grid gebruiken
  • Enkele componenten inzetten
  • Bootstrap aanpassen
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

Voorbeeldcode

Het resultaat van de navigatiebalk

Bootstrap 4

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. JS in Bootstrap heeft jQuery nodig
  4. 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 vorige maand

  1. Bekijk de opdracht hiernaast
  2. Download het startdocument of bedenk vergelijkbaar onderwerp met inhoud
  3. Zet deze in jouw opdracht-map
  4. Voeg Sass-classes toe
  5. Voeg zelf een component of element aan de inhoud toe
  6. Deze voorlopige versie online
    en op GitHub
  7. Link live versie in README.md
  8. GitHub link in Magister

3 manieren om Bootstrap te 'installeren'

         

npm en Node.js
  1. gebruik maken van CDN Je kunt Bootstrap dan niet beïnvloeden, hooguit een aantal varianten kiezen
  2. De CSS (en eventueel de JS en jQuery) van Bootstrap downloaden en koppelen Je kunt deze bestanden wel bewerken, maar dat is wel moeilijk en moeizaam
  3. Bootstrap met npm installeren en beheren
    Met ervaring in npm en Sass kun je Bootstrap naar je hand zetten

node_modules

  • Gemaakt/gebruikt door npm
  • De developer werkt/wijzigt daar niets in.
  • Wordt normaliter niet op GitHub geplaatst.
    Daarom wordt node_modules ook toegevoegd aan .gitignore.
    De map node_modules kan erg omvangrijk zijn.
    GitHub weigert dat in dat geval dan ook terecht.
  • Omdat we nog geen JavaScript compileren zoals we dat met Sass doen, wordt in deze tutorial van die werkwijze afgeweken.
  • In echte projecten wordt een project van GitHub gehaald en de teamgenoot kan dan met npm start het project starten en alle modules met dependencies installeren.
fiks pakket aan node_modules
node_modules kunnen met dependencies erg veel bestanden bevatten

Structuur na installatie

logo Bootstrap 

    lotr/
    ├── scss
    │   └── main.scss
    └── node_modules/
        └── bootstrap
            ├── js
            └── scss
                |__ mixins ....
                |__ utilities
                |   |__ buttons.scss
                |   |__ ...... .scss 
                |
                |__ navbar.scss 
                |__ card.scss 
                |__ jumbotron.scss 
                |__ .......

Bij import dus:

    // vereist
    @import "../node_modules/bootstrap/scss/functions";
    @import "../node_modules/bootstrap/scss/variables";
    @import "../node_modules/bootstrap/scss/mixins";
    
    // voorgesteld
    @import "../node_modules/bootstrap/scss/reboot";
    @import "../node_modules/bootstrap/scss/type";
    @import "../node_modules/bootstrap/scss/images";
    @import "../node_modules/bootstrap/scss/code";
    @import "../node_modules/bootstrap/scss/grid";

!default in Sass

Gewoonlijk overschrijft in CSS de laatste eigenschap-waarde een eerdere waarde

Bootstrap gebruikt in zijn Sass de eigenschap !default achter zijn variabelen. 

$blue:    #007bff !default;

Dit betekent dat als de variabele $blue nog geen waarde heeft gekregen,
deze dan #007bff wordt.

Had hij wel een waarde dan gebeurt er niets.

Je kunt als je dat wenst, dus in een eerder geïmporteerd sass-bestand de gewenste waarde instellen.
En als je dat wil, kun je het ook 'vergeten' (maar dan heb je tenmnste wel al kleuren).

!default in Sass
een Bootstrap voorbeeld

Links

Bekijk vooral

  1. link naar Bootstrap
  2. CDN links
  3. Documentatie van Bootstrap zelf (vooral Grid en componenten)
  4. Online spiekbrief van Bootstrap classes
  5. Download van startdocument
  6. De opdracht van Bootstrap
    (werk tot em met stap 5)

opdracht vandaag

  1. Bekijk de resultaat YT-video hiernaast (nog niet meedoen hoor!)
  2. Download het startdocument of bedenk vergelijkbaar onderwerp met inhoud
  3. Zet deze in jouw opdracht-map
  4. Voeg CSS-classes toe
  5. Voeg zelf een component of element aan de inhoud toe
  6. De overige instructievideo's uitvoeren: modals, cards, aanpassen
  7. Deze voorlopige versie online
    en op GitHub
  8. Link live versie in README.md
  9. GitHub link in Magister
  10. Indien nog niet gedaan: jouw project met npm initialiseren
  11. De CDN voor de CSS verwijderen
  12. scss importeren en scss aanpassen aan LotR thema
  13. Resultaat uploaden op hosts-ma-cloud, bijwerken.

Credits

Deze presentatie is gemaakt met gebruik van:

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