Bootstrap- vorms
Bootstrap se verstek instellings
Vormkontroles ontvang outomaties 'n bietjie globale stilering met Bootstrap:
Alle tekstuele <input>, <textarea>, en
<select>elemente met klas .form-controlhet 'n breedte van 100%.
Bootstrap-vormuitlegte
Bootstrap bied drie tipes vormuitlegte:
- Vertikale vorm (dit is verstek)
- Horisontale vorm
- Inlyn vorm
Standaardreëls vir al drie vormuitlegte:
- Draai etikette en vormkontroles in
<div class="form-group">(nodig vir optimale spasiëring) - Voeg klas
.form-controlby alle tekstuele<input>,<textarea>, en<select>elemente
Bootstrap vertikale vorm (verstek)
Die volgende voorbeeld skep 'n vertikale vorm met twee invoervelde, een merkblokkie en 'n indien-knoppie:
Voorbeeld
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap-inlynvorm
In 'n inlynvorm is al die elemente inlyn, linksbelyn, en die byskrifte is langsaan.
Let wel: Dit is slegs van toepassing op vorms binne kykpoorte wat ten minste 768px breed is!
Bykomende reël vir 'n inlynvorm:
- Voeg klas
.form-inlineby die<form>element
Die volgende voorbeeld skep 'n inlynvorm met twee invoervelde, een merkblokkie en een indien-knoppie:
Voorbeeld
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Wenk: As jy nie 'n etiket vir elke invoer insluit nie, sal skermlesers sukkel met jou vorms. Jy kan die etikette vir alle toestelle, behalwe skermlesers, versteek deur die
.sr-onlyklas te gebruik:
Voorbeeld
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Horisontale Vorm
’n Horisontale vorm beteken dat die byskrifte langs die invoerveld (horisontaal) op groot en medium skerms in lyn is. Op klein skerms (767px en onder), sal dit transformeer na 'n vertikale vorm (etikette word bo-op elke invoer geplaas).
Bykomende reëls vir 'n horisontale vorm:
- Voeg klas
.form-horizontalby die<form>element - Voeg klas
.control-labelby alle<label>elemente
Wenk: Gebruik Bootstrap se vooraf gedefinieerde roosterklasse om etikette en groepe vormkontroles in 'n horisontale uitleg te belyn.
Die volgende voorbeeld skep 'n horisontale vorm met twee invoervelde, een merkblokkie en een indien-knoppie.
Voorbeeld
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>