Bootstrap 5 Strumenti utili

Classi di utility / Helper

Bootstrap 5 offre molte classi di utility/helper che permettono di impostare rapidamente lo stile degli elementi senza utilizzare alcun codice CSS.

Bordo

Aggiungi o rimuovi bordi agli elementi utilizzando le classi di bordo:

Esempi

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

Larghezza del bordo

Usa .border-1 a .border-5 Cambia la larghezza del bordo utilizzando:

Esempi

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

Colore del bordo

Aggiungi un colore ai bordi utilizzando qualsiasi classe di colore di contesto del bordo:

Esempi

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

Arrotondamento dei bordi

Usa rounded Aggiungi arrotondamenti agli elementi di classe:

Esempi

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

Flottazione e rimozione della flottazione

Usa .float-end Classe per flottare a destra gli elementi, o utilizzare .float-start Flottare a sinistra e utilizzare .clearfix Classe di rimozione della flottazione:

Esempi

<div class="clearfix">
  <span class="float-start">Flottare a sinistra</span>
  <span class="float-end">Flottare a destra</span>
</div>

Prova personalmente

Flottazione responsive

Flottare a sinistra o a destra in base alla larghezza dello schermo utilizzando classi di flottazione responsive (.float-*-left|right) dove * è:

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

Esempi

<div class="float-sm-end">Flottare a destra su schermi di piccole dimensioni o più larghi</div><br>
<div class="float-md-end">Flottare a destra su schermi di medie dimensioni o più larghi</div><br>
<div class="float-lg-end">Flottare a destra su schermi di grandi dimensioni o più larghi</div><br>
<div class="float-xl-end">Flottare a destra su schermi di grandi dimensioni o più larghi</div><br>
<div class="float-xxl-end">Flottare a destra su schermi di grandi dimensioni o più larghi</div><br>
<div class="float-none">Non effettuare la flottazione</div>

Prova personalmente

Allineamento centrale

Usa .mx-auto Elementi centrati (aggiungere margin-left e margin-right: auto):

Esempi

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

Prova personalmente

Larghezza

Usare le classi w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Impostare la larghezza dell'elemento：

Esempi

<div class="w-25 bg-warning">Larghezza 25%</div>
<div class="w-50 bg-warning">Larghezza 50%</div>
<div class="w-75 bg-warning">Larghezza 75%</div>
<div class="w-100 bg-warning">Larghezza 100%</div>
<div class="w-auto bg-warning">Larghezza automatica</div>
<div class="mw-100 bg-warning">Larghezza massima 100%</div>

Prova personalmente

Altezza

Usare le classi h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Impostare l'altezza dell'elemento：

Esempi

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Altezza 25%</div>
  <div class="h-50 bg-warning">Altezza 50%</div>
  <div class="h-75 bg-warning">Altezza 75%</div>
  <div class="h-100 bg-warning">Altezza 100%</div>
  <div class="h-auto bg-warning">Altezza automatica</div>
  <div class="mh-100 bg-warning" style="height:500px">Altezza massima 100%</div>
</div>

Prova personalmente

Spaziatura

Bootstrap 5 possiede una vasta gamma di classi di utility responsive per margini e padding. Sono adatte a tutti i breakpoint:

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

L'uso di queste classi è nel formato:{property}{sides}-{size} usato per xs，e {property}{sides}-{breakpoint}-{size} usato per sm、md、lg、xl e xxl。

property È una delle seguenti:

  • m - Imposta margin
  • p - Imposta padding

sides È una delle seguenti:

  • t - Imposta margin-top o padding-top
  • b - Imposta margin-bottom o padding-bottom
  • s - Imposta margin-left o padding-left
  • e - Imposta margin-right o padding-right
  • x - Imposta contemporaneamente padding-left e padding-right o margin-left e margin-right
  • y - Imposta contemporaneamente padding-top e padding-bottom o margin-top e margin-bottom
  • blank - Imposta margini su tutti e quattro i lati dell'elemento margin o padding

