logo Portale zerozetasm.it



Contenuto: Utilità

01. Spaziatura

NOTA: Nel corso delle spiegazioni lo stile sotto descritto, verrà assunto negli ESEMPI, al solo scopo di rendere evidente la colorazione del layout, altrimenti non visibile.


  <style type="text/css">
    .dme {
      display: inline-block;
      width: 5rem;
      height: 5rem;      
      background-color: #fafafa;
      text-align: center;
      color: #fff;
    }
  </style>
Bootstrap include un'ampia gamma di classi di utilità di margine e padding reattive per modificare l'aspetto di un elemento.
Come funziona
Assegna valori di margin o padding a un elemento o un sottoinsieme dei suoi lati con classi abbreviate.
Include il supporto per singole proprietà verticali e orizzontali.
Dove la proprietà è una delle:
m per le classi che impostano margin
p per le classi che impostano padding

Dove i lati sono uno di:

t per le classi che impostano margin-top / padding-top
b per le classi che impostano margin-bottom / padding-bottom
l per le classi che impostano margin-left / padding-left
r per le classi che impostano margin-right / padding-right
x per le classi che impostano entrambi *-left e *-right
y per le classi che impostano entrambi *-top e *-bottom

Solo m o solo p per le classi che impostano un margine o un padding su tutti e 4 i lati dell'elemento

Dove la dimensione è una delle:

-0 per le classi che eliminano margin o padding impostandolo su zero
-1 (per impostazione predefinita) per le classi che impostano margin / padding = 0.25rem
-2 (per impostazione predefinita) per le classi che impostano margin / padding = 0.5rem
-3 (per impostazione predefinita) per le classi che impostano margin / padding = 1rem
-4 (per impostazione predefinita) per le classi che impostano margin / padding = 1.5rem
-5 (per impostazione predefinita) per le classi che impostano margin / padding = 3rem

-auto per le classi che impostano margin su auto

Solo i margini possono essere negativi e si impostano con "n" prima del numero, ovvero .m-n(1-5)


Esempi

Ecco alcuni esempi rappresentativi di queste classi:


.m-auto { /* Imposta tutti e quatro i margini su "auto" */ }

.ml-1 { /* Assegna un margine sinistro = 0.25rem */ }

.px-2 { /* Assegna un padding sinistro e destro = 0.50rem */ }

.p-3 { /* Assegna un padding in tutte e quattro le direzioni = 1rem */ }

.mt-0 { /* Elimina qualsiasi margine impostato prima su "margin-top" */ }

.mx-auto { /* Imposta i margini sinistro e destro su "auto" */ }

.py-4 { /* Assegna un padding top e bottom = 1.50rem */ }

.m-n5 { /* Assegna un margine negativo a tutti e quattro i margini = -3rem */ }

02. Centratura orizzontale
Bootstrap include una classe .mx-auto per centrare orizzontalmente il contenuto a livello di blocco con larghezza stabilita,
ovvero i margini del contenuto che display: block; imposta su auto.

Elemento centrato

Codice 

<div class="mx-auto border bg-light p-2" style="width: 200px;">
  Elemento centrato
</div>

03. Bordi
Utilizzare le utilità .border per un colore molto tenue #dee2e6 e aggiungere o rimuovere i bordi di un elemento.


Codice 

<span class="ml-3 dme border"></span>
<span class="ml-3 dme border-top"></span>
<span class="ml-3 dme border-right"></span>
<span class="ml-3 dme border-bottom"></span>
<span class="ml-3 dme border-left"></span>

04. Bordi colorati
Cambiare il colore del bordo usando le utilità sui colori del tema.


Codice 

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

05. border-radius
Aggiungere le classi .rounded a un elemento per arrotondare gli angoli.

75x75 75x75 75x75 75x75 75x75 75x75 150x75 75x75

Codice 

<span class="ml-3 dme bg-dark rounded">75x75</span>
<span class="ml-3 dme bg-dark rounded-top">75x75</span>
<span class="ml-3 dme bg-dark rounded-right">75x75</span>
<span class="ml-3 dme bg-dark rounded-bottom">75x75</span>
<span class="ml-3 dme bg-dark rounded-left">75x75</span>
<span class="ml-3 dme bg-dark rounded-circle">75x75</span>
<span class="ml-3 dme bg-dark rounded-pill" style="width:10rem;">150x75</span>
<span class="ml-3 dme bg-dark rounded-0">75x75</span>

06. Colori testo
Le classi per il colore utili per fare risaltare o sbiadire testo e blocchi.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50


Codice 

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

07. Colori Link
Le classi di testo contestuali funzionano bene anche sulle ancore con gli stati di hover e focus forniti.
Si noti che la classe .text-white e .text-muted non ha uno stile di collegamento aggiuntivo oltre alla sottolineatura.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link


Codice 

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

08. Colore di sfondo
Son simile alle classi di colore del testo contestuale, impostano lo sfondo di un elemento a qualsiasi classe contestuale.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Codice 

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

09. float
classi di utilità .float che fanno fluttuare un elemento a sinistra o a destra o disabilitano il floating.
Le utilità flottanti non hanno alcun effetto sugli elementi flessibili.

float-left su tutte le dimensioni della finestra

float-right su tutte le dimensioni della finestra


Non flottante su tutte le dimensioni della finestra

Codice 

