Bootstrap - Design

Design

Når man designer Bootstrap sider, kan man med fordel anvende denne fremgangsmåde:

  1. Find de afsnit siden skal indeholde
  2. Bestem deres funktionalitet og bestem om afsnittene skal strække over hele siden (container-fluid) eller være grid-opdelt (container)
  3. Konfigurer hvert afsnit med den korrekte funktionalitet
  4. Indsæt indhold

Find afsnit

Når man designer bootstrap sider skal man tænke i blokke. Først finder man de afsnit som siden skal have. Det kan f.eks. være:

  • Header
  • Navigationslinie
  • Beskrivelse af siden
  • Billedserie
  • Kontaktinfo

Bestem funktionalitet og udstrækning

Afsnit Containertype
Header -
Navigation fluid
Beskrivelse af siden fluid
Billedserie fluid
Kontaktinfo 3-rækker

Konfigurer funktionalitet

Afsnit Containertype Klasse Henvisning
Header - Jumbatron http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
Navigation fluid navbar navbar-default http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Beskrivelse af siden fluid - http://www.w3schools.com/bootstrap/bootstrap_typography.asp
Billedserie fluid http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
Kontaktinfo 3-rækker carousel http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Skriv indholdet

Bootstrap prototyper

Det er også muligt at downloade en prototyper, som man kan anvende til hurtigt at lave sider med, og den skal vi kigge på når der er forståelse for den underliggende formatering.

Pingendo: http://www.pingendo.com/

Filer til udskrift

Grid til at designe sider: A4 side med Bootstrap Grid.