Bootstrap 2.3.2: Guia de primeiros passos

Bootstrap é um Framework CSS que se tornou muito popular em toda a rede. Seus estilos responsivo são vistos nas redes sociais Tuenti y Twitter. O uso disso nos economiza muito tempo ao desenvolver um aplicativo da web, uma vez que nos economiza todo o trabalho e esforço envolvido na criação de um estilo de página limpa adequado para todos os dispositivos. Consultando os estilos utilizados neste framework, perceberemos que nos são familiares, visto que hoje muitos sites já os implementaram.

A estrutura

Para que nosso site seja acessível em celulares e tablets, teremos que usar a estrutura fluida que o Bootstrap nos oferece. O uso desta estrutura é muito simples, tudo é baseado em elementos palmo isso vai nos ajudar layout nosso web design. Mais tarde, quando acessamos este design de um smartphones o comprimido, isso se adaptará automaticamente ao referido dispositivo, melhorando consideravelmente a qualidade da navegação. Vamos usar o palmo com classes em divisões lógicas dentro da estrutura de fluido, ou seja:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Onde o número 2 representa o tamanho do vão. Cada linha contém espaço suficiente para 12 vãos de tamanho 1 ou 2 de tamanho 6, que podem ser distribuídos de acordo com sua preferência. Uma vez que o espaço de uma linha é excedido, ele irá descer para a próxima automaticamente, permitindo-nos usar um palmo tamanho 12 para criar uma quebra de linha. Se quiséssemos pular alguns palmo ao criar um, ou seja, comece de 4 palmoe aplicar um tamanho de 3, usaríamos este código:

<div class="span2 offset4">Contenido</div>

Isso permite que a divisão pule quatro vãos antes de exibir o conteúdo. Podemos usar isso à nossa vontade, pulando o que queremos com nosso código.

Design diferente para cada dispositivo

Para aplicar um design diferente para cada tipo de dispositivo, diremos cada divisão lógica para qual dispositivo ele é orientado, usando as seguintes classes:

Desta forma, podemos mostrar um design totalmente diferente para cada dispositivo com o mesmo URL.

botões

O Bootstrap nos oferece um repertório limpo de botões coloridos, seu uso é muito simples:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

onde btn btn-success refere-se à cor do botão, para alterá-la teremos apenas que substituí-la pelas classes mostradas na imagem anterior.

Instalando o Bootstrap

Para a instalação deste framework CSS, baixaremos o zip do link que deixarei no final do post, e escreveremos o seguinte código no cabeçalho do nosso arquivo HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Depois de nos certificarmos de que os arquivos CSS e JS estão na mesma pasta que nosso arquivo HTML, podemos começar a projetar nosso site responsivo.

Mais informação - Validação de Formulário

Baixar - Bootstrap: CSS Framework