Category Archives: Bootstrap

#01 – Bootstrap – Básico – Forms

Chega de teoria! #3 – Form simples

Saga M&M (Mundo Mobile)

Aprenda como criar form utilizando o bootstrap. Vamos lá:

index.html


<form class="form-horizontal">

<div class="control-group">
            <label class="control-label" for="inputEmail">E-mail</label>

<div class="controls">
                <input id="inputEmail" type="text" placeholder="e-mail" />
            </div>

        </div>

        

<div class="control-group">
            <label class="control-label" for="inputSenha">Senha</label>

<div class="controls">
                <input id="inputSenha" type="password" placeholder="senha" />
            </div>

        </div>

        

<div class="control-group">

<div class="controls">
                <label class="checkbox"><input type="checkbox" /> lembrar senha</label>
                <button class="btn" type="submit">Go</button>
            </div>

        </div>

    </form>

Entendendo os recursos do bootstrap:

O elemento form recebe a classe .form-horizontal que define todo o estilo do form.

A classe .form-horizontal. é padrão, isso torna opcional a sua declaração.

Padrões de forms horizontais para cada item do form:

Todos os elementos label devem estar dentro da classe .control-group.

Os label devem receber a classe .control-label, exceto se o label é utilizado para encapsular um checkbox, neste caso é necessário adicionar a classe .checkbox.

Todos os controles de form (input, select, textarea,…) devem estar dentro da classe .controls.

Os botões precisam receber a classe .btn.

Altere a declaração da classe no form:


<form class="well">

O resultado no Chrome:

boot_form

Então é isso treine bastante, e fiquei familiarizado com estes novos recursos.

Ok! Um pouco sobre o BOOTSTRAP.