Bootstrap 5 praktiske værktøjer

Utilities / Helper-klasser

Bootstrap 5 har mange utility/helper-klasser, der kan bruges til hurtigt at sætte elementets stil uden brug af nogen CSS-kode.

Kanter

Brug af kantklasser til at tilføje eller fjerne kanter til elementer:

Eksempler

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Prøv det selv

Kantbredde

Brug .border-1 til .border-5 Ændr kantens bredde ved at ændre værdien:

Eksempler

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Prøv det selv

Kantfarve

Tilføj farve til kantene ved hjælp af en hvilken som helst kantfarveklasse:

Eksempler

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Prøv det selv

Kantkugler

Brug rounded Tilføj kanter til elementer med runde hjørner:

Eksempler

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Prøv det selv

Flytning og fjerne flytning

Brug .float-end Klasse til højre flydende elementer, eller brug .float-start Venstre flydende og brug .clearfix Klasse til at fjerne flydende:

Eksempler

<div class="clearfix">
  <span class="float-start">Venstre flydende</span>
  <span class="float-end">Højre flydende</span>
</div>

Prøv det selv

Responsiv flytning

Flyt elementer til venstre eller højre efter skærmens bredde ved hjælp af responsiv flytteklasse (.float-*-left|right) hvor * er:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Eksempler

<div class="float-sm-end">Højre flydende på små skærme eller bredere skærme</div><br>
<div class="float-md-end">Højre flydende på mellemstore skærme eller bredere skærme</div><br>
<div class="float-lg-end">Højre flydende på store skærme eller bredere skærme</div><br>
<div class="float-xl-end">Højre flydende på ekstra store skærme eller bredere skærme</div><br>
<div class="float-xxl-end">Højre flydende på store skærme eller bredere skærme</div><br>
<div class="float-none">Ikke flydende</div>

Prøv det selv

Centreret

Brug .mx-auto Centreret element (tilføj margin-left og margin-right: auto):

Eksempler

<div class="mx-auto bg-warning" style="width:150px">居中</div>

Prøv det selv

宽度

使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度：

Eksempler

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="w-auto bg-warning">自动宽度</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>

Prøv det selv

高度

使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度：

Eksempler

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="h-auto bg-warning">自动高度</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

Prøv det selv

间距

Bootstrap 5 拥有广泛的响应式 margin 和 padding 实用程序类。它们适用于所有断点：

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

这些类的使用格式为：{egenskab}{kanter}-{størrelse} bruges til xs，og {egenskab}{kanter}-{breakpoint}-{størrelse} bruges til sm、md、lg、xl og xxl。

egenskab er en af følgende:

  • m - Indstil margin
  • p - Indstil padding

kanter er en af følgende:

  • t - Indstil margin-top eller padding-top
  • b - Indstil margin-bottom eller padding-bottom
  • s - Indstil margin-left eller padding-left
  • e - Indstil margin-right eller padding-right
  • x - Indstil samtidig padding-left og padding-right eller margin-left og margin-right
  • y - Indstil samtidig padding-top og padding-bottom eller margin-top og margin-bottom
  • tom - Indstil margin på alle fire kanter af elementet margin eller padding

størrelse er en af følgende:

  • 0 - Brug margin eller padding Sæt til 0
  • 1 - Brug margin eller padding Sæt til .25rem
  • 2 - Brug margin eller padding Sæt til .5rem
  • 3 - Brug margin eller padding Sæt til 1rem
  • 4 - Brug margin eller padding Sæt til 1.5rem
  • 5 - Brug margin eller padding Sæt til 3rem
  • auto - Brug margin Sæt til auto

Eksempler

<div class="pt-4 bg-warning">Jeg har kun øverst indrykning (1.5rem)</div>
<div class="p-5 bg-success">Jeg har indrykning på alle kanter (3rem)</div>
<div class="m-5 pb-5 bg-info">Jeg har ekstradykning på alle kanter (3rem) og nederst indrykning (3rem)</div>

Prøv det selv

Flere afstandseksempler

.m-# / m-*-# Ekstradykning af alle kanter Prøv det
.mt-# / mt-*-# Øverst ekstradykning Prøv det
.mb-# / mb-*-# Nederst ekstradykning Prøv det
.ms-# / ms-*-# Venstre ekstradykning Prøv det
.me-# / me-*-# Højre ekstradykning Prøv det
.mx-# / mx-*-# Venstre og højre indrykning Prøv det
.my-# / my-*-# Øverst og nederst ekstradykning Prøv det
.p-# / p-*-# Indrykning af alle kanter (fyld) Prøv det
.pt-# / pt-*-# Øverst indrykning Prøv det
.pb-# / pb-*-# Nederst indrykning Prøv det
.ps-# / ps-*-# Venstre indrykning Prøv det
.pe-# / pe-*-# Højre indrykning Prøv det
.py-# / py-*-# Øverst og nederst indrykning Prøv det
.px-# / px-*-# Venstre og højre indrykning Prøv det

Du kan finde CSS enheds referencer Læs mere om rem og forskellige størrelsesenheder.

Skygge

Brug shadow- Tilføj skygge til elementer med klassen:

Eksempler

<div class="shadow-none p-4 mb-4 bg-light">Ingen skygge</div>
<div class="shadow-sm p-4 mb-4 bg-white">Lille skygge</div>
<div class="shadow p-4 mb-4 bg-white">Standard skygge</div>
<div class="shadow-lg p-4 mb-4 bg-white">Stor skygge</div>

Prøv det selv

Løft vertikalt

Brug align- Klasser ændrer elementets justering (kun gælder for inline, inline-block, inline-table og tabelceller):

Eksempler

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Prøv det selv

Aspektforhold

Opret responsiv video eller diasshow baseret på forældrens bredde.

Brug .ratio Klasser matcher det valgte aspektforhold .aspect-ratio-* Tilføj til overordnede elementer og tilføj indlejret indhold (video eller iframe):

Eksempler

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Prøv det selv

Synlighed

Brug .visible eller .invisible Klasser kan kontrollere elementets synlighed:

Bemærk:Disse klasser ændrer ikke CSS display-værdien. De tilføjer kun visibility:visible eller visibility:hidden.

Eksempler

<div class="visible">Jeg er synlig.</div>
<div class="invisible">Jeg er usynlig.</div>

Prøv det selv

Lukkeikon

Brug .btn-close Klasser kan indstille stilkarakteristika for lukkeikonet. Bruges normalt i advarselsbokse og modalvinduer.

Eksempler

<button type="button" class="btn-close"></button>

Prøv det selv

Skærmlæsere

Brug .visually-hidden Klasser kan skjule elementer på alle enheder, med undtagelse af skærmlæsere:

Eksempler

<span class="visually-hidden">Jeg vil være skjult på alle skærme undtagen for skærmlæsere.</span>

Prøv det selv

Farver

Som nævnt i afsnittet 'Farver', her er en liste over alle tekst- og baggrundsfarveklasser:

Klasser til tekstfarver er:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（Standard body farve/normalt sort）
  • .text-light

Eksempler

Prøv det selv

Contextual tekstklasser kan også bruges til links:

Eksempler

Prøv det selv

Du kan også bruge .text-black-50 eller .text-white-50 klasser til at tilføje 50% gennemsigtighed til sort eller hvid tekst:

Eksempler

Prøv det selv

Baggrundsfarve

Klasser til baggrundsfarver er:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Bemærk, at baggrundsfarven ikke indstiller tekstfarven, så i nogle tilfælde skal du bruge dem sammen med .text-* klasser sammen.

Eksempler

Prøv det selv