User Tools

Site Tools


Sidebar

No ai soldati italiani all'estero

Indice

Eventi

Energia

Rigacci.Org usa energia elettrica da fonti rinnovabili, grazie al gruppo di acquisto Merci Dolci.

Merci Dolci - Energia Rinnovabile

Software libero!

Petizione contro i brevetti software

Faunalia: Soluzioni GIS professionali

Debian

www.gnu.org www.kernel.org

doc:appunti:prog:bootstrap_toolkit

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.

Cinque livelli (dimensioni) di schermo predefiniti

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

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

doc/appunti/prog/bootstrap_toolkit.txt · Last modified: 2019/12/02 18:51 by niccolo