Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Hjælpeklasser (Utilities)
- Responsive hjælpeklasser
- Text align
- Margin og padding
- Display
- Flexbox
- Bredde i procent
- Baggrundsfarver
- Tilgængelighed
Responsive hjælpeklasser
Alle de klasser som bliver genereret af hjælpefunktionerne findes både i en version som virker i alle browserstørrelser og i responsive versioner som genereres på baggrund af de breakpoints som er defineret i scss-variablen $grid-breakpoints
:
Text-align
Der er opsat en hjælpefunktion som automatisk genererer klasser til text-align
baseret på de definerede breakpoints i $grid-breakpoints.
Format: align-text-{retning}
og align-text-{breakpoint}-{retning}
Retning:
- Venstre:
text-align: left
- Midten:
text-align: center
- Højre:
text-align: right
Eksempel:
Margin og padding
Der er opsat hjælpefunktioner som genererer klasser til margin og padding. Disse hjælpefunktioner er inspireret af Bootstraps Spacing Utilities.
Format: {css-egenskab}{retning}-{størrelse}
og {css-egenskab}{retning}-{breakpoint}-{størrelse}
.
CSS egenskab:
- m – for klasser som sætter
margin
- p - for klasser som sætter
padding
Retning:
- t – for klasser som sætter
margin-top
ellerpadding-top
- b – for klasser som sætter
margin-bottom
ellerpadding-bottom
- l – for klasser som sætter
margin-left
ellerpadding-left
- r – for klasser som sætter
margin-right
ellerpadding-right
- x – for klasser som sætter både
*-left
og*-right
- y – for klasser som sætter både
*-top
og*-bottom
- blank – for klasser som sætter margin eller padding på alle 4 sider af elementet.
Størrelse:
- 0 – for klasser som fjerner alt
margin
ellerpadding
- 1 – for klasser som sætter
margin
ellerpadding
til$spacer * 0.25
- 2 – for klasser som sætter
margin
ellerpadding
til$spacer * 0.5
- 3 – for klasser som sætter
margin
ellerpadding
til$spacer
- 305 – for klasser som sætter
margin
ellerpadding
til$spacer * 1.5
- 4 – for klasser som sætter
margin
ellerpadding
til$spacer * 2
- 405 – for klasser som sætter
margin
ellerpadding
til$spacer * 2.5
- 5 – for klasser som sætter
margin
ellerpadding
til$spacer * 3
- 505 – for klasser som sætter
margin
ellerpadding
til$spacer * 3.5
- 6 – for klasser som sætter
margin
ellerpadding
til$spacer * 4
- 605 – for klasser som sætter
margin
ellerpadding
til$spacer * 4.5
- 7 – for klasser som sætter
margin
ellerpadding
til$spacer * 5
- 705 – for klasser som sætter
margin
ellerpadding
til$spacer * 5.5
- 8 – for klasser som sætter
margin
ellerpadding
til$spacer * 6
- 805 – for klasser som sætter
margin
ellerpadding
til$spacer * 6.5
- 9 – for klasser som sætter
margin
ellerpadding
til$spacer * 7
- 905 – for klasser som sætter
margin
ellerpadding
til$spacer * 7.5
$spacer
er sat til 8px.
Du kan selv tilføje flere muligheder ved at tilføje dem til $spacers
variablen.
Breakpoint:
- blank - for klasser som sætter
margin
ellerpadding
for alle browserstørrelser. - sm - for klasser som sætter
margin
ellerpadding
for browserstørrelser over 576px; - md - for klasser som sætter
margin
ellerpadding
for browserstørrelser over 768px; - lg - for klasser som sætter
margin
ellerpadding
for browserstørrelser over 992px; - xl - for klasser som sætter
margin
ellerpadding
for browserstørrelser over 1200px;
Display
Der er opsat en hjælpefunktion som automatisk genererer klasser til display-egenskaben baseret på de definerede breakpoints i $grid-breakpoints
. Disse hjælpeklasser er inspireret af Bootstraps Display Utility.
Format: d-{display}
og d-{breakpoint}-{display}
Display
none
inline
inline-block
block
flex
inline-flex
Print display
print-none
print-inline
print-inline-block
print-block
print-table
print-table-row
print-table-cell
print-flex
print-inline-flex
Eksempel med grid breakpoints
Browserstørrelse | Klasse |
---|---|
Skjul på alle | `d-none` |
Skjul kun på xs | `d-none d-sm-block` |
Skjul kun på sm | `d-sm-none d-md-block` |
Skjul kun på md | `d-md-none d-lg-block` |
Skjul kun på lg | `d-lg-none d-xl-block` |
Skjul kun på xl | `d-xl-none` |
Synlig på alle | `d-block` |
Synlig kun på xs | `d-block d-sm-none` |
Synlig kun på sm | `d-none d-sm-block d-md-none` |
Synlig kun på md | `d-none d-md-block d-lg-none` |
Synlig kun på lg | `d-none d-lg-block d-xl-none` |
Synlig kun på xl | `d-none d-xl-block` |
Eksempel på klasser med print
Beskrivelse | Klasse |
---|---|
Skjul ved print | `d-print-none` |
Vis element med inline display ved print | `d-print-inline` |
Vis element med inline-block display ved print | `d-print-inline-block` |
Vis element med block display ved print | `d-print-block` |
Vis element som tabel display ved print | `d-print-table` |
Vis element som en tabel række display ved print | `d-print-table-row` |
Vis element med tabel celle display ved print | `d-print-table-cell` |
Vis element med flex display ved print | `d-print-flex` |
Vis element med inline-flex display ved print | `d-print-inline-flex` |
Flexbox
Der er opsat en hjælpefunktion som automatisk genererer klasser til flexbox baseret på de definerede breakpoints i $grid-breakpoints
. Disse hjælpeklasser er inspireret af Bootstraps Flex Utility. Bemærk at disse hjælpeklasser kun kan anvendes, når display er sat til flexbox. Afsnittene om vandret og lodret justering tager udgangspunkt i at retningen er sat til row
.
Retning
Format: flex-{retning}
og flex-{breakpoint}-{retning}
Retning
row
column
row-reverse
column-reverse
Ombrydning
Format: flex-{ombrydning}
og flex-{breakpoint}-{ombrydning}
Ombrydning
wrap
nowrap
wrap-reverse
Vandret justering
Format: justify-content-{justering}
og justify-content-{breakpoint}-{justering}
Justering
start
end
center
between
around
Lodret justering af elementer
Format: align-items-{justering}
og align-items-{breakpoint}-{justering}
Justering
start
end
center
baseline
stretch
Lodret justering af et enkelt element
Format: align-self-{justering}
og align-self-{breakpoint}-{justering}
Justering
auto
start
end
center
baseline
stretch
Lodret justering af rækker af elementer
Format: align-content-{justering}
og align-content-{breakpoint}-{justering}
Justering
start
end
center
between
around
stretch
Bredde i procent
Der er opsat en hjælpefunktion som automatisk genererer klasser som styrer bredde i procent. De responsive klasser er baseret på de definerede breakpoints i $grid-breakpoints
.
Format: w-percent-{bredde}
og w-percent-{breakpoint}-{bredde}
Bredde
- 10:
10%
- 20:
20%
- 30:
30%
- 40:
40%
- 50:
50%
- 60:
60%
- 70:
70%
- 80:
80%
- 90:
90%
- 100:
100%
Eksempel:
Baggrundsfarver
Der er opsat en hjælpefunktion som automatisk genererer klasser som styrer baggrundsfarver.
Format: bg-{baggrund}
Baggrundsfarver
- Normal:
normal
- Alternativ:
alternative
- Modal:
modal
Eksempel:
Tilgængelighed
Nedenfor vises hvordan du gør dine elementer tilgængelige for skærmlæsere.
aria-hidden="true"
ogaria-hidden="false"
bruges til at skjule og vise elementer for skærmlæsere..sr-only
klassen og mixin@mixin sr-only()
bruges når elementer kun skal vises for skærmlæsere.aria-expanded="true"
ogaria-expanded="false"
bruges til elementer som toggler mellem at være åbne og lukket.aria-label=""
skal beskrive hvad funktionen af et element gør.