ULTIMATE PHP Blog

Conheça 15 Ferramentas Essenciais Para PHP
15 Ferramentas Essenciais Para PHP

Coloque seu e-mail abaixo e baixe agora um PDF 100% gratuito mostrando 15 ferramentas indispensáveis para PHP

Fique tranquilo. Odeio spam tanto quanto você :)

Bootstrap: como criar layouts responsivos em poucos minutos

Bootstrap: como criar layouts responsivos em poucos minutos

O Bootstrap é uma ferramenta espetacular para criar layouts responsivos sem precisar conhecer muito sobre CSS.

Muitos programadores (especialmente de back-end) têm muita dificuldade com layouts e CSS. E por isso essa ferramenta é a solução perfeita para criamos layouts simples, bonitos e funcionais, sem gastar muito tempo com CSS.

Neste artigo, vou mostrar o essencial sobre esse framework incrível. Depois de conhecer o Bootstrap, você nunca mais vai querer fazer um site ou sistema web sem ele!

O que é o Bootstrap

O Twitter Bootstap é o framework para font-end mais famoso e difundido nos últimos anos.

Ele é intuitivo e poderoso, tendo sido desenvolvido mobile-first, ou seja, pensando primeiramente em dispositivos móveis (smartphones e tablets). Dessa forma, o framework tem ótima compatibilidade com todos os tamanhos de tela.

O Bootstrap utiliza HTML, CSS e Javascript (este último sendo opcional, necessário para apenas alguns efeitos visuais e interações com usuários).

Por que usar o Bootstrap

Existem diversas razões para usá-lo. Vamos a algumas delas.

  • Abordagem mobile-first: todo o framework foi desenvolvido com foco principal em dispositivos móveis, com suporte total a todos os tamanhos de tela, incluindo desktops;
  • Suporte dos navegadores: é compatível com todos os navegadores mais usados atualmente (Google Chrome, Safari, Firefox, Opera, Internet Explorer e Edge);
  • Facilidade de uso: basta conhecer o básico de HTML e CSS para começar a usar o Bootstrap;
  • Design responsivo: é totalmente responsivo, ou seja, os layouts serão compatíveis com vários tamanhos de tela, tanto de dispositivos móveis quanto computadores desktop;
  • Grande facilidade para criação de layouts por programadores e desenvolvedores;
  • Diversos componentes nativos muito fáceis de usar e com aspecto visual muito moderno e atraente;
  • E o melhor: gratuito e de código aberto! 😀

Baixando o Bootstrap

Para baixar o Bootstrarp, acesso o site oficial: http://getbootstrap.com

Você verá a tela a seguir: Clique em Download Bootstrap, como indicado na imagem.

Em seguida será exibida uma outra tela, com algumas opções de download.

Clique novamente em Download Bootstrap, como indicado na imagem a seguir. Essa opção fará o download dos arquivos já compilados. Caso queira o código-fonte ou os arquivos SASS para compilar, você pode baixar uma das outras versões.

Estrutura de Arquivos

Após baixar e descompactar o arquivo, você verá esta estrutura:

.
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── index.html
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js

É possível notar que existem arquivos CSS e Javascript compilados (bootstrap.css e bootstrap.js), bem como arquivos CSS e Javascript compilados e minificados (bootstrap.min.css e bootstrap.min.js).

Na pasta fonts, encontramos as fontes do Glyphicons, usadas pelo Bootstrap. Também existe o tema do Bootstrap. Ambos são opcionais.

Estrutura HTML básica

Este é a estrutura HTML básica para um layout usando o Bootstrap:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!-- CSS do Bootstrap (obrigatório) -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <div class="container">
         <h1>Olá, Mundo!</h1>
      </div>
      

      <!-- jQuery (obrigatório caso você use o Javascript do Bootstrap) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      
      <!-- Javascript do Bootstrap (opcional) -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

O uso da biblioteca Javascript do Bootstrap é opcional. Mas se você optar por usá-la, precisa incluir antes dela a biblioteca jQuery.

O sistema Grid do Bootstrap

Um sistema de Grid (traduzido livremente como “grade”) consiste em um conjunto de linhas e colunas, semelhante a uma tabela. Segundo a documentação do Bootstrap:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Esse sistema de grid consiste em 12 colunas, que podem ser divididas de forma diferente, conforma o tamanho da tela. Essa divisão é que proporciona a responsividade do Bootstrap.

