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

È 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.