<div class="border bg-light p-2 float-left">float-left su tutte le dimensioni della finestra</div><br>
<div class="border bg-light p-2 float-right">float-right su tutte le dimensioni della finestra</div><br><br>
<div class="border bg-light p-2 float-none">Non flottante su tutte le dimensioni della finestra</div>

10. Posizionamento
Sono disponibili classi di posizionamento non responsive .position-static .position-relative .position-absolute .position-fixed .position-sticky che per essere usate hanno bisogno delle rispettive coordinate di posizionamento.
.fixed-top Posiziona un elemento nella parte superiore della finestra, e fixed-bottom Posiziona un elemento nella parte inferiore della finestra,
.sticky-top Fissa un elemento nella parte superiore della finestra, ma solo quando arriva effettivamente alla fine della finestra.


11. Shadows
Aggiungi o rimuovi le ombre agli elementi con le utilità box-shadow.

No shadow
Small shadow
Regular shadow
Larger shadow

Codice 

<div class="border shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="border shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="border shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="border shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

12. Dimensionamento
Rendere un elemento largo o alto con le utilità di larghezza w-25, w-50. w-75, w-100, w-auto e altezza h-25, h-50. h-75, h-100, h-auto.

Utilità di larghezza
Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Utilità di altezza
Height 25%
Height 50%
Height 75%
Height 100%
Height auto

Codice 

  <h5>Utilità di larghezza</h5>    
<div class="w-25 p-3 mb-2" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3 mb-2" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3 mb-2" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3 mb-2" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
  <h5>Utilità di altezza</h5>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

13. max-width: 100%
È inoltre possibile utilizzare le utilità (max-width: 100%;) = mw-100 e (max-height: 100%;) = mh-100 se necessario.

Larghezza mw-100 = max-width: 100%

Altezza hw-100 = max-height: 100%

Codice 

<div class="mw-100 p-3 mb-2" style="background-color: #eee;">Larghezza mw-100 = max-width: 100%</div>
    
<div class="mh-100 bg-light border" style="height:100px; width:300px;">Altezza hw-100 = max-height: 100%</div>

14. Relativo al viewport
È inoltre possibile utilizzare le utilità per impostare la larghezza e l'altezza relative al viewport:
.min-vw-100 .min-vh-100 .vw-100 .vh-100

Codice 

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

15. Allineamento verticale
Modificare l'allineamento verticale degli elementi inline, inline-block, inline-table e table-cell.
Si noti che l'allineamento verticale riguarda solo gli elementi inline, inline-block, inline-table e table-cell.
Scegliere tra .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top.

Con elementi in linea:
align-baseline align-top align-middle align-bottom align-text-top align-text-bottom

Con le celle della tabella:
baseline top middle bottom text-top text-bottom

Codice 

    <h5>Con elementi in linea:</h5>
<div class="border bg-light" style="line-height: 3rem;">
<span class="align-baseline">align-baseline</span>
<span class="align-top">align-top</span>
<span class="align-middle">align-middle</span>
<span class="align-bottom">align-bottom</span>
<span class="align-text-top">align-text-top</span>
<span class="align-text-bottom">align-text-bottom</span>
</div>

  <h5>Con le celle della tabella:</h5> 
<table class="border bg-light" style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

16. Visibilità
Controlla la visibilità, senza modificare la visualizzazione.
Queste classi di utilità non modificano e non influenzano il layout: gli elementi .invisible occupano ancora spazio nella pagina.
I contenuti saranno nascosti sia visivamente che per gli utenti di tecnologie assistite come i screen reader.
Applicare .visible o .invisible secondo necessità.

primo elemento visibile: Testo visibile...
secondo elemento presente ma invisibile:

Codice 

  <h6>primo elemento visibile: <em class="visible">Testo visibile...</em></h6>
  <h6>secondo elemento presente ma invisibile:  <em class="invisible">Testo invisibile...</em></h6>

17. Avviso
Gli avvisi sono disponibili per qualsiasi lunghezza di testo, nonché un pulsante di annullamento facoltativo.
Per uno stile corretto, utilizzare una delle otto classi contestuali.


Codice 

<div class="alert alert-primary" role="alert">
  Un semplice avviso principale!
</div>
<div class="alert alert-secondary" role="alert">
  Un semplice avviso secondario!
</div>
<div class="alert alert-success" role="alert">
  Un semplice avviso di successo!
</div>
<div class="alert alert-danger" role="alert">
  Un semplice avviso di pericolo!
</div>
<div class="alert alert-warning" role="alert">
  Un semplice avviso di avvertimento!
</div>
<div class="alert alert-info" role="alert">
  Un semplice avviso informativo!
</div>
<div class="alert alert-light" role="alert">
  Un semplice avviso luminoso!
</div>
<div class="alert alert-dark" role="alert">
  Un semplice avviso di allarme!
</div>

18. Cancella avviso
Usando il plugin JavaScript di avviso, è possibile eliminare qualsiasi avviso in linea


Codice 

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>cliccando X</strong> questo avviso si può cancellare.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

19. Badge
Aggiungi una delle classi di modifica sotto menzionate per modificare l'aspetto di un badge.

Primary Secondary Success Danger Warning Info Light Dark

Codice 

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

20. breadcrumb
Indica la posizione della pagina corrente all'interno di una gerarchia di navigazione che aggiunge automaticamente i separatori tramite CSS.


Codice 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Guide</a></li>
    <li class="breadcrumb-item active" aria-current="page">pagina corrente</li>
  </ol>
</nav>