Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Text Input
<div class='form-group'>
<label>Text Input</label>
<input class='form-control'>
<p class='help-block'>Beispiel für einen Hilfetext auf Blockebene.</p>
</div>
1. Ausgabe für Text Input
Beispiel für einen Hilfetext auf Blockebene.
2. Code für Text Input mit Placeholder
<div class='form-group'>
<label>Text Input mit Placeholder</label>
<input class='form-control' placeholder='Enter text'>
</div>
2. Ausgabe für Text Input mit Placeholder
3. Code für Static Control
<div class='form-group'>
<label>Static Control</label>
<p class='form-control-static'>email@example.com</p>
</div>
3. Ausgabe für Static Control
email@example.com
4. Code für File input
<div class='form-group'>
<label>File input</label>
<input type='file'>
</div>
4. Ausgabe für File input
5. Code für Text area
<div class='form-group'>
<label>Text area</label>
<textarea class='form-control' rows='3'></textarea>
</div>
5. Ausgabe für Text area
6. Code für Checkboxes
<div class='form-group'>
<label>Checkboxes</label>
<div class='checkbox'>
<label>
<input type='checkbox' value=''>Checkbox 1
</label>
</div>
<div class='checkbox'>
<label>
<input type='checkbox' value=''>Checkbox 2
</label>
</div>
<div class='checkbox'>
<label>
<input type='checkbox' value=''>Checkbox 3
</label>
</div>
</div>
6. Ausgabe für Checkboxes
7. Code für Inline Checkboxes
<div class='form-group'>
<label>Inline Checkboxes</label>
<label class='checkbox-inline'>
<input type='checkbox'>1
</label>
<label class='checkbox-inline'>
<input type='checkbox'>2
</label>
<label class='checkbox-inline'>
<input type='checkbox'>3
</label>
</div>
7. Ausgabe für Inline Checkboxes
8. Code für Radio Buttons
<div class='form-group'>
<label>Radio Buttons</label>
<div class='radio'>
<label>
<input type='radio' name='optionsRadios' id='optionsRadios1' value='option1' checked>Radio 1
</label>
</div>
<div class='radio'>
<label>
<input type='radio' name='optionsRadios' id='optionsRadios2' value='option2'>Radio 2
</label>
</div>
<div class='radio'>
<label>
<input type='radio' name='optionsRadios' id='optionsRadios3' value='option3'>Radio 3
</label>
</div>
</div>
8. Ausgabe für Radio Buttons
9. Code für Inline Radio Buttons
<div class='form-group'>
<label>Inline Radio Buttons</label>
<label class='radio-inline'>
<input type='radio' name='optionsRadiosInline' id='optionsRadiosInline1' value='option1' checked>1
</label>
<label class='radio-inline'>
<input type='radio' name='optionsRadiosInline' id='optionsRadiosInline2' value='option2'>2
</label>
<label class='radio-inline'>
<input type='radio' name='optionsRadiosInline' id='optionsRadiosInline3' value='option3'>3
</label>
</div>
9. Ausgabe für Inline Radio Buttons
10. Code für Selects
<div class='form-group'>
<label>Selects</label>
<select class='form-control'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
10. Ausgabe für Selects
11. Code für Multiple Selects
<div class='form-group'>
<label>Multiple Selects</label>
<select multiple class='form-control'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
11. Ausgabe für Multiple Selects
12. Code für Buttons
<button type='submit' class='btn btn-default'>Submit Button</button>
<button type='reset' class='btn btn-default'>Reset Button</button>
12. Ausgabe für Buttons
13. Code für Input Groups
<form role='form'>
<div class='form-group input-group'>
<span class='input-group-addon'>@</span>
<input type='text' class='form-control' placeholder='Username'>
</div>
<div class='form-group input-group'>
<input type='text' class='form-control'>
<span class='input-group-addon'>.00</span>
</div>
<div class='form-group input-group'>
<span class='input-group-addon'><i class='fa fa-eur'></i>
</span>
<input type='text' class='form-control' placeholder='Font Awesome Icon'>
</div>
<div class='form-group input-group'>
<span class='input-group-addon'>$</span>
<input type='text' class='form-control'>
<span class='input-group-addon'>.00</span>
</div>
<div class='form-group input-group'>
<input type='text' class='form-control'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'><i class='fa fa-search'></i>
</button>
</span>
</div>
</form>
13. Ausgabe für Input Groups
14. Code für Form Validation States
<form role='form'>
<div class='form-group has-success'>
<label class='control-label' for='inputSuccess'>Input with success</label>
<input type='text' class='form-control' id='inputSuccess'>
</div>
<div class='form-group has-warning'>
<label class='control-label' for='inputWarning'>Input with warning</label>
<input type='text' class='form-control' id='inputWarning'>
</div>
<div class='form-group has-error'>
<label class='control-label' for='inputError'>Input with error</label>
<input type='text' class='form-control' id='inputError'>
</div>
</form>
14. Ausgabe für Form Validation States
15. Code für Disabled Form States
<form role='form'>
<fieldset disabled>
<div class='form-group'>
<label for='disabledSelect'>Disabled input</label>
<input class='form-control' id='disabledInput' type='text' placeholder='Disabled input' disabled>
</div>
<div class='form-group'>
<label for='disabledSelect'>Disabled select menu</label>
<select id='disabledSelect' class='form-control'>
<option>Disabled select</option>
</select>
</div>
<div class='checkbox'>
<label>
<input type='checkbox'>Disabled Checkbox
</label>
</div>
<button type='submit' class='btn btn-primary'>Disabled Button</button>
</fieldset>
</form>
15. Ausgabe für Disabled Form States