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.

#02 – Bootstrap – Básico – Referências

Chega de teoria! #2 – Refs

Saga M&M (Mundo Mobile)

A primeira coisa que deve ser feita na criação de uma webapp é fazer as referências aos arquivos. Vamos lá:

web.html

<!DOCTYPE html>
<html>
    <head>
        <!-- css do bootstrap -->
        link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"
    </head>
    
    <body>
        <!-- jQuery eh requisito do js localmente-->
        script src="bootstrap/js/ jquery-2.2.0.min.js"
        
        <!-- js bootstrap -->
        script src="bootstrap/js/bootstrap.min.js"
    </body>
</html>

Note a referência ao CSS bootstrap.min.css neste ambiente. Podemos também criar uma estrutura diferente desta.

Em seguida, faço a referência ao js do bootstrap e jquery no mesmo local (bootstrap/js).

Referência remota

É possível também referenciar remotamente os arquivo do jquery:

script src="http://code.jquery.com/jquery-latest.js"

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

Ok! Um pouco sobre o BOOTSTRAP.