Top Banner
HTML module 3 3.5 Bootstrap 3 Navigatie
13

3.5 navigatie

Jul 16, 2015

Download

Education

mvanginkel
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 3.5 navigatie

HTML module 3

3.5 Bootstrap 3Navigatie

Page 2: 3.5 navigatie

HTML module 33.5 navigatie

BreadcrumbsWaar ben je op de website ?

Page 3: 3.5 navigatie

HTML module 33.5 navigatie

Voorbeeld breadcrumbs

Voor het gebruik van breadcrumbs is het verplicht eenOL te gebruiken. Dit bepaalt de volgorde .UL werkt niet!

Page 4: 3.5 navigatie

HTML module 33.5 navigatie

Stijlen breadcrumbs

Page 5: 3.5 navigatie

HTML module 33.5 navigatie

Standaard stijl in bootstrap.css

Stijlen in custom.cssgekoppeld onderbootstrap.min.css

Page 6: 3.5 navigatie

HTML module 33.5 navigatie

Page 7: 3.5 navigatie

HTML module 33.5 navigatie

Navigations bars2 navigatie punten om te stijlen

Page 8: 3.5 navigatie

HTML module 33.5 navigatie

Startsituatie

Basic navigationbar

Page 9: 3.5 navigatie

HTML module 33.5 navigatie

Code geeft bovenstaandenavigatie.De class active geeft aan op welke paginaje bevindt.

Page 10: 3.5 navigatie

HTML module 33.5 navigatie

Code geeft bovenstaandenavigatie. nav-tabs maakt de tabs.En nav-stacked zorgt dat het onderelkaar blijft staan.

Page 11: 3.5 navigatie

HTML module 33.5 navigatie

Code geeft bovenstaandenavigatie. Nav-pills geeft maakt het blauw en nav-justified maakt de navigatie over de volle breedte

Page 12: 3.5 navigatie

HTML module 33.5 navigatie

Deze les is gebaseerd op:

Page 13: 3.5 navigatie

HTML module 3

Opdracht 3.5Maak een webpagina met een voorpagina over de opdrachtendie je tot nu toe bij deze module gemaakt hebt.

Plaat daarin op iedere pagina navigatie zoals geleerd indeze les.Op iedere pagina moet de navigatie er anders uitzien.

Let ook op het design van de voorpagina.

Zet het geheel op je eigen webomgeving en plaats de linkop natschool in de ruimte voor deze opdracht.

3.5 navigatie