Twitter Bootstrap

Framework front-end para design responsivo

Design responsivo é um contéudo ser flexivel o bastante para se adaptar aos diferentes dispositivos pelos quais possa ser acessado. Desenvolver uma página que possa ser acessada tanto de um PC ou Tablet e até um smartphone, é ter uma interface que possa ser adaptada de acordo com a resolução da tela, ao tipo de interface touch ou mouse. O site irá “reagir” adaptando a largura e comprimento da página coincidindo com o tamanho do seu dispositivo.

Onde encontrar a documentação :

http://twitter.github.com/bootstrap/

Exemplos de sites feitos com bootstrap :

http://www.webappers.com/

http://builtwithbootstrap.com/

Um conjunto de estilos CSS irão definir o layout da página de acordo com cada interface, para integrar sua página ao bootstrap você deve baixar o arquivo bootstrap.zip, dentro do arquivo zip temos os estilos CSS, as imagens, ícones e javascripts que serão usados.

Segue abaixo um exemplo de como utilizar em uma página:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Twitter Bootstrap</title>
 
    <!-- JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
 
    <!-- TWITTER BOOTSTRAP CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 
    <!-- TWITTER BOOTSTRAP JS -->
    <script src="js/bootstrap.min.js"></script>
 
</head>
<body>
    <!-- CLASSE QUE DEFINE O CONTAINER COMO FLUIDO (100%) -->
    <div class="container-fluid">
        <!-- CLASSE PARA DEFINIR UMA LINHA -->
        <div class="row-fluid">
            <!-- COLUNA OCUPANDO 2 ESPAÇOS NO GRID -->
            <div class="span2">
                Side bar
            </div>
            <!-- COLUNA OCUPANDO 10 ESPAÇOS NO GRID -->
            <div class="span10">
                Conteúdo Geral
            </div>
        </div>
    </div>
</body>
</html>

Abaixo segue um exemplo de página em diferentes dispositivos:

Formato Desktop
Formato em um desktop
Formato Tablet
Formato tablet
Formato Smarthphone
Format para smathphone

Segue abaixo uma video aula do canal do Welsiton Ferreira, e nesse vídeo de recomendação apresentando a ferramenta Twitter Bootstrap