Bootstrap 5 användbara verktyg

Utilities / Helper-klasser

Bootstrap 5 har många utility/helper-klasser som gör det möjligt att snabbt ställa in elementстиль utan att använda någon CSS-kod.

Kanter

Använd kantklasser för att lägga till eller ta bort kanter på element:

Exempel

<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>

Prova själv

Kantbredd

Använd .border-1 till .border-5 För att ändra bredden på ramen:

Exempel

<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>

Prova själv

Kantfärg

Använd vilken som helst kontextfärg för kantram för att lägga till färg till ramen:

Exempel

<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>

Prova själv

Hörn av ramen

Använd rounded För att lägga till rundade hörn på elementet:

Exempel

<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>

Prova själv

Flytning och rengöring av flytning

Använd .float-end Klass för att flytta element till höger, eller använd .float-start Flytta till vänster och använd .clearfix Klass för att rengöra flytning:

Exempel

<div class="clearfix">
  <span class="float-start">Flytta till vänster</span>
  <span class="float-end">Flytta till höger</span>
</div>

Prova själv

Responsiv flytning

Flytta element till vänster eller höger baserat på skärmens bredd, använd responsiva flyttningsklasser (.float-*-left|right) där * är:

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

Exempel

<div class="float-sm-end">Flytta till höger på liten skärm eller bredare skärm</div><br>
<div class="float-md-end">Flytta till höger på medium skärm eller bredare skärm</div><br>
<div class="float-lg-end">Flytta till höger på stor skärm eller bredare skärm</div><br>
<div class="float-xl-end">Flytta till höger på stor skärm eller bredare skärm</div><br>
<div class="float-xxl-end">Flytta till höger på stor skärm eller bredare skärm</div><br>
<div class="float-none">Ingen flytning</div>

Prova själv

Centrera

Använd .mx-auto Centreringselement (lägg till margin-left och margin-right: auto):

Exempel

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

Prova själv

Bredd

