Como fazer o site responsivo mais rápido do mundo – Bootstrap

Esse artigo tem a intenção de mostrar as facilidades para o desenvolvimento de sites responsivos – adaptáveis à todos os formatos e resoluções de telas – utilizando Bootstrap 4. Para acompanhar a atividade proposta aqui considero que os leitores tenham conhecimentos básicos em HTML, CSS e JavaScript.
Aqui não temos a intenção de nos aprofundar em todas as etapas e sim apresentar como podemos, de forma rápida, desenvolver sites com o Bootstrap. Para a atividade teremos a seguinte estrutura de arquivos:

Esturutra de diretórios para o desenvolvimento do site

Portanto deixe os arquivos criados e coloque uma imagem que servirá para a imagem de capa do site. O projeto finalizado está disponível no GitHub sob a licença MIT.


 O que é Bootstrap?

Segundo a documentação disponível no site oficial, o Bootstrap foi criado inicialmente por um desenvolvedor do Twitter e hoje é um dos mais populares frameworks para desenvolvimento front-end.

Com ele é possível desenvolver aplicações responsivas, ou seja que são adaptáveis aos diversos tamanhos de telas e resoluções, desde smartphones até smartTVs passando por outros dispositivos que existentes.

O código fonte está disponível no GitHub sob a licença MIT.


Instalação

Vamos abordar a forma mais simples e rápida para utilizar o Bootstrap na nossa aplicação.

CSS

Copie e cole o código abaixo dentro da tag <head> antes de todos os estilos CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

Adicione as linhas abaixo antes de fechar a tag </body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Sendo assim o arquivo index.html ficará da seguinte forma

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Nossos estilos CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>


Desenvolvimento

A partir de agora o Bootstrap já está instalado na nossa aplicação, agora partiremos para o desenvolvimento. Desenvolveremos o menu que ficará no topo do site e colocaremos uma imagem de capa. Assim como a imagem:

Layout do site com o menu no topo e uma imagem de capa com um texto centralizado

 

Menu

Dentro da tag <body>  adicione o código a seguir que será a parte do menu.

<!-- navbar -->
	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
	  <!-- Título/Marca do site -->
	  <a class="navbar-brand" href="#">Bootstrap 4</a>

	  <!-- Botão que será exibido quando estiver em uma tela menor -->
	  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <!-- Menu listado do lado direito -->
	  <div class="collapse navbar-collapse flex-grow-0 ml-auto" id="navbarsExampleDefault">
	    <ul class="navbar-nav">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">Menu 1</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="#">Menu 2</a>
	      </li>
	    </ul>
	    
	  </div>
	</nav>

No Bootstrap precisamos adicionar classes para atingir os comportamento desejados. Sendo assim na tag <nav> foram adicionadas as seguintes classes:

  • navbar – definindo o menu
  • navbar-expand-md – momento em que o menu será retraído e substituído por um botão
  • navbar-dark – texto do menu ficará em branco
  • bg-dark – fundo do menu será com a cor dark padrão do Bootstrap
  • fixed-top – fixado no topo da tela

Para as outras tags os comportamentos estão descritos brevemente nos comentários do código.

Capa do site

Para a capa do site adicione o seguinte conteúdo logo após o menu no arquivo index.html

        <!-- cover image -->
	<header class="masthead">
	<div class="container h-100">
	  <div class="row h-100 align-items-center">
	    <div class="col-12 text-center">
	      <h1 class="m-0 display-4">Bootstrap 4</h1>
	      <h3>A melhor biblioteca de componentes front-end</h3>
	    </div>
	  </div>
	</div>

E também adicione o conteúdo a seguir no arquivo style.css

.masthead {
  height: 100vh;
  min-height: 500px;
  color: white;
  background-image: url('img/background.jpg');
  text-shadow: 2px 2px 4px #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Lembrando que a imagem background.jpg deve existir e estar dentro do diretório img. Todos os arquivos estão disponíveis sob a licença MIT no GitHub


 

Rodrigo Barreto

Formado em Física Computacional pela USP - São Carlos com pós-graduação em Desenvolvimento de Sistemas para Dispositivos Móveis pelo IFSP - São Carlos. Tem experiência em desenvolvimento há mais de 10 anos. Atualmente é docente no Senac em São Carlos nas áreas de redes, desenvolvimento e jogos digitais.

Deixe um comentário