Bootstrap – Introdução
O Bootstrap é um framework para construção de front-end que agilizar o desenvolvimento de páginas web, uma vez que fornece vários padrões, baseados em HTML, JavaScript e CSS, que podem ser apliados diretamente em nossas páginas.
O Bootstrap foi desenvolvido, por volta do ano de 2011, por Jacob Thorton e Mark Otto, que na época eram engenheiros que trabalhavam para o Twitter. O objetivo dos desenvolvedores era resolver as várias incompatibilidades que ocorriam no desenvolvimento das aplicações web dentro da própria equipe. Eles almejavam otimizar o desenvolvimento através da adoção de uma estrutura única, que levaria a redução de inconsistências entre as diversas formas de se codificar.
Atualmente, há pelo menos duas formas de se adicionar o suporte ao Bootstrap às nossas páginas web. Neste artigo será apresentado o método que utiliza um CDN (Content Delivery Network), que se baseia em uma rede de distribuição de conteúdo, e que evita a necessidade de disponibilizarmos o conteúdo do Bootstrap em nosso próprio site. Neste artigo usaremos o CDN, gratuito, da MaxCDN.
Independentemente de utilizar um CDN ou não, para ativar o suporte ao Bootstrap precisamos adicionar as seguintes linhas no head
da nossa pagina.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Estas linhas carregam as regras de CSS e de Javascript necessárias para o funcionando do Bootstrap, e como podemos perceber, o ele também precisa da biblioteca jQuery.
A versão das bibliotecas que estamos utilizado é a “min”, que nada mais é do que o arquivo padrão, mas sem as quebras de linhas e os espaços em branco, desnecessário para o funcionamento do Bootstrap, esta versão, por ser mais compacta geralmente é carregada mais rapidamente.
Responsive
head
do documento.<meta name="viewport" content="width=device-width, initial-scale=1">
A linha acima cria uma meta tag denominada “viewport“, observe os valores informados na propriedade “content“:
- width=device-width : define que a largura da página seja igual à largura da tela do dispositivo, que irá variar dependendo do dispositivo.
- initial-scale=1 : define o nível de zoom inicial, quando a página é carregada pela primeira vez pelo navegador.
Combinando estas linhas, com o conteúdo de uma página HTML5, “em branco”, temos nosso primiero modelo de página:
<!DOCTYPE HTML> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <!-- Pagina Responsiva --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Aula 1 - Pagina em Branco</title> </head> <body> ... ... ... </body> </html>
Contêiner
Para o Bootstrap “funcionar”, corretamente, ele precisa que exista um elemento, pode ser uma div
, que contenha todo o conteúdo do site, a este objeto damos o nome de contêiner. Há duas classes de contêiner que podemos utilizar:
- A classe .container, fornece um contêiner de largura fixa e responsivo
- A classe .container-fluid, que fornece um contêiner de largura total, abrangendo toda a largura da “viewport”
Desta forma, logo abaixo da tag <body>
, e antes da tag </body>
devemos adicionar as seguintes linhas:
<!-- Inicio do Conteiner principal --> <div class="container borda"> ... ... ... </div> <!-- Fim do Conteiner principal -->
Combinando estes linhas como o modelo anterior temos um esqueleto de página que podemos utilizar como nosso novo modelo.
<!DOCTYPE HTML> <!-- Curso de HTML5 - Aula 01 - Estrutura Basica - Exemplo 02 --> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Pagina Responsiva --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Aula 1 - esquelo da página</title> </head> <body> <!-- Inicio do Conteiner principal --> <div class="container borda"> ... ... ... </div> <!-- Fim do Conteiner principal --> </body> </html>
Nossa primeira página
Agora que já temos o esqueleto, ou modelo de página, vamos a um exemplo mais completo. Na verdade um exemplo bem simplório de página, que utiliza o Bootstrap e um pouco de CSS para adicionar uma borda ao elemento contêiner
<!DOCTYPE HTML> <!-- Curso de HTML5 - Aula 01 - Estrutura Basica - Exemplo 02 --> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style type="text/css"> .borda { border-width:1px; border-style: solid; } </style> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <!-- --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Aula 1 - Olá Mundo</title> </head> <body> <!-- Inicio do Conteiner principal --> <div class="container borda"> <h1>Bootstrap: <small>Introdução</small></h1> <p> Olá mundo</p> <p> A classe <code>.container</code> fornece um contêiner de largura fixa </p> </div> <!-- Fim do Conteiner principal --> </body> </html>
Quando carregamos o código acima, em um navegador iremos obter algo semelhante à:
Com esta página bem simples, finalizamos nosso primeiro artigo sobre o uso do Bootstrap.