Table of Contents
Bootstrap
Bootstrap è un kit di sviluppo HTML, CSS, e JavaScript per costruire siti web secondo il paradigma responsive e mobile-first. In questi appunti si fa riferimento alla versione 4.3.1.
Qui si può leggere una introduzione: Introduction - Get started with Bootstrap.
Cinque livelli (dimensioni) di schermo predefiniti
Sono definiti cinque livelli di dimensione dello schermo, separati da precisi breakpoint. In generale una classe che include un breakpoint si applica al livello stesso e agli schermi più grandi.
| xs | extra small | 0px | Phone, 4 inches |
|---|---|---|---|
| sm | small | 576px | Phone, 5 inches |
| md | medium | 768px | Tablet, 6 inches |
| lg | large | 992px | Desktop |
| xl | extra large | 1200px | Wide desktop |
Larghezza di colonna
col-{breakpoint}-{witdh}
Le classi senza la specifica di un breakpoint si applicano a tutti gli schermi, dal più piccolo al più grande. Ad esempio col-6 definisce una colonna con larghezza del 50% per qualunque livello di schermo.
Una classe con la specifica di breakpoint si applica a partire da quel livello e per tutti quelli superiori (schermi più grandi). Sotto tale breakpoint (cioè per schermi più piccoli) la classe non si applica affatto. Ad esempio col-sm-6 definisce una colonna con larghezza del 50% per uno schermo small e per quelli più grandi (salvo classi più specifiche per gli schermi più grandi). Per schermi più piccoli del breakpoint small, la classe col non si applica.
Esempi
class="col-xl-10 col-lg-12 col-md-9"
- Colonna di larghezza 83% (10 / 12 = 0.83) per schermi extra large
- Colonna di larghezza 100% (12 / 12 = 1.00) per schermi large
- Colonna di larghezza 75% ( 9 / 12 = 0.75) per schermi medium
class="col-{breakpoint}-auto"
Larghezza basata sulla larghezza naturale del suo contenuto.
class="w-100"
Forza la larghezza al 100%, cioè forza un new line.
class="w-100 d-none d-md-block"
Forza la larghezza al 100%, ma solo dal breakpoint “md” in su. Per gli schermi inferiori l'oggetto non viene mostrato (d-none).
Margin e padding
Bootstrap 4 ha una classe per margini e padding responsivi: The spacing classes in Bootstrap 4
{property}{sides}-{breakpoint}-{size}
Selettori per la proprietà
| m | margin |
|---|---|
| p | padding |
Selettori per i lati (sides)
| l | left |
|---|---|
| r | right |
| t | top |
| b | bottom |
| x | left and right |
| y | top and bottom |
| <blank> | all sides |
Selettori per dimensione (size)
I valori per la dimensione vanno da 0 a 5, oppure auto.
Esempi
| class=“my-5” | Margine superiore e inferiore molto grande. |
|---|---|
| class=“p-0” | Padding zero su tutti i lati. |
| class=“p-5” | Padding massimo su tutti i lati. |
Allineamento dentro una cella
Vedere: Responsive float utilities
float-{sm,md,lg,xl}-{left,right,none}
<div class="row">
<div class="col-6">
<div class="float-left">Left-aligned</div>
</div>
<div class="col-6">
<div class="float-right">Right-aligned</div>
</div>
</div>
Font Awesome
Usage examples
<i class="fas fa-camera"> <i class="far fa-fw fa-2x fa-user-circle> <i class="fas fa-fw fa-2x fa-user-circle">
| fas | Font Awesome Solid |
|---|---|
| far | Font Awesome Regular |
| fa-fw | Fixed Width |
| fa-2x | 2x Larger Icons (can use: lg, 2x, 3x, 4x, 5x) |
See also
Tabelle
SB Admin 2
SB Admin 2 è un tema composto da HTML e CSS adatto a creare siti web del tipo pannello di controllo o applicazione web. In questi appunti si fa riferimento alla versione 4.0.7, compatibile con Bootstrap 4.
Collapsed Sidebar
Se si desidera che la barra laterale (sidebar) di SB Admin 2 si presenti in modalità collapsed (cioè minimizzata) per impostazione predefinita è possibie intervenire sulla class di alcuni elementi.
In modalità collapsed la sidebar sarà visualizzata su uno schermo desktop nella dimensione ridotta, mentre sarà del tutto nascosta su uno schermo di tipo mobile. Nel secondo caso sarà presentato l'Hamburger button (pulsante con le tre righe orizzonatali) per accedere alla sidebar.
Si deve aggiungere la classe sidebar-toggled al tag body:
<body class="sidebar-toggled">
e aggiungere la classe toggled all'oggetto sidebar, che in effetti è un tag ul con classe sidebar:
<ul id="accordionSidebar" class="sidebar toggled">
Sidebar Color
È possibile modificare il colore predefinito della sidebar sovrascrivendo alcune proprietà del CSS. Piuttosto che modificare il file sb-admin-2.css, è opportuno includere dopo di esso un CSS personalizzato che ridefinisce solo il necessario:
.bg-gradient-primary { background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%); }
Start Bootstrap
Start Bootstrap è un repository di temi, template ed esempi di codice dedicati a Bootstrap, con licenza libera di tipo MIT.