Por exemplo, em telas grandes, você pode exibir as 12 colunas. Em um tela de celular, essas 12 colunas podem ser dividias em 3 linhas de 4 colunas. Para usar esse sistema de grids da forma correta, precisamos seguir algumas “regras”:

  • Todas as linhas devem estar dentro de um elemento com a classe container, para correto alinhamento;
  • Para criar uma linha, use uma elemento HTML com a classe row;
  • Todo conteúdo deve estar dentro de colunas e elas devem ser os únicos elementos filhos de um linha (row);
  • Cada coluna é criada com um elemento HTML com a classe col-<tamanho_tela>-<numero_colunas>, onde <tamanho_tela> é a abreviação referente ao tamanho da tela que está sendo usada para acessar o site e <numero_colunas> é o número de colunas que o elemento deve ocupar.

Os tamanhos de tela podem ser:

  • xs (extra small): telas muito pequenas, como de smartphones;
  • sm (small): telas de tablets na vertical;
  • md (medium): telas de tablets na horizontal;
  • lg (large): telas de computadores desktop.

A quantidade de colunas em uma linha deve somar sempre 12.

Por exemplo, se quiser um layout de 2 colunas, deverá criar dois elementos que ocupem 6 colunas. Se quiser um layout de 3 colunas, use 3 elementos ocupando 4 colunas.

Exemplos de Grid com Bootstrap

Vamos a um simples exemplo para demonstrar o funcionamento do sistema de grid.

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!-- CSS do Bootstrap (obrigatório) -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <div class="container">
         <div class="row">
            <div class="col-xs-12">
               Linha com 12 colunas em qualquer dispositivo
            </div>
         </div>

         <div class="row">
            <div class="col-xs-4">
               coluna 1
            </div>
            <div class="col-xs-4">
               coluna 2
            </div>
            <div class="col-xs-4">
               coluna 3
            </div>
         </div>

         <div class="row">
            <div class="col-md-4 col-sm-12">
               coluna 1
            </div>
            <div class="col-md-4 col-sm-12">
               coluna 2
            </div>
            <div class="col-md-4 col-sm-12">
               coluna 3
            </div>
         </div>
      </div>
      

      <!-- jQuery (obrigatório caso você use o Javascript do Bootstrap) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      
      <!-- Javascript do Bootstrap (opcional) -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

A primeira linha terá sempre 12 colunas, independente do dispositivo. Por isso usamos o tamanho xs.

As duas linhas seguintes são iguais em dispositivos de tela grande, mostrando 3 colunas. Porém, em dispositivos menores, a segunda linha será dividida, mostrando uma coluna abaixo da outra. Isso acontece pois usamos a classe col-md-4, que faz com que a div ocupe 4 colunas em dispositivos de tela grande e média. Mas também usamos col-sm-12, que diz que, em dispositivos pequenos e muito pequenos, o elemento deve ocupar 12 colunas, ou seja, a linha inteira.

NOTA: Para testar os tamanhos de tela, basta reduzir o tamanho da janela do navegador. Não é necessário abrir os arquivos em um celular ou tablet. O Google

Chrome também permite simular diversos dispositivos, por meio do Inspector.

Imagens Responsivas

Para tornar qualquer imagem responsiva, adicione a classe img-responsive à tag <img>. Isso aplicará o CSS max-width: 100% e height: auto. Dessa forma, qualquer imagem será redimensionada de forma proporcional, conforme o tamanho da tela.

Tabelas Estilizadas e Responsivas

Para criar tabelas, adicione a classe table à tag table. Isso fará com que a tabela ocupe a largura toda.

Também existem outras classes que podem ser adicionadas, como table-striped, para alternar a cor de cada linha, facilitando a visualização, ou table-bordered, para criar tabelas com bordas.

Para tornar uma tabela responsiva, coloque-a toda dentro de uma div com a classe table-responsive. Dessa forma, uma barra de rolagem horizontal será gerada automaticamente, sempre que necessário.

