Bootstrap – Introdução

Bootstrap – Introduçã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

O Bootstrap 3 foi desenvolvido para ser responsivo à dispositivos móveis; e para garantir a renderização adequada, precisamos adicionar outra tag dentro do elemento 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>

HTML-ICON-13

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:

  1. A classe .container, fornece um contêiner de largura fixa e responsivo
  2. 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>

HTML-ICON-11Nossa 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 à:

aula-bootstrap-001-pagina01
Bootstrap: Primeira Página – Olá Mundo

 

Com esta página bem simples, finalizamos nosso primeiro artigo sobre o uso do Bootstrap.