(0**21) 991 48 04 53



Design Responsivo com Twitter Bootstrap

Layout Responsivo com HTML5 e CSS3

Parte 1

Dentre os frameworks disponíveis que ajudam a criar sites responsivos está o Twitter Bootstrap. Para desenvolver uma página flexível é necessário o uso de CSS3 com as media-queries ( @media )

As media-queries são suportados no IE9 + e praticamente todos os outros navegador, incluindo móveis. Para as versões IE7 e 8 deve-se usar o script respond.js

O Twitter Bootstrap Twitter tem os seguintes recursos :


Exemplo : HTML5 + CSS3 para Design Responsivo

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Site Responsivo</title>  
  6. <style>  
  7. /* Layout para celulares: menor ou igual a 480 px. */   
  8.   body {  
  9.      background-color:blue;  
  10. }  
  11.   
  12. /* Layout para tablets: 481 px a 768 px. Herda estilos de: Layout para celulares. */  
  13. @media only screen and (min-width: 481px) {   
  14.  body {  
  15.     background-color: black;  
  16.   }  
  17. }   
  18.   
  19.     
  20. /* Layout para desktops: 769 px até o máximo de 1232 px. Herda estilos de: Layout para celulares e Layout para tablets. */    
  21.     
  22. @media only screen and (min-width: 769px) {    
  23.   body {  
  24.     background-color: red;  
  25.   }  
  26. }  
  27. </style>  
  28.   
  29. </head>  
  30.   
  31. <body>  
  32. <h2>Site Responsivo</h2>  
  33. </body>  
  34. </html>  

Ferramenta do Firefox para testar Layout Responsivo
Diversos dispositivos para testar Layout Responsivo no Firefox

Layout Responsivo usando Twitter Bootstrap

  1. <!doctype html>  
  2. <html lang="pt-br">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6. <title>Layout Responsivo</title>  
  7. <link href="css/bootstrap.min.css" rel="stylesheet">  
  8. <link href="css/bootstrap.css" rel="stylesheet">  
  9. <link href="css/bootstrap-responsive.css" rel="stylesheet">  
  10. <link href="css/bootstrap-responsive.min.css" rel="stylesheet">  
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>  
  12. <script src="js/bootstrap.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16. </body>  
  17. </html>  

Barra de Navegação

Com os arquivos CSS do bootstrap, o navbar começa empilhar os itens de menu em cima uns dos outros. Quando a tela fica bem pequena, é apenas uma lista vertical de itens.

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6. <title>Layout Responsivo</title>  
  7. <link href="../artigos/css/bootstrap.min.css" rel="stylesheet" type="text/css">  
  8. <link href="../artigos/css/bootstrap.css" rel="stylesheet">  
  9. <link href="../artigos/css/bootstrap-responsive.css" rel="stylesheet">  
  10. <link href="../artigos/css/bootstrap-responsive.min.css" rel="stylesheet">  
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>  
  12. <script src="js/bootstrap.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16.   
  17. <div class="navbar navbar-static-top navbar-inverse">  
  18.   <div class="navbar-inner">  
  19.     <div class="container">   
  20.       
  21.       <!-- isto cria um botão com 3 linhas que indica que o menu está aí  -->   
  22.        
  23.       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">   
  24.       <span class="icon-bar"></span>   
  25.       <span class="icon-bar"></span>  
  26.       <span class="icon-bar"></span> </a>   
  27.       <img class="logo" src="images/logo_empresax.jpg" alt="Empresa X">  
  28.           
  29.       <!-- A lista de links no cabeçalho usando a classe nav-collapse para esconder os links quando a largura do navegador ficar muito pequena. -->  
  30.       <div class="nav-collapse">  
  31.         <ul class="nav">  
  32.           <li> <a href="#">Home</a> </li>  
  33.           <li> <a href="#">Serviços</a> </li>  
  34.           <li> <a href="#">Clientes</a> </li>  
  35.           <li> <a href="#">Portfólio</a> </li>  
  36.           <li> <a href="#">Contato</a> </li>  
  37.         </ul>  
  38.       </div>  
  39.     </div>  
  40.   </div>  
  41. </div>  
  42.   
  43. </body>  
  44. </html>  
Painel Responsivo 01
Painel Responsivo 02

 

 





Beto Marques

Beto MarquesWebdesigner e Consultor desde 1997. Desenvolveu vários Sites, Cursos, Tutoriais e Ebooks sobre Webdesign.

Como consultor já treinou várias empresas e dentre seus trabalhos , se destaca Treinamento de FrontPage e Flash para o Departamento de Computação Gráfica - TV Globo - Projac.


Voltar ao Topo