Forme bootstrap | Spiegato
Questo articolo coprirà:
- Come creare un modulo in linea in bootstrap?
- Come impostare la spaziatura in forma in linea?
- Come creare una forma impilata in bootstrap?
- Come creare un modulo usando le righe della griglia?
- Come creare una forma di layout compatta?
- Come creare una forma orizzontale?
- Come impostare il dimensionamento dell'etichetta della forma?
Come creare un modulo in linea in bootstrap?
I moduli in linea vengono creati usando ".forma in linea" classe. Questa classe ha un CSS predefinito "Schermo"Proprietà con il valore"flettere"Con altre proprietà.
Esempio
Dai un'occhiata all'esempio che dimostra come creare un modulo in linea in bootstrap:
- Innanzitutto, aggiungi un ""Elemento con la classe"forma in linea".
- Al suo interno, aggiungi due ""Elementi con il"gruppo di forma" classe.
- Ogni elemento "" contiene il "" E "" elementi.
- Infine, aggiungi un ""Elemento per creare un pulsante:
Produzione
Come impostare la spaziatura in forma in linea?
Le utility di spaziatura bootstrap regolano la spaziatura di una forma in linea. Questi includono "ml-*"Per il margine-sinistra,"Sig-*"Per il margine-destra e molti altri. IL "*"Rappresenta la dimensione.
Per una dimostrazione pratica, dai un'occhiata all'esempio di seguito.
Esempio
Nell'esempio in corso, aggiungi la classe "ML-2"All'elemento" ". Genererà spazio a sinistra dell'etichetta:
Produzione
Come creare una forma impilata in bootstrap?
Le forme impilate si riferiscono alle forme verticali. Questo è un modulo predefinito.
Dai un'occhiata all'esempio di seguito.
Esempio
Segui le istruzioni fornite per creare una forma verticale:
- Aggiungere un ""Elemento.
- Al suo interno, aggiungi un ""Tag e assegnarlo una classe" Group di forma ".
- Questo elemento "" contiene il "" E "" elementi. Puoi aggiungere gli elementi del modulo in base alle tue preferenze.
- Alla fine, aggiungi un ""Alla forma:
Produzione
Come creare un modulo usando le righe della griglia?
Per creare una forma usando la griglia bootstrap è molto semplice. Innanzitutto, specificare una riga e creare colonne per gli ingressi del modulo al suo interno.
Analizzare l'esempio di seguito.
Esempio
Segui le istruzioni per creare un modulo utilizzando Bootstrap Grid:
- Aggiungere un ""Elemento.
- Al suo interno, aggiungi un ""Container con la classe" riga ".
- All'interno questo "riga"Container, specificare altri due elementi" "con la classe" Col ".
- Aggiungi il "<etichetta> "E"<ingresso> "Elementi all'interno di ciascun elemento" ":
Produzione
Come creare una forma di layout compatta?
Per layout compatti e più stretti, il “Roll di forma"La classe viene utilizzata al posto del"riga" classe:
Produzione
Come creare una forma orizzontale?
Le forme orizzontali vengono create usando il "riga" E "col-*-*" classi. IL "riga"La classe specifica una riga e le classi" Col-*-*"definiscono la larghezza di etichette e controlli, come"Col-SM-2","Col-MD-6" o più. Il "Col-Form-label" deve essere aggiunto anche all'elemento "".
Esempio
Per creare una forma orizzontale, prova le istruzioni fornite:
- Innanzitutto, aggiungi un ""Elemento.
- Al suo interno, aggiungi un ""Elemento con le classi"gruppo di forma" E "riga".
- Specificare i gruppi di moduli all'interno di questo ""Elemento. Nel nostro caso, il "" e il ""Sono specificati elementi.
- IL ""L'elemento è posto all'interno di un altro""Avere classe"Col-SM-6". Specificherà 6 colonne della griglia per ""Elemento:
Produzione
Come regolare il dimensionamento della forma dell'etichetta?
La dimensione del ""L'elemento può essere regolato facilmente usando il"col-form-label-sm" E "Col-Form-label-LG". Il "Col-Form-label-SM" ha un CSS predefinito "dimensione del font"Proprietà con il valore"0.875rem"Con altre proprietà. Il "Col-Form-Label-LG" ha un CSS predefinito "dimensione del font"Proprietà con il valore"1.25rem"Con altre proprietà.
Esempio
Nell'esempio in corso, aggiungi il "Col-Form-label-SM" al primo elemento "" e "Col-Form-Label-LG" al secondo per vedere la differenza:
Produzione
Hai imparato con successo come creare forme usando bootstrap.
Conclusione
Bootstrap offre un metodo semplice per produrre forme reattive e coerenti. Esistono principalmente tre tipi di forme bootstrap: forme in linea, accatastate e orizzontali. Un modulo in linea viene creato usando il "forma in linea" classe. Per specificare gli stili generali al gruppo di controlli di forma, "gruppo di forma"La classe viene utilizzata. Più specificamente, ci sono diverse classi che aiutano a regolare le dimensioni dei componenti della forma, come "Col-SM-4", "Col-Form-label-SM" e molti altri. Questo articolo ha dimostrato come creare forme usando bootstrap.