HTML module 3 3.7 Bootstrap 3 Terugblik Lessen
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
HTML module 3
3.7 Bootstrap 3Terugblik Lessen
3.7 Terugblik HTML module 3
Wat is Bootstrap?• Een responsive design framework• Voor het bouwen van statische websites• Voor het bouwen van dynamische webapplicaties• Mobile-first approach• (Responsive)Grid systeem• Meest gebruikte framework in de wereld• Meeste downloads op git-hub. • Beste beoordeling op git-hub
HTML module 33.7 Terugblik
HTML module 3
Meer regels code nodig dan wanneer je hetzelf maakt. Doordat het met veel zaken rekeningmoet houden.
3.7 Terugblik
HTML module 3
Bootstrap 3Gereedmaken voor gebruik!
3.7 Terugblik
HTML module 3
3 mappen t.b.v. bootstrap
3.7 Terugblik
HTML module 3
Bootstrap koppelen aan je webpagina!
1. De viewport plaatsen2. Bootstrap.min.css koppelen
3.7 Terugblik
HTML module 3
Jquery en andere javascript koppelen!
Koppeling jaar jquery
Koppeling jaar bootstrap.min.js
Respond.min.js moet je zelfdownloaden zie volgende pagina!
3.7 Terugblik
Niet helemaal duidelijk?Kijk filmpje op lynda.com
HTML module 33.7 Terugblik
Opdracht !Maak een standaard html bestandom gebruik te kunnen maken vanBootstrap.
HTML module 33.7 Terugblik
HTML module 3
Bootstrap 3Grid system
3.7 Terugblik
HTML module 3
12 Columns
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
Voorbeeld
3.7 Terugblik
HTML module 3
Zorgt voor plaatsen in het midden vanuit bootstrap.css.En whitespace
Bij large screen plaatje 1 breedte van6 columns en smal screen breedte van 5 cols
3.7 Terugblik
HTML module 3
Large screen Medium screen
Iedere rij begint altijd met de class ROW
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
Voorbeeld Push and Pull
Bij een kleiner scherm wordt het services gedeelte boven aan geplaatst.
3.7 Terugblik
HTML module 3
Klik op plaatje voor tutorial
3.7 Terugblik
HTML module 3
Voorbeeld van een row in een row!
Row in de row
3.7 Terugblik
HTML module 3
Jumbtron in Bootstrap
Zonder jumbotron class pull-right plaatsimg rechts van de tekst
3.7 Terugblik
HTML module 3
<small> tag
De small-tag gebruik je gewooninline. Voor disclaimers.Geen CSS maar gewoon een tagdie handig is.
3.7 Terugblik
HTML module 3
<blockquote> tag
De blockquote-tag wordt gebruiktom een quote van iemand weerte geven als je die gebruikt opje website!Bootstrap styled deze voor je!
3.7 Terugblik
HTML module 3
Plaatjevan honden nietecht geschikt voor device
Bootstrap heeft classes in mediaqueries voor hideen show.
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
Let op:Het plaatje is niet meer zichtbaar maarwordt wel ingeladenop de site. Alleenhet is onzichtbaar.
Dit is niet zo’n mooieoplossing.
3.7 Terugblik
HTML module 3
Images responsive maken met bootstrap
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
ICONS
Klik hier voor de mogelijkheden!
3.7 Terugblik
HTML module 3
Thumbnail gallery
Beginsituatie
3.7 Terugblik
HTML module 3
Door het plaatsen van de imagesin een row binnen de article tagmet col-xs-6 worden de images zo geplaatst.
3.7 Terugblik
HTML module 3
Door het plaatsen van de teksten de image in een class thumbnailen de p in de class caption ziethet eruit als een thumbnail enis de tekst netjes geplaatst.
3.7 Terugblik
HTML module 3
Eindresultaat
3.7 Terugblik
HTML module 3
beginsituatie
table
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
Combinatie
3.7 Terugblik
HTML module 3
Je maakt de table responsivedoor de table te plaatsenin een div met de classtable-responsive
3.7 Terugblik
HTML module 3
BreadcrumbsWaar ben je op de website ?
3.7 Terugblik
HTML module 3
Voorbeeld breadcrumbs
Voor het gebruik van breadcrumbs is het verplicht eenOL te gebruiken. Dit bepaalt de volgorde .UL werkt niet!
3.7 Terugblik
HTML module 3
Standaard stijl in bootstrap.css
Stijlen in custom.cssgekoppeld onderbootstrap.min.css
3.7 Terugblik
HTML module 3Navigations bars
2 navigatie punten om te stijlen
3.7 Terugblik
HTML module 3
Startsituatie
Basic navigationbar
3.7 Terugblik
HTML module 3
Code geeft bovenstaandenavigatie.De class active geeft aan op welke paginaje bevindt.
3.7 Terugblik
HTML module 3
Code geeft bovenstaandenavigatie. nav-tabs maakt de tabs.En nav-stacked zorgt dat het onderelkaar blijft staan.
3.7 Terugblik
HTML module 3
Code geeft bovenstaandenavigatie. Nav-pills geeft maakt het blauw en nav-justified maakt de navigatie over de volle breedte
3.7 Terugblik
HTML module 3
Deze les is gebaseerd op:
3.7 Terugblik
HTML module 3
Start 3.7 Terugblik
HTML module 3
Class caret is hethoekje naast menu
Voor een dropdown menu moet er een ul in li geplaatst worden.
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 33.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
tab-pane voor style tabs.fade voor fade in.active in laat de tekst zien.Om het geheel moet de classtab-content staan.
3.7 Terugblik
HTML module 33.7 Terugblik
HTML module 3
De teksten hebben een class tab-pane en fade.Tevens een ID voor het linken naar.
3.7 Terugblik
HTML module 3
Jquery code gebruiken voor terugplaatsen tekst naverversen.Onderaan de pagina.
3.7 Terugblik
HTML module 3
Style toevoegen aan glyphicons
3.7 Terugblik
HTML module 3
Start
3.7 Terugblik
HTML module 3
Start
Voor meer uitleg check de filmpje van Lyndazoals op de volgende sheet weergegeven!
3.7 Terugblik
HTML module 3
Deze les is gebaseerd op:
3.7 Terugblik
Related Documents