Använd w-* classer (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Ställ in elementets bredd:

Exempel

<div class="w-25 bg-warning">Bredd 25%</div>
<div class="w-50 bg-warning">Bredd 50%</div>
<div class="w-75 bg-warning">Bredd 75%</div>
<div class="w-100 bg-warning">Bredd 100%</div>
<div class="w-auto bg-warning">Automatisk bredd</div>
<div class="mw-100 bg-warning">Max bredd 100%</div>

Prova själv

Höjd

Använd h-* classer (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Ställ in elementets höjd:

Exempel

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Höjd 25%</div>
  <div class="h-50 bg-warning">Höjd 50%</div>
  <div class="h-75 bg-warning">Höjd 75%</div>
  <div class="h-100 bg-warning">Höjd 100%</div>
  <div class="h-auto bg-warning">Automatisk höjd</div>
  <div class="mh-100 bg-warning" style="height:500px">Max höjd 100%</div>
</div>

Prova själv

Avstånd

Bootstrap 5 har ett brett urval av responsiva margin och padding-användarclasser. De är tillämpliga på alla breakpoints:

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

Dessa klassers användningsformat är:{egenskap}{sidor}-{size} används för xs，och {egenskap}{sidor}-{breakpoint}-{size} används för sm、md、lg、xl och xxl。

egenskap är en av följande:

  • m - Sätt margin
  • p - Sätt padding

sidor är en av följande:

  • t - Sätt margin-top eller padding-top
  • b - Sätt margin-bottom eller padding-bottom
  • s - Sätt margin-left eller padding-left
  • e - Sätt margin-right eller padding-right
  • x - Sätt samtidigt padding-left och padding-right eller margin-left och margin-right
  • y - Sätt samtidigt padding-top och padding-bottom eller margin-top och margin-bottom
  • blank - Sätt inramning på alla fyra sidor av elementet margin eller padding

size är en av följande:

  • 0 - Sätt margin eller padding Sätt till 0
  • 1 - Sätt margin eller padding Sätt till .25rem
  • 2 - Sätt margin eller padding Sätt till .5rem
  • 3 - Sätt margin eller padding Sätt till 1rem
  • 4 - Sätt margin eller padding Sätt till 1.5rem
  • 5 - Sätt margin eller padding Sätt till 3rem
  • auto - Sätt margin Sätt till auto

Exempel

<div class="pt-4 bg-warning">Jag har bara över inramning (1.5rem)</div>
<div class="p-5 bg-success">Jag har inramning (3rem) på alla sidor</div>
<div class="m-5 pb-5 bg-info">Jag har utramning (3rem) och nedre inramning (3rem) på alla sidor</div>

Prova själv

Mer avståndsexempel

.m-# / m-*-# Alla sidors utramning Prova
.mt-# / mt-*-# Över utramning Prova
.mb-# / mb-*-# Under utramning Prova
.ms-# / ms-*-# Vänster utramning Prova
.me-# / me-*-# Höger utramning Prova
.mx-# / mx-*-# Vänster och höger inramning Prova
.my-# / my-*-# Över och under utramning Prova
.p-# / p-*-# Alla sidors inramning (fyllning) Prova
.pt-# / pt-*-# Över inramning Prova
.pb-# / pb-*-# Under inramning Prova
.ps-# / ps-*-# Vänster inramning Prova
.pe-# / pe-*-# Höger inramning Prova
.py-# / py-*-# Över och under inramning Prova
.px-# / px-*-# Vänster och höger inramning Prova

Du kan hitta mer på vår CSS-enhetsreferenshandbok Läs mer om rem och olika måttenheter i.

skugga

Använd shadow- Lägg till skugga med klass:

Exempel

<div class="shadow-none p-4 mb-4 bg-light">ingen skugga</div>
<div class="shadow-sm p-4 mb-4 bg-white">Liten skugga</div>
<div class="shadow p-4 mb-4 bg-white">Standard skugga</div>
<div class="shadow-lg p-4 mb-4 bg-white">Stor skugga</div>

Prova själv

Vertikal justering

Använd align- Klassar ändrar elementets justering (endast för inline, inline-block, inline-table och tabellcellselement):

Exempel

<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>

Prova själv

Aspect ratio

Skapa responsiva videor eller presentationsbilder baserat på föräldrelementets bredd.

Lägg till .ratio Klassar matchar den valda aspect ratio:n .aspect-ratio-* Lägg till i föräldrelementet och lägg till inbäddning (video eller iframe):

Exempel

<!-- 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>

Prova själv

Synlighet

Använd .visible eller .invisible Klassar kan kontrollera elementets synlighet:

Kommentar:Dessa klasser ändrar inte CSS display-värdet. De lägger bara till visibility:visible eller visibility: hidden。

Exempel

<div class="visible">Jag är synlig.</div>
<div class="invisible">Jag är inte synlig.</div>

Prova själv

Stäng ikon

Använd .btn-close Klasser kan ställa in stängningsikongens stil. Vanligtvis används i varningar och modaler.

Exempel

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

Prova själv

Skärmläsare

Använd .visually-hidden Klasser kan dölja element på alla enheter utom skärmläsare:

Exempel

<span class="visually-hidden">Jag kommer att vara dold på alla skärmar utom för skärmläsare.</span>

Prova själv

Färg

Som nämnts i kapitlet "Färg", nedan listas alla text- och bakgrundsfärgklasser:

Klasser för textfärg är:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（Standardbodyfärg / vanligtvis svart）
  • .text-light

Exempel

Prova själv

Kontextuella textklasser kan också användas för länkar:

Exempel

Prova själv

Du kan också använda .text-black-50 eller .text-white-50-klasser för att lägga till 50% opacitet till svart eller vit text:

Exempel

Prova själv

Bakgrundsfärg

Klasser för bakgrundsfärg är:

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

Observera att bakgrundsfärgen inte sätter textfärgen, så i vissa fall behöver du använda dem tillsammans med .text-* Klasser kan användas tillsammans.

Exempel

Prova själv