Vamos a alguns exemplos, para visualizar melhor.

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!-- CSS do Bootstrap (obrigatório) -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <div class="container">
         <table class="table">
            <thead>
               <tr>
                  <th>Coluna 1</th>
                  <th>Coluna 2</th>
                  <th>Coluna 3</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>conteúdo 1</td>
                  <td>conteúdo 2</td>
                  <td>conteúdo 3</td>
               </tr>
            </tbody>
         </table>

         <table class="table table-striped">
            <thead>
               <tr>
                  <th>Coluna 1</th>
                  <th>Coluna 2</th>
                  <th>Coluna 3</th>
                  <th>Coluna 4</th>
                  <th>Coluna 5</th>
                  <th>Coluna 6</th>
                  <th>Coluna 7</th>
                  <th>Coluna 8</th>
                  <th>Coluna 9</th>
                  <th>Coluna 10</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>conteúdo 1</td>
                  <td>conteúdo 2</td>
                  <td>conteúdo 3</td>
                  <td>conteúdo 4</td>
                  <td>conteúdo 5</td>
                  <td>conteúdo 6</td>
                  <td>conteúdo 7</td>
                  <td>conteúdo 8</td>
                  <td>conteúdo 9</td>
                  <td>conteúdo 10</td>
               </tr>
               <tr>
                  <td>conteúdo 1</td>
                  <td>conteúdo 2</td>
                  <td>conteúdo 3</td>
                  <td>conteúdo 4</td>
                  <td>conteúdo 5</td>
                  <td>conteúdo 6</td>
                  <td>conteúdo 7</td>
                  <td>conteúdo 8</td>
                  <td>conteúdo 9</td>
                  <td>conteúdo 10</td>
               </tr>
            </tbody>
         </table>

         <div class="table-responsive">
            <table class="table table-striped">
               <thead>
                  <tr>
                     <th>Coluna 1</th>
                     <th>Coluna 2</th>
                     <th>Coluna 3</th>
                     <th>Coluna 4</th>
                     <th>Coluna 5</th>
                     <th>Coluna 6</th>
                     <th>Coluna 7</th>
                     <th>Coluna 8</th>
                     <th>Coluna 9</th>
                     <th>Coluna 10</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>conteúdo 1</td>
                     <td>conteúdo 2</td>
                     <td>conteúdo 3</td>
                     <td>conteúdo 4</td>
                     <td>conteúdo 5</td>
                     <td>conteúdo 6</td>
                     <td>conteúdo 7</td>
                     <td>conteúdo 8</td>
                     <td>conteúdo 9</td>
                     <td>conteúdo 10</td>
                  </tr>
                  <tr>
                     <td>conteúdo 1</td>
                     <td>conteúdo 2</td>
                     <td>conteúdo 3</td>
                     <td>conteúdo 4</td>
                     <td>conteúdo 5</td>
                     <td>conteúdo 6</td>
                     <td>conteúdo 7</td>
                     <td>conteúdo 8</td>
                     <td>conteúdo 9</td>
                     <td>conteúdo 10</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
      

      <!-- jQuery (obrigatório caso você use o Javascript do Bootstrap) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      
      <!-- Javascript do Bootstrap (opcional) -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

A primeira tabela é só para ilustrar o resultado da aplicação da classe table. Note que a tabela ocupa a largura toda. Experimente retirar essa classe, e verá a diferença.

As duas últimas tabelas são iguais e também mostram o efeito da classe table-striped, que alterna a cor de cada linha. A principal diferença é que a segunda está dentro de uma div com a classe table-responsive. Isso faz com que o layout não seja quebrado em telas menores, criando uma barra de rolagem horizontal.

Documentação e links de referência

Abaixo deixo alguns links de referência para estudo e consulta

Aprenda tudo sobre Bootstrap

Eu apresentei apenas os recursos básicos do Bootstrap. Existem inúmeras outras funcionalidades muito úteis, incluíndo ícones em CSS, componentes Javascript, como janelas modais, collapse, abas etc.

Se você quiser aprender tudo sobre Bootstrap, clique aqui e conheça o curso Certificação Bootstrap.

Esse é um dos cursos mais completos sobre Bootstrap que conheço. Você vai aprender todos os principais recursos desse framework incrível!

Aproveite a oportunidade para descobrir as melhores dicas sobre ele. Você vai se apaixonar pelo Bootstrap e nunca mais vai querer viver sem ele!

Matricule-se agora no curso Certificação Bootstrap!

 

Aprenda Tudo Sobre Bootstrap

Aprenda Bootstrap do jeito certo, com Npm, Gulp, Bower, Sass e Design Responsivo

Assista ao vídeo

Vídeo Certificação Bootstrap

Assistir Vídeo Grátis
Sobre Roberto Beraldo
Desenvolvedor Web desde 2007, com foco em PHP. Criador do Curso ULTIMATE PHP e autor do Blog do Beraldo (rberaldo.com.br), onde compartilha dicas sobre PHP e Programação em geral.