E-shop
Pictogrammen (.icon)
Voorbeeld | CSS-klasse |
---|---|
.icon-chevron-down | |
.icon-chevron-left | |
.icon-plus | |
.icon-prullenbak | |
.icon-zoeken | |
.icon-winkelwagen | |
.icon-minus | |
.icon-chevron-rechts | |
.icon-chevron-up | |
.icon-pijl-omlaag | |
.icon-arrow-left | |
.icon-arrow-right | |
.icon-pijl-omhoog | |
.icon-check | |
.icon-annuleren | |
.icon-potlood | |
.icon-mail | |
.icon-home | |
.icon-fabriek | |
.icon-facebook | |
.icon-cart-plus | |
.icon-cart-plus |
Krantenkoppen
Kop op het eerste niveau (.h1)
Kop op het tweede niveau (.h2)
Kop van niveau 3 (.h3)
Kop op het vierde niveau (.h4)
Kop op het vijfde niveau (.h5)
Kop van niveau 6 (.h6)
Tekstparagraaf (<p>)
De wind waait nauwelijks, dus op het eerste gezicht lijkt het alsof de ballonnen helemaal niet bewegen. Ze zweven gewoon rustig in de lucht. Terwijl de zon helder schijnt en je tevergeefs in de lucht naar de wolk van oost naar west zou kijken, gedragen de ballonnen zich als een fata morgana in het midden van de woestijn. Kortom, niets ver weg, alleen groen gras, een helderblauwe lucht en drie felgekleurde kermisballonnen die bijna onmerkbaar zwaaien, niet te hoog en niet te laag boven de grond. Als er geen diepgroen gras onder de ballonnen was, maar een droge weg of beton, dan waren misschien hun gekleurde schaduwen te zien - hoe scherpe zonnestralen passeren door de doorschijnende gekleurde ballonnen.
Tekstkleuren
Ze zweven gewoon rustig in de lucht. (.text-primair)
Ze zweven gewoon rustig in de lucht. (.text-secundair)
Ze zweven gewoon rustig in de lucht. (.text-succes)
Ze zweven gewoon rustig in de lucht. (.text-info)
Ze zweven gewoon rustig in de lucht. (.text-waarschuwing)
Ze zweven gewoon rustig in de lucht. (.text-gevaar)
Ze zweven gewoon rustig in de lucht. (.text-light)
Ze zweven gewoon rustig in de lucht. (.text-donker)
Ze zweven gewoon rustig in de lucht. (.text-wit)
Ze zweven gewoon rustig in de lucht. (.text-body)
Ze zweven gewoon rustig in de lucht. (.text-gedempt)
Ze zweven gewoon rustig in de lucht. (.text-zwart-50)
Ze zweven gewoon rustig in de lucht. (.text-white-50)
Backround kleur
Ze zweven gewoon rustig in de lucht. (.bg-primair)
Ze zweven gewoon rustig in de lucht. (.bg-secundair)
Ze zweven gewoon rustig in de lucht. (.bg-succes)
Ze zweven gewoon rustig in de lucht. (.bg-info)
Ze zweven gewoon rustig in de lucht. (.bg-waarschuwing)
Ze zweven gewoon rustig in de lucht. (.bg-gevaar)
Ze zweven gewoon rustig in de lucht. (.bg-light)
Ze zweven gewoon rustig in de lucht. (.bg-donker)
Ze zweven gewoon rustig in de lucht. (.bg-wit)
Ze zweven gewoon rustig in de lucht. (.bg-transparant)
.Btn-knoppen
Grootte .sm
.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark
Middelgroot
.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark
Maat .lg
.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark
Overzicht
.btn-outline-primary .btn-outline-secundair .btn-outline-waarschuwing .btn-outline-info .btn-outline-gevaar .btn-outline-succes .btn-outline-light .btn-outline-dark
Tabellen
Basic (.table)
# | Naam | Achternaam |
---|---|---|
1 | Vaclav | Foobar |
2 | John | Foobar |
3 | Milaan | Foobar |
Gestreept (.table-gestreept)
# | Naam | Achternaam |
---|---|---|
1 | Vaclav | Foobar |
2 | John | Foobar |
3 | Milaan | Foobar |
Ingelijst (.tabel-omrand)
# | Naam | Achternaam |
---|---|---|
1 | Vaclav | Foobar |
2 | John | Foobar |
3 | Milaan | Foobar |
Geen grens (.table-borderless)
# | Naam | Achternaam |
---|---|---|
1 | Vaclav | Foobar |
2 | John | Foobar |
3 | Milaan | Foobar |
Kleinere tafel (.table-sm)
# | Naam | Achternaam |
---|---|---|
1 | Vaclav | Foobar |
2 | John | Foobar |
3 | Milaan | Foobar |
Lijsten
Ongenummerde lijst (<ul>)
- Lijstitem
- Lijstitem
- Lijstitem
- Lijstitem
Genummerde lijst (<ol>)
- Lijstitem
- Lijstitem
- Lijstitem
- Lijstitem
Systeemberichten
Primair bericht via link . (.alert-primair)
Secundair bericht door verwijzing . (.alert-secundair)
Foutmelding met link . (.alert-gevaar)
Infobericht met link . (.alert-info)
Succesvol verwerkt met een link . (.alert-succes)
Houd er rekening mee dat de pagina is verplaatst naar een link . (.alert-waarschuwing)
Heldere boodschap koppeling . (.alert-licht)
Link naar donkere berichten . (.alert-donker)
Afbeeldingen
Responsieve afbeeldingen (.img-vloeistof)
Voorbeeldafbeelding (.img-miniatuur)
Embedy
<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" src = "..."> </iframe>
</div>
Beeldverhouding
21: 9 (.embed-responsive-21by9)
16: 9 (.embed-responsive-16by9)
4: 3 (.embed-responsive-4by3)
1: 1 (.embed-responsive-1by1)