Bootstrap- vorm-insette
Ondersteunde vormkontroles
Bootstrap ondersteun die volgende vormkontroles:
- insette
- teksarea
- merkblokkie
- radio
- kies
Bootstrap-invoer
Bootstrap ondersteun al die HTML5-invoertipes: teks, wagwoord, datumtyd, datum-plaaslik, datum, maand, tyd, week, nommer, e-pos, url, soektog, tel en kleur.
Let wel: Insette sal NIE volledig gestileer word as hul tipe nie behoorlik verklaar is nie!
Die volgende voorbeeld bevat twee invoerelemente; een van tipe teks en een van tipe wagwoord:
Voorbeeld
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap Textarea
Die volgende voorbeeld bevat 'n teksarea:
Voorbeeld
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap-merkblokkies
Merkblokkies word gebruik as jy wil hê dat die gebruiker enige aantal opsies uit 'n lys voorafopgestelde opsies moet kies.
Die volgende voorbeeld bevat drie merkblokkies. Die laaste opsie is gedeaktiveer:
Voorbeeld
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Gebruik die .checkbox-inlineklas as jy wil hê dat die merkblokkies op dieselfde reël moet verskyn:
Voorbeeld
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Bootstrap-radioknoppies
Radioknoppies word gebruik as jy die gebruiker wil beperk tot net een keuse uit 'n lys van voorafingestelde opsies.
Die volgende voorbeeld bevat drie radioknoppies. Die eerste opsie is by verstek gemerk en die laaste opsie is gedeaktiveer:
Voorbeeld
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Gebruik die .radio-inlineklas as jy wil hê dat die radioknoppies op dieselfde reël moet verskyn:
Voorbeeld
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Bootstrap-kieslys
Kieslyste word gebruik as jy die gebruiker wil toelaat om uit verskeie opsies te kies.
Die volgende voorbeeld bevat 'n aftreklys (kieslys):
Voorbeeld
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>