Differences

This shows you the differences between two versions of the page.

--- doc:appunti:prog:bootstrap_toolkit [2019/12/02 17:34] – created niccolo
+++ doc:appunti:prog:bootstrap_toolkit [2020/02/20 11:07] (current) – [Esempi] niccolo
@@ Line 3: / Line 3: @@
 **[[https://getbootstrap.com/|Bootstrap]]** è un kit di sviluppo HTML, CSS, e JavaScript per costruire siti web secondo il paradigma [[wpit>Design responsivo|responsive]] e [[https://en.ryte.com/wiki/Mobile_First|mobile-first]]. In questi appunti si fa riferimento alla **versione 4.3.1**.
-===== SB Admin 2 =====
+Qui si può leggere una introduzione: **[[https://getbootstrap.com/docs/4.3/getting-started/introduction/|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 ====
+<code>
+class="col-xl-10 col-lg-12 col-md-9"
+</code>
+  * 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//
+<code>
+class="col-{breakpoint}-auto"
+</code>
+Larghezza basata sulla larghezza naturale del suo contenuto.
+<code>
+class="w-100"
+</code>
+Forza la larghezza al 100%, cioè forza un new line.
+<code>
+class="w-100 d-none d-md-block"
+</code>
+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: **[[https://www.jquery-az.com/bootstrap-margin-padding-classes-spacing-explained-5-examples/|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: **[[https://getbootstrap.com/docs/4.3/utilities/float/|Responsive float utilities]]**
+**''float-{sm,md,lg,xl}-{left,right,none}''**
+<code>
+<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>
+</code>
+===== Font Awesome =====
+  * **[[https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use|Basic use]]**
+  * **[[https://engineering.ucdenver.edu/docs/librariesprovider29/college-of-engineering-and-applied-science/web-resources/cheatsheet-_-font-awesome.pdf|Cheatsheet.pdf]]**
+  * **[[https://www.w3schools.com/icons/fontawesome5_intro.asp|Fontawesome5 Intro]]**
+=== Usage examples ===
+<code html>
+<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">
+</code>
+^ 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 ===
+  * **[[https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use|Basic use]]**
+  * **[[https://engineering.ucdenver.edu/docs/librariesprovider29/college-of-engineering-and-applied-science/web-resources/cheatsheet-_-font-awesome.pdf|Cheatsheet.pdf]]**
+  * **[[https://www.w3schools.com/icons/fontawesome5_intro.asp|Fontawesome5 Intro]]**
+===== Tabelle =====
+====== SB Admin 2 ======
 **[[https://startbootstrap.com/themes/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'**[[wp>Hamburger button]]** (pulsante con le tre righe orizzonatali) per accedere alla sidebar.
+Si deve aggiungere la classe **sidebar-toggled** al tag **body**:
+<code html>
+<body class="sidebar-toggled">
+</code>
+e aggiungere la classe **toggled** all'oggetto sidebar, che in effetti è un tag **ul** con classe **sidebar**:
+<code html>
+<ul id="accordionSidebar" class="sidebar toggled">
+</code>
 ==== Sidebar Color ====
-===== Start Bootstrap =====
+È 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:
+<code css>
+.bg-gradient-primary {
+    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+}
+</code>
+====== Start Bootstrap ======
 **[[https://startbootstrap.com/|Start Bootstrap]]** è un repository di **temi**, **template** ed esempi di codice dedicati a Bootstrap, con licenza libera di tipo MIT.