Bootstrap 4 -vorminsette
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 type="text"en een van
type="password". Soos ons in die Vorms-hoofstuk genoem het, gebruik ons die .form-controlklas om insette met volle breedte en behoorlike vulling, ens.
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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Voorbeeld verduidelik
Gebruik 'n omhulselelement class="form-check"om behoorlike kantlyne vir etikette en merkblokkies te verseker.
Voeg die .form-check-labelklas by om elemente te benoem, en .form-check-inputom merkblokkies behoorlik binne die .form-checkhouer te styl.
Inlyn-merkblokkies
Gebruik die .form-check-inlineklas as jy wil hê dat die merkblokkies op dieselfde reël moet verskyn:
Voorbeeld
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
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 laaste opsie is gedeaktiveer:
Voorbeeld
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Soos met merkblokkies, gebruik die .form-check-inlineklas as jy wil hê dat die radioknoppies op dieselfde lyn moet verskyn:
Voorbeeld
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
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>
Vormbeheergrootte
Verander die grootte van die vormkontrole met .form-control-smof .form-control-lg:
Voorbeeld
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Vormbeheer met gewone teks
Gebruik die .form-control-plaintextas jy die invoerveld as gewone teks wil stileer:
Voorbeeld
<input type="text" class="form-control-plaintext">
Vormbeheerlêer en -reeks
Voeg die .form-control-rangeklas by input type"range"of .form-control-fileby input type"file"om 'n reeksbeheer of 'n lêerveld met volle breedte te styl:
Voorbeeld
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">