Dimensionamento dell'input Bootstrap
Inserisci il dimensionamento nei moduli
Imposta le altezze degli elementi di input usando classi come .input-lge .input-sm.
Imposta le larghezze degli elementi usando classi di colonne della griglia come .col-lg-*e .col-sm-*.
Dimensioni in altezza
Gli esempi seguenti mostrano elementi di input con altezze diverse:
Esempio
<form>
<div class="form-group">
<label for="inputsm">Small
input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large
input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
Puoi ridimensionare rapidamente etichette e controlli modulo all'interno di un modulo orizzontale aggiungendo .form-group-*all'elemento <div class="form-group">:
Esempio
<div class="form-group form-group-lg">
Puoi anche ridimensionare rapidamente tutti gli input e altri elementi all'interno di un .input-groupcon le classi .input-group-smo :.input-group-lg
Esempio
<div class="input-group input-group-lg">
Dimensionamento della colonna
Gli esempi seguenti mostrano elementi di input con larghezze diverse utilizzando
.col-xs-*classi diverse:
Esempio
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
Testo guida
Usa la .help-blockclasse per aggiungere un testo della guida a livello di blocco nei moduli:
Esempio
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
<span class="help-block">This is some help text...</span>
</div>