O que é responsividade na Web?

Antes de aprendermos Bootstrap, é necessário entender qual é o problema que ele tenta resolver, que é o da responsividade na Web.

Responsividade é uma abordagem no design e construção de páginas Web que se adaptam ao comportamento e ambiente do usuário. Basicamente, a seguindo podemos criar páginas Web que se adaptam melhor ao usuário e a plataforma que ele usa para acessar a Web, seja um computador Windows, um iPhone ou uma geladeira inteligente

O que é Bootstrap e pra que ele serve?

É uma biblioteca CSS criada pelo Twitter para facilitar a criação de páginas Web responsivas e Mobile-first (e bonitas)

O que é uma biblioteca CSS?

É um código css reutilizável, que aplica regras css padrão para nossa página e oferece regras de css prontas para serem utilizadas usando classes na nossa página web

Como adicionar o Bootstrap na nossa página?

Link para a página da documentação: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Basta adicionar o arquivo .css do bootstrap em nossa página:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

E se quisermos que algumas recursos de interação do bootstrap funcionem, precisaremos do JS dele:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Como usamos o Bootstrap?

Primeiramente devemos adicionar uma meta tag em nossa página para que ela seja responsiva e funcione corretamente em smartphones

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

E então passamos a utilizar o bootstrap por meio de classes, como a container:

<div class="container-fluid">
  ...
</div>

Buttons

link para a documentação: https://getbootstrap.com/docs/4.0/components/buttons/

Basta adicionar a classe btn ao elemento HTML e se quiser mais customização mais uma classe de btn específica:

<button type="button" class="btn">Button</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

link para a documentação: https://getbootstrap.com/docs/4.0/components/navs/

Basta adicionar a classe nav em um container (div ou ul) e classes como nav-link em seus filhos para criar barras de navegação:

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Grid

link da documentação: https://getbootstrap.com/docs/4.0/layout/grid/

Com o sistema de Grid do bootstrap, podemos criar designs mais complexos usando um sistema de tabela (linhas e colunas) em nossa página de maneira fácil e responsiva:

<div class="row">
  <div class="col-6 col-sm-12">1</div>
  <div class="col-6 col-sm-12">2</div>
</div>