3.4 bootstrap css overview 1
20
HTML module 3 3.4 Bootstrap 3 CSS overview 1
-
Upload
mvanginkel -
Category
Education
-
view
165 -
download
1
Transcript of 3.4 bootstrap css overview 1
HTML module 3
3.4 Bootstrap 3CSS overview 1
HTML module 33.4 CSS overview 1
<small> tag
De small-tag gebruik je gewooninline. Voor disclaimers.Geen CSS maar gewoon een tagdie handig is.
HTML module 33.4 CSS overview 1
<blockquote> tag
De blockquote-tag wordt gebruiktom een quote van iemand weerte geven als je die gebruikt opje website!Bootstrap styled deze voor je!
HTML module 33.4 CSS overview 1
Plaatjevan honden nietecht geschikt voor device
Bootstrap heeft classes in mediaqueries voor hideen show.
HTML module 33.4 CSS overview 1
HTML module 33.4 CSS overview 1
Let op:Het plaatje is niet meer zichtbaar maarwordt wel ingeladenop de site. Alleenhet is onzichtbaar.
Dit is niet zo’n mooieoplossing.
HTML module 33.4 CSS overview 1
Buttons
Meer info over buttons klik hier!
HTML module 33.4 CSS overview 1
Images responsive maken met bootstrap
HTML module 33.4 CSS overview 1
HTML module 33.4 CSS overview 1
ICONS
Klik hier voor de mogelijkheden!
HTML module 33.4 CSS overview 1
Thumbnail gallery
Beginsituatie
HTML module 33.4 CSS overview 1
Door het plaatsen van de imagesin een row binnen de article tagmet col-xs-6 worden de images zo geplaatst.
HTML module 33.4 CSS overview 1
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.
HTML module 33.4 CSS overview 1
Eindresultaat
HTML module 33.4 CSS overview 1
beginsituatie
table
HTML module 33.4 CSS overview 1
HTML module 33.4 CSS overview 1
Combinatie
HTML module 33.4 CSS overview 1
Je maakt de table responsivedoor de table te plaatsenin een div met de classtable-responsive
HTML module 3
UitdagingMaak een webpagina over een onderwerp die je zelf magverzinnen. Maak gebruik van alle bootstrap mogelijkhedenin deze les. (Code vorige lessen mag je ook gebruiken)
De uitdaging is om er d.m.v. bootstrap een mooie paginavan te maken. Zowel mobiel als scherm.
Plaats het geheel op je eigen webomgeving en zet de link in natschool.
3.4 CSS overview 1
