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

2 comentários sobre “Twitter Bootstrap

  1. Muito Show! Você tem o HTML desse exemplo?

  2. O Bootstrap é uma mão na roda na hora de desenvolver um layout responsivo. Não precisamos “quebrar cabeça” com grids, porcentagens, etc.
    Claro, devemos ter bom senso na hora de utilizar
    Outro detalhe que acredito que sempre vale a pena dizer: frameworks somente para quem já domina ou entende sobre o desenvolvimento web; jamais recomendo para quem está “engatinhando” com HTML/CSS (no mínimo)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s