This is an old revision of the document!

−Table of Contents

Bootstrap
SB Admin 2
- - Collapsed Sidebar
  - Sidebar Color
Start Bootstrap

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)

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.

rigacci.org