size È una delle seguenti:

  • 0 - Metti margin o padding Imposta su 0
  • 1 - Metti margin o padding Imposta su .25rem
  • 2 - Metti margin o padding Imposta su .5rem
  • 3 - Metti margin o padding Imposta su 1rem
  • 4 - Metti margin o padding Imposta su 1.5rem
  • 5 - Metti margin o padding Imposta su 3rem
  • auto - Metti margin Imposta su auto

Esempi

<div class="pt-4 bg-warning">Ho solo padding superiore (1.5rem)</div>
<div class="p-5 bg-success">Ho padding (3rem) su tutti i lati</div>
<div class="m-5 pb-5 bg-info">Ho margini (3rem) e padding inferiore (3rem) su tutti i lati</div>

Prova personalmente

Più esempi di spaziatura

.m-# / m-*-# Margini di tutti i lati Prova
.mt-# / mt-*-# Margini superiori Prova
.mb-# / mb-*-# Margini inferiori Prova
.ms-# / ms-*-# Margini laterali sinistri Prova
.me-# / me-*-# Margini laterali destri Prova
.mx-# / mx-*-# Padding laterale sinistro e destro Prova
.my-# / my-*-# Margini superiori e inferiori Prova
.p-# / p-*-# Padding (riempimento) di tutti i lati Prova
.pt-# / pt-*-# Padding superiore Prova
.pb-# / pb-*-# Padding inferiore Prova
.ps-# / ps-*-# Padding laterale sinistro Prova
.pe-# / pe-*-# Padding laterale destro Prova
.py-# / py-*-# Padding superiore e inferiore Prova
.px-# / px-*-# Padding laterale sinistro e destro Prova

Puoi trovare i nostri Manuale di unità CSS Leggi di più su rem e unità di dimensioni diverse nel documento.

ombra

Usa shadow- Aggiungi'ombra agli elementi di classe:

Esempi

<div class="shadow-none p-4 mb-4 bg-light">nessun'ombra</div>
<div class="shadow-sm p-4 mb-4 bg-white">Ombra piccola</div>
<div class="shadow p-4 mb-4 bg-white">Ombra predefinita</div>
<div class="shadow-lg p-4 mb-4 bg-white">Ombra grande</div>

Prova personalmente

Allineamento verticale

Usa align- Le classi modificano l'allineamento degli elementi (solo per elementi inline, inline-block, inline-table e celle di tabella):

Esempi

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

Rapporto di aspetto

Crea video o presentazioni responsive in base alla larghezza del genitore.

Aggiungi .ratio Le classi corrispondono al rapporto di aspetto scelto .aspect-ratio-* Aggiungi al elemento genitore e aggiungi al suo interno elementi incorporati (video o iframe):

Esempi

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

Prova personalmente

Visibilità

Usa .visible o .invisible Le classi possono controllare la visibilità degli elementi:

Nota:Queste classi non modificano il valore di CSS display. Aggiungono solo visibility:visible o visibility: hidden;

Esempi

<div class="visible">Sono visibile.</div>
<div class="invisible">Sono invisibile.</div>

Prova personalmente

Icona di chiusura

Usa .btn-close Le classi possono impostare lo stile dell'icona di chiusura. Di solito usate nei modali e nei avvisi.

Esempi

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

Prova personalmente

lettore di schermo

Usa .visually-hidden Le classi possono nascondere gli elementi su tutti i dispositivi, eccetto i lettori di schermo:

Esempi

<span class="visually-hidden">Sarò nascosto su tutti gli schermi tranne per i lettori di schermo.</span>

Prova personalmente

Colori

Come descritto nella sezione "Colori", di seguito è elencato l'elenco completo delle classi di testo e sfondo:

Le classi per i colori del testo sono:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(colore predefinito del body / di solito nero)
  • .text-light

Esempi

Prova personalmente

Le classi di testo di contesto possono essere usate anche per i link:

Esempi

Prova personalmente

Puoi anche usare .text-black-50 o .text-white-50 per aggiungere 50% di opacità al testo nero o bianco:

Esempi

Prova personalmente

Colore di sfondo

Le classi per i colori di sfondo sono:

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

Notare che il colore di sfondo non imposta il colore del testo, quindi in alcuni casi, potrebbe essere necessario abbinarli con .text-* Classi insieme

Esempi

Prova personalmente