Artigos HTML e CSS Twitter Bootstrap: Aumentando sua produtividade

Quando vamos desenvolver um projeto web, um sistema por exemplo, é importante pensar em navegação, desenvolver padrões e estar preparado para novas telas e mudanças. A solução é criar um "tema" para sua interface, ou seja, criar todos os elementos (botões, formulários) e chama-los quando necessário. Isso permite que novas telas sejam criadas com facilidade e também torna seu trabalho mais produtivo. O Twitter Bootstrap entra ai para te ajudar a ter produtividade, de maneira bonita e flexível, eliminando processos trabalhosos permitindo que você tenha mais foco no que está desenvolvendo.

Nota: Página oficial do Bootstrap

O Twitter Bootstrap foi projetado para auxiliar pessoas de todos os níveis, seja você um desenvolvedor client-side ou back-end. Ele foi desenvolvido para navegadores modernos, mas os antigos não ficam de fora não, ele funciona do Internet Explorer 7 em diante.

Saiba mais: Curso Gratuito de Bootstrap

Responsive web design, ótima documentação, dezenas de componentes funcionais totalmente pronto para uso, sem falar nos plugins em jQuery. É interessante dizer também que ele é amigável com a tecla delete. E tem mais, o projeto é open-source, o que significa que você pode colaborar para torna-lo cada vez melhor. Veja um Tumblr (não oficial) com sites que foram desenvolvidos com auxilio do Twitter Bootstrap.

Desvantagens

Muita gente pode não concordar com a ideia de ter componentes “prontos” em um projeto, eu também concordo, porem o Twitter Bootstrap de “segunda impressão” se mostrou muito eficiente e sem desvalorizar o trabalho de um UX Designer.

A desvantagem é que querendo ou não você precisa se basear na documentação dele, e isso pra muita gente pode ser uma barreira, vamos ver em seguida exemplos práticos e tudo ficará claro.

Começando a usar

A parte mais interessante do artigo, vamos começar a usar! Primeiro vou mostrar um exemplo prático que com simples passos já nos permite criar belas interfaces. Em seguida vamos falar sobre a personalização dos componentes através do lessCSS.

  1. Baixando o arquivo no github;
  2. Vamos conhecer os diretórios:

    • Pasta CSS: encontra-se os arquivos de estilo.
    • Pasta JS: contem os arquivos bootstrap.js e bootstrap_min.js que são todos os componentes js.
    • Pasta IMG: onde fica os sprites de ícones

Até ai nada feito, mas você já tem sua interface 50% pronta! Crie um arquivo HTML (índex.html) chamando os arquivos js (inclua o jQuery) e css:


<!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>
Listagem 1. Arquivo index.html

Agora já temos uma estrutura pronta, com sidebar e container geral. Perceba que o código está comentado, e foi baseado em um exemplo da própria documentação que pode ser encontrada no site oficial. O sistema de grids dele é bem simples e fácil de usar.

Os elementos de texto (h1, h2, parágrafos) já estão definidos e vamos usá-los agora:


<!-- COLUNA OCUPANDO 2 ESPAÇOS NO GRID -->
<div class="span2">
  <h2> Menu </h2>
</div>
<!-- COLUNA OCUPANDO 10 ESPAÇOS NO GRID -->
<div class="span10">
  <h1> Página Inicial </h1>
</div>
Listagem 2. Usando títulos

Vamos criar um menu agora:


<!-- COLUNA OCUPANDO 2 ESPAÇOS NO GRID -->
<div class="span2">
  <h2> Menu </h2>
<!--ADICIONADO A TAG UL (LISTA) COM CLASSES DO TWITTER BOOTSTRAP.-->
  <ul class="nav nav-tabs nav-stacked">
<!--ADICIONADO TAGS LI COM ICONES DO TWITTER BOOTSTRAP.-->
    <li>
      <a href="#">
        <i class="icon-star"></i>
        Lorem ipsum
      </a>
    </li>
    <li class="active">
      <a href="#">
        <i class="icon-star"></i>
        Lorem ipsum
      </a>
    </li>
    <li>
      <a href="#">
        <i class="icon-star"></i>
        Lorem ipsum
      </a>
    </li>
  </ul>
</div>
Listagem 3. Criando um menu

No menu foram usados os estilos de navegação e perceba que o segundo item da lista recebe uma classe chamada ‘active’ que deixa ele em destaque. Coloquei também ícones para ilustrar o menu. Fácil?

Veja o que podemos fazer em poucos minutos:


<!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>
    <!-- HEADER -->
    <header class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <h2>Header</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- / HEADER -->

    <!-- 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">
          <h2> Menu </h2>
          <ul class="nav nav-tabs nav-stacked">
            <li>
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
            <li class="active">
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon-star"></i>
                Lorem ipsum
              </a>
            </li>
          </ul>
        </div>
        <!-- COLUNA OCUPANDO 10 ESPAÇOS NO GRID -->
        <div class="span10">
          <div class="well">
            <h1> Página Inicial </h1>
            <hr />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <hr />          
            <button class="btn btn-primary btn-large">Clique aqui exemplo!</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Listagem 4. Exemplo completo

Dá para fazer muita coisa e maneira simples e rápida!

Colaboração e Personalização

É claro que você pode e deve colaborar com o projeto, basta acessar o site oficial. E no mesmo local você consegue baixar o Twitter Bootstrap em lessCSS! O que permite uma personalização completa de todo o estilo do site, grids e todos os componentes. Caso você deseje ver mais exemplos de uso, visite o site oficial.

Agradeço a oportunidade de escrever aqui e continuem acompanhando que falaremos mais sobre Twitter Bootstrap!

Links Úteis

Saiba mais sobre Bootstrap ;)

  • O que é Bootstrap? - Neste curso conheceremos o Bootstrap, um framework para desenvolvimento web front-end (HTML, CSS e JavaScript) que adiciona às páginas recursos de responsividade, diversos componentes de interface e estilos leves e modernos.
  • Introdução ao Bootstrap 3 - Veja neste artigo uma breve introdução ao Framework Twiter Bootstrap 3. Vejam as principais novidades e mudanças incluídas nesta nova versão do framework.
  • Conhecendo o ScrollSpy do Bootstrap - Neste DevCast conheceremos o plugin ScrollSpy, que troca o item em destaque na barra de navegação do Bootstrap baseado na posição da barra de rolagem do navegador.