====== Bootstrap ====== **[[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**. 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 ====


class="col-xl-10 col-lg-12 col-md-9"

* 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//


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: **[[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 | ^ | 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}''**



    
        Left-aligned
    
    
        Right-aligned

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