Bootstrap's Default Settings
Controles de formulários individuais recebem automaticamente algum estilo global com Bootstrap .
Todos textuais <input>, <textarea> e <select> elementos com class="form-control" são definidas como width: 100%; por padrão.
Regras padrão para Bootstrap formas:
- Adicionar role="form" ao <form> elemento (ajuda a melhorar a acessibilidade para as pessoas que utilizam leitores de tela)
- Enrole rótulos e controles de formulários em um <div> elemento com class="form-group" (necessário para o espaçamento ideal)
- Adicionar class="form-control" a todos textuais <input>, <textarea> e <select> elementos
O exemplo a seguir cria um formulário Bootstrap simples com dois campos de entrada, uma caixa de seleção, e um botão de envio:
Exemplo Form Bootstrap
<form role="form">
<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> Tente você mesmo " <form> Classes
| Classe | Descrição | Exemplo |
|---|---|---|
| .form-inline | Faz um <form> alinhado à esquerda com controles inline-bloco (Isso só se aplica a formas dentro de viewports que são pelo menos 768px de largura) | Tente |
| .form-horizontal | Alinha rótulos e grupos de controlos de formulário em um layout horizontal | Tente |