Bootstrap - Forms
Forms kan opbygges på tre måder med Bootstrap.
- Horisontal
- Tekst og felt placeret ved siden af hinanden
- Vertikal
- Tekst og felt placeret over / under hinanden
- Inline
- Flere tekst- / felt-par placeret vandret efter hinanden.
Horisontal
form |
<form action="" method="" class="horizontal">
her indsættes de relevante formgrupper
</form>
|
text |
<div class="form-group">
<label for="text01" class="col-sm-2 control-label">Tekst 01</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text01">
</div>
</div>
|
email |
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email adresse</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
|
password |
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
<p class="help-block">Min x bogstaver og tal<p>
|
file upload |
<div class="form-group">
<label for="file-upload" class="col-sm-2 control-label">File upload</label>
<div class="col-sm-10">
<input type="file-upload" id="file-upload">
</div>
</div>
|
submit |
<div class="form-group">
<class="col-sm-10 col-sm-push-2">
<input type="submit" class="btn btn-default" value="submit">
</div>
</div>
|
Vertikal
form |
<form action="" method="">
her indsættes de relevante formgrupper
</form>
|
text |
<div class="form-group">
<label for="text01">Tekst 01</label>
<input type="text" class="form-control" id="text01">
</div>
|
checkbox |
<div class="form-group">
<label for=""><input type="checkbox">tekst</label>
</div>
|
email |
<div class="form-group">
<label for="email">Email adresse</label>
<input type="email" class="form-control" id="email">
</div>
|
password |
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<p class="help-block">Min x bogstaver og tal<p>
|
file upload |
<div class="form-group">
<label for="file-upload">File upload</label>
<input type="file-upload" id="file-upload">
</div>
|
submit |
<div class="form-group">
<input type="submit" class="btn btn-default" value="submit">
</div>
|
Inline
En vertikal form vendes til inline alene ved at indsætte 'class="form-inline"' i form-taggen.
form |
<form action="" method="" class="form-inline">
her indsættes de relevante formgrupper
</form>
|
Andre selektorer
Blandt andre selektorer, der kan anvendes i forms er:
.has-xxx
Med .has-selektorerne kan farven på indtastningsfeltet styres. F.eks:
'form-group' kan tildeles farver med '.has-xxx' selektorer. F.eks:
<div class="form-group has-warning">
|
.control-label
'control-label' får label til at følge '.has-xxx' farvemæssigt.
<label for="password" class="control-label">Password</label>
|
col-xxx
Inddatafeltet vises i forms default som resten af skærmbredden / hele skærmbredden. Feltets bredde kan begrænses således:
<div class="form-group">
<label for="text01 col-sm-2 control-label">Tekst 01</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text01">
</div>
</div>
|
|