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
:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
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:
<h1 class="align-text-right">Tekst til højre</h1>
<h1 class="align-text-md-left">Tekst til højre på skærme over 768px</h1>;
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-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
<div class="d-flex flex-row"> Flex-containerens elementer står vandret </div>
<div class="d-flex flex-md-column"> Flex-containerens elementer står lodret på skærme over 768px </div>
Ombrydning
Format: flex-{ombrydning}
og flex-{breakpoint}-{ombrydning}
Ombrydning
wrap
nowrap
wrap-reverse
<div class="d-flex flex-nowrap"> Flex-containerens elementer står altid i én række </div>
<div class="d-flex flex-md-wrap"> Flex-containerens elementer kan ombrydes på skærme over 768px </div>
Vandret justering
Format: justify-content-{justering}
og justify-content-{breakpoint}-{justering}
Justering
start
end
center
between
around
<div class="d-flex justify-content-start"> Flex-containerens elementer står til venstre </div>
<div class="d-flex justify-content-md-center"> Flex-containerens elementer står i midten på skærme over 768px </div>
Lodret justering af elementer
Format: align-items-{justering}
og align-items-{breakpoint}-{justering}
Justering
start
end
center
baseline
stretch
<div class="d-flex align-items-start"> Flex-containerens elementer står øverst </div>
<div class="d-flex align-items-md-end"> Flex-containerens elementer står nederst på skærme over 768px </div>
Lodret justering af et enkelt element
Format: align-self-{justering}
og align-self-{breakpoint}-{justering}
Justering
auto
start
end
center
baseline
stretch
<div class="d-flex"><div class="align-self-start"> Flex-containerens element står øverst </div></div>
<div class="d-flex"><div class="align-self-md-end"> Flex-containerens element står nederst på skærme over 768px </div></div>
Lodret justering af rækker af elementer
Format: align-content-{justering}
og align-content-{breakpoint}-{justering}
Justering
start
end
center
between
around
stretch
<div class="d-flex flex-wrap align-content-start"> Flex-containerens elementer står samlet øverst </div>
<div class="d-flex flex-wrap align-content-md-end"> Flex-containerens elementer står samlet nederst på skærme over 768px </div>
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:
<h1 class="w-percent-100"> Dette element har en bredde på 100% </h1>
<h1 class="w-percent-md-30"> Dette element har en bredde på 30% på skærme over 768px </h1>
Baggrundsfarver
Der er opsat en hjælpefunktion som automatisk genererer klasser som styrer baggrundsfarver.
Format: bg-{baggrund}
Baggrundsfarver
- Normal:
$background-normal
- Alternativ:
$background-alternative
- Modal:
$background-modal
Eksempel:
<div class="bg-normal"> Dette element har hvid baggrund </div> <br>
<div class="bg-alternative"> Dette element har lysegrå baggrund </div><br>
<div class="bg-modal"> Dette element har en sort baggrund med opacity på 0.75 </div>
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.