Dimensizzazione input bootstrap
Durante la creazione di moduli in un'applicazione Web, richiediamo una varietà di componenti, inclusi campi di input, pulsanti di radio, caselle di controllo e altro ancora. Più specificamente, vengono utilizzate diverse classi bootstrap per regolare le dimensioni di questi componenti di forma, come "forma-controllo-*" E "Group input-*". IL "*"Simboleggia le classi che definiscono la dimensione, dove"Lg"Rappresenta grande e"SM"Si riferisce a piccoli.
Questo post guiderà:
- Metodo 1: come specificare la dimensione dell'input usando "forma di controllo" classe?
- Metodo 2: come specificare la dimensione dell'input usando "Group di input" classe?
- Metodo 3: come specificare la dimensione dell'input usando la larghezza "w" classe?
Metodo 1: come specificare la dimensione dell'input utilizzando la classe "modulo-controllo"?
IL "forma di controllo"La classe in bootstrap viene utilizzata per modellare i controlli di forma testuale come" "," "e" ". Fornisce uno stile generale agli elementi di input, come l'aspetto, il dimensionamento e altro ancora.
Per regolare il dimensionamento dei controlli della forma, il “forma-controllo-*"La classe viene utilizzata. L'asterisco "*" simboleggia la classe di dimensioni. Inoltre, il "forma-controllo-lg"Indica un grande controllo della forma,"forma-controllo-sm"Definisce la piccola forma di controllo e senza menzionare alcuna classe, la dimensione media verrà applicata al campo di input.
Esempio
In questo esempio, creeremo tre input che specificano il "forma di controllo"E diverso"forma-controllo-*" classi:
Produzione
Metodo 2: come specificare la dimensione dell'input usando la classe "input-group"?
IL "Group di input"La classe viene utilizzata per fornire uno stile generale ai gruppi di input. I gruppi di input si riferiscono ai campi di input con icona, pulsante, testo o più.
Per regolare le dimensioni del gruppo di input, la classe "Group input-*"Viene utilizzato, dove l'asterisco"*"Il simbolo indica la dimensione specificando il"Lg"Per grande,"SM"Per piccoli, altrimenti medi.
Esempio
L'esempio seguente rappresenta i due gruppi di input separati da un "
"Tag. Ognuno è costituito da un campo di input e un pulsante:
Produzione
Metodo 3: come specificare il dimensionamento dell'ingresso usando la classe "W" di larghezza?
La larghezza "W-*"La classe viene utilizzata per regolare la larghezza dei campi di input come segue:
- "W-25"Imposta la larghezza dell'input al 25% del genitore.
- "W-50"Imposta la larghezza dell'input al 50% del genitore.
- "W-75"Imposta la larghezza dell'input al 75% del genitore.
- "W-100"Imposta la larghezza dell'input al 100% del genitore.
Esempio
In questo esempio, i campi di input sono specificati con "forma di controllo" E "W-*" classi:
Produzione
Si può osservare che la larghezza specificata è stata applicata al campo di input aggiunto.
Conclusione
Per regolare le dimensioni dei campi di input testuale, il “forma-controllo-*"La classe è utilizzata. Per impostare il dimensionamento dei gruppi di input, il “Group input-*"La classe è utilizzata. Mentre il "W-*"La classe viene utilizzata per determinare la larghezza dei campi di input. L'asterisco "*"Indica le classi come"Lg","SM"E qualsiasi numero, rispettivamente. Questo post ha spiegato come regolare le dimensioni degli ingressi in bootstrap.