This is an old revision of the document!
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
Margin e padding
Selettori per la proprietà
Selettori per i lati (sides)
Selettori per dimensione (size)
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.