Iniciando Com Bootstrap

em
Começando com o Bootstrap


Criar sites pode ser uma coisa demorada, especialmente se trata-se de um projeto grande. Mas, é para aumentar nossa produtividade que hoje em dia existem diversas ferramentas para nos auxiliar nessa tarefa, e o Bootstrap entra perfeitamente nisso. O Bootstrap é certamente um dos melhores frameworks CSS que existem, sendo amplamente utilizado. Neste tutorial você vai ver como instalar o Bootstrap, como ele funciona e vamos criar um código simples.

Aprenda HTML, CSS e Bootstrap 5 de forma fácil e prática!

Instalando o Bootstrap

Vamos começar instalando a framework, que você pode fazer de duas formas: pode simplesmente adicionar o CDN, ou baixar os arquivos do Bootstrap. Para baixar os arquivos, acesse essa página, que contém as opções de donwload, você também pode usar o NPM para fazer isso, bastando abrir a linha de comando na pasta do seu projeto e rodar o comando:

npm install bootstrap

Ou, através do Yarn:

yarn add bootstrap

Depois de baixar, basta linkar os arquivos de css e de javascript dentro da sua página. Sua página ficará, por exemplo, assim:

<html>
    <head>
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
</html>

Se você preferir usar através do CDN, adicione os códigos de estilo e de script abaixo no seu arquivo HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Instalações extras

Para que o Bootstrap funcione corretamente, é preciso adicionar também o jQuery e o Popper ao seu projeto (apesar de o Bootstrap vir perdendo a dependência com o jQuery, mas vamos usar neste tutorial). Você pode instalá-los via NPM ou simplesmente usar o CDN, neste caso vou mostrar apenas com CDN:

<!-- jQuery primeiro, Popper.js, e então Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

É importante seguir a ordem mostrada acima para evitar que haja erros, pois os recursos do Bootstrap necessitam que o jQuery e o Popper tenham sido carregados primeiro. Agora, nossa página tem o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciando com Bootstrap</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Escrevendo uma página simples

Com tudo pronto, agora é hora de escrever alguma coisa para ver como o Bootstrap funciona. Para estilizar a sua página, você deverá colocar as classes corretas para os elementos HTML, por exemplo neste caso:

<button class="btn btn-primary" type="button">
    Clique aqui
</button>

No exemplo acima, foi criado um botão, para foi preciso colocar a classe btn e a cor do botão, neste caso, primary. Outras opções além de primary são: secondary, success danger, warning, info, light e dark. Esses estilos mostrados definem cores, que você pode personalizar via Sass (se tiver feito o donwload), que são aplicáveis sempre que estiver falando de cores, bastando escrever o nome da classe primeiro com o tipo de elemento (no exemplo, btn, botão) e depois com a cor. Teste o exemplo:

<button class="btn btn-primary" type="button">Clique aqui</button>
<p class="text-danger bg-warning">Um texto "danger"</p>

Você pode conferir todas as classes para botões aqui. O layout de uma página é organizado usando os containers, os tipos mais básicos são o container e o container-fluid, a diferença entre eles está no espaçamento (container oferece um bom espaçamento com as laterais, enquanto que com container-fluid esse espaçamento é menor). Dentro do container, também podemos fazer divisões menores (criando colunas), criando uma div com class row e divs filhas com class col. Veja e teste o exemplo abaixo.

<div class="container">
    <div class="row">
        <div class="col-4">Coluna 1</div>
        <div class="col-4">Coluna 2</div>
        <div class="col-4">Coluna 3</div>
    </div>
</div>

No exemplo acima, forma criadas 3 colunas responsivas, onde cada uma ocupa 40% da largura total da página. Tudo sobre essas divisões (grids) você vê aqui.

Esse tutorial acaba por aqui, pois é apenas para que você entenda como o Bootstrap funciona e como ele pode ser uma ferramenta poderosa para criar sites. Vale lembrar que nada impede você de também escrever alguns estilos extras para usar no seu site e/ou usar o Sass para personalizar o Bootstrap para a sua necessidade. Confira a documentação oficial do Bootstrap, pois ela é uma documentação excelente, muito clara e intuitiva.

Comentários

Postar um comentário