doc:appunti:prog:bootstrap_toolkit
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
doc:appunti:prog:bootstrap_toolkit [2019/12/02 18:23] – [Start Bootstrap] niccolo | doc:appunti:prog:bootstrap_toolkit [2020/02/20 11:04] – [Selettori per dimensione (size)] niccolo | ||
---|---|---|---|
Line 3: | Line 3: | ||
**[[https:// | **[[https:// | ||
+ | Qui si può leggere una introduzione: | ||
===== Cinque livelli (dimensioni) di schermo predefiniti ===== | ===== 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 | ||
+ | ^ lg | large | 992px | Desktop | ||
+ | ^ xl | extra large | | ||
===== Larghezza di colonna ===== | ===== Larghezza di colonna ===== | ||
+ | |||
+ | **'' | ||
+ | |||
+ | 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=" | ||
+ | </ | ||
+ | |||
+ | * Colonna di larghezza | ||
+ | * Colonna di larghezza 100% (12 / 12 = 1.00) per schermi //large// | ||
+ | * Colonna di larghezza | ||
+ | |||
+ | |||
+ | < | ||
+ | class=" | ||
+ | </ | ||
+ | |||
+ | Larghezza basata sulla larghezza naturale del suo contenuto. | ||
+ | |||
+ | < | ||
+ | class=" | ||
+ | </ | ||
+ | |||
+ | Forza la larghezza al 100%, cioè forza un new line. | ||
+ | |||
+ | < | ||
+ | class=" | ||
+ | </ | ||
+ | |||
+ | Forza la larghezza al 100%, ma solo dal breakpoint " | ||
===== Margin e padding ===== | ===== Margin e padding ===== | ||
+ | |||
+ | Bootstrap 4 ha una classe per margini e padding responsivi: **[[https:// | ||
+ | |||
+ | **'' | ||
==== Selettori per la proprietà ==== | ==== Selettori per la proprietà ==== | ||
+ | |||
+ | ^ m | margin | ||
+ | ^ p | padding | ||
==== Selettori per i lati (sides) ==== | ==== Selettori per i lati (sides) ==== | ||
+ | |||
+ | ^ l | left | | ||
+ | ^ r | right | | ||
+ | ^ t | top | | ||
+ | ^ b | bottom | ||
+ | ^ x | left and right | | ||
+ | ^ y | top and bottom | ||
+ | ^ < | ||
==== Selettori per dimensione (size) ==== | ==== Selettori per dimensione (size) ==== | ||
+ | |||
+ | I valori per la dimensione vanno da **0** a **5**, oppure **auto**. | ||
+ | |||
+ | ==== Esempi ==== | ||
+ | |||
+ | ^ class=" | ||
+ | ^ class=" | ||
+ | ^ class=" | ||
===== Font Awesome ===== | ===== Font Awesome ===== | ||
+ | |||
+ | * **[[https:// | ||
+ | * **[[https:// | ||
+ | * **[[https:// | ||
+ | |||
+ | === Usage examples === | ||
+ | |||
+ | <code html> | ||
+ | <i class=" | ||
+ | <i class=" | ||
+ | <i class=" | ||
+ | </ | ||
+ | |||
+ | ^ 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:// | ||
+ | * **[[https:// | ||
+ | * **[[https:// | ||
===== Tabelle ===== | ===== Tabelle ===== |
doc/appunti/prog/bootstrap_toolkit.txt · Last modified: 2020/02/20 11:07 by niccolo