Bootstrap

CONTAINER MODIFICA OGGETTI

Container: Adatta la pagina in base a delle dimensioni predefinite in px Larghezza: w-25 w-50 w-75 w-100
Container-fluid: Adatta la pagina in base a quanto diminuisce la dimensione del display Margine: m-1 m-2 m-3 m-4 m-5
mx-1 mx-2 mx-3 mx-4 mx-5
FORM E INPUT
Margine orizzontale:

Margine verticale: my-1 my-2 my-3 my-4 my-5

Colore: < input type="color" name="colore"> Padding: p-1 p-2 p-3 p-4 p-5
Numero: < input type="number" name="numero" min="10" max="50"> Padding orizzontale: px-1 px-2 px-3 px-4 px-5
Data: gg/mm/aaaa < input type="date" name="data"> Padding verticale: py-1 py-2 py-3 py-4 py-5

Testo: < input type="text" name="testo"> Centrare un oggetto in orizzontale: mx-auto

Centrare il testo: text-center
Password: < input type="password" name="password">
MAIUSCOLO: text-uppercase
Radiobutton:

< input type="radio" name="scelta" value="si" id="SI"> < label for="SI">SI< /label > minuscolo: text-lowercase
SI

< input type="radio" name="scelta" value="no" id="NO"> < label for="NO">NO< /label > Colori: danger warning success info primary secondary light white
NO

Il "for='SI" e il "for=NO" si riferiscono all'id del input Bordo: border border-(colore) rounded
Checkbox:
Background: bg-(colore)
A < input type="checkbox" name="a"> < label for="A">A< /label > Bottone: btn btn-(color)
B < input type="checkbox" name="b"> < label for="B">B< /label > Tabelle table table-striped
C < input type="checkbox" name="c">
ELEMENTI RESPONSIVE
< label for="C">C< /label >
Il "for='A", il "for=B" e il "for=C" si riferiscono all'id del input
Tendina:
col-12
Matematica col-6 col-4 col-2

< select value="materie"> col-12 non prenderà tutto lo spazio disponibile nella pagina ma prenderà tutto lo spazio del suo contenitore (div o altro)
Per le varie opzioni si mette: < option name="mate" >Matematica< /option> Per completare la sintassi bisogna mettere vari col, uno per ogni larghezza possibile dello schermo.
Se vogliamo avere un div più largo possibile su un display poco largo, che ce ne siano 2 messi uno di fianco all'altro su uno schemo mediamente
largo e che ce ne siano 3 su un display largo, dovrò mettere: col-12 col-md-6 col-lg-4
INVIA < input type="submit"> Display Extra small: Display small:
xs < 576px sm< 768px

Display medium: Display large:

md< 992px lg< 1200px

Display extra large: Display extra extra large:

xl< 1400px xxl>=1400px
Visita anche il sito di:

Filippo Ceraulo

Torna alla home