Differences

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

--- doc:appunti:prog:bootstrap_toolkit [2020/02/20 10:53] – [Larghezza di colonna] niccolo
+++ doc:appunti:prog:bootstrap_toolkit [2020/02/20 11:07] (current) – [Esempi] niccolo
@@ Line 22: / Line 22: @@
 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.
-Esempio:
+==== Esempi ====
 <code>
@@ Line 31: / Line 31: @@
   * 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 =====