Bootstrap 4 - Guia rápido

O que é Bootstrap 4?

Bootstrap 4 é uma estrutura de front-end móvel poderosa e popular para a criação de primeiros sites móveis responsivos na web. É uma versão mais recente do Bootstrap , que usa HTML, CSS e JavaScript.

História

A última versão estável do Bootstrap v3.3.7 foi em julho de 2016 e em agosto de 2017, a versão beta do Bootstrap 4.0.0 foi lançada.

Por que usar o Bootstrap?

  • Ele contém primeiros estilos móveis em toda a biblioteca, em vez de usá-los em arquivos separados.

  • Com apenas o conhecimento de HTML e CSS, qualquer pessoa pode começar a usar o Bootstrap. Além disso, o site oficial do Bootstrap tem uma boa documentação.

  • É compatível com todos os navegadores populares e seu CSS responsivo se ajusta a desktops, tablets e dispositivos móveis.

  • Fornece uma solução limpa e uniforme para construir uma interface para desenvolvedores.

  • Ele contém componentes embutidos bonitos e funcionais que são fáceis de personalizar.

  • É um código aberto e oferece personalização baseada na web.

Bootstrap 3 v / s Bootstrap 4

Bootstrap 4 é a versão mais recente do Bootstrap 3, cujos arquivos CSS de origem são convertidos em SCSS. Ele usa o modal flex para o sistema de grade e suporta todos os navegadores mais recentes. No entanto, ele oferece suporte ao Internet Explorer 9+ e iOS 7 e deixou o suporte para o IE 8 e versões inferiores, iOS 6 e versões inferiores. Para obter mais informações sobre a diferença entre o Bootstrap 3 e o Bootstrap 4, consulte este capítulo .

Você pode começar a usar o Bootstrap 4 em seu site incluindo-o da CDN (Content Delivery Network) ou baixando em getbootstrap.com .

Usando CDN

O Bootstrap 4 pode ser usado no site, incluindo-o da Content Delivery Network .

Use o CDN de CSS e JS do Bootstrap compilado abaixo em seu projeto.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Inclua as versões CDN de jQuery e Popper.js (o Bootstrap 4 usa jQuery e Popper.js para fazer uso de componentes JavaScript, como modais, dicas de ferramentas, popovers etc.) antes do Bootstrap JavaScript minificado , se você estiver usando a versão compilada do JavaScript.

A seguir estão alguns componentes, que requerem jQuery -

  • Usado para alertas que podem ser fechados

  • Alterne os estados usando botões e caixas de seleção / botões de opção e recolha para alternar o conteúdo

  • Carrossel para slides, controles e indicadores

  • Dropdowns (usa o Popper.js para um posicionamento perfeito)

  • Abra e feche os Modais

  • Para recolher o Navbar

  • Dicas de ferramentas e popovers (usa o Popper.js para um posicionamento perfeito)

Baixando Bootstrap 4

Você pode baixar o Bootstrap 4 em https://getbootstrap.com/docs/4.1/getting-started/download/. Ao clicar neste link, você verá uma tela conforme mostrado abaixo -

Aqui você pode ver dois botões -

  • Download- Clicando aqui, você pode baixar as versões pré-compiladas e reduzidas do CSS e JavaScript do Bootstrap. Nenhuma documentação ou arquivos de código-fonte originais estão incluídos.

  • Download Source - Clicando aqui, você pode obter o SCSS do Bootstrap mais recente, o código-fonte do JavaScript e os arquivos de documentação.

Para melhor compreensão e facilidade de uso, usaremos a versão pré-compilada do Bootstrap ao longo do tutorial. Como os arquivos são compilados e minimizados, você não precisa se preocupar sempre com a inclusão de arquivos separados para funcionalidade individual.

Estrutura do Arquivo

Bootstrap 4 pré-compilado

Assim que a versão compilada do Bootstrap 4 for baixada, extraia o arquivo ZIP e você verá a seguinte estrutura de arquivo / diretório -

Como você pode ver, existem CSS e JS compilados (bootstrap. *), Bem como CSS e JS compilados e minimizados (bootstrap.min. *).

Código-fonte do Bootstrap 4

Se você baixou o código-fonte do Bootstrap 4, a estrutura do arquivo seria a seguinte -

  • Os arquivos em js / e scss / são o código-fonte para Bootstrap CSS e JavaScript.

  • A pasta dist / inclui tudo listado na seção de download pré-compilado acima.

  • O docs / examples / inclui o código-fonte para a documentação do Bootstrap e exemplos de uso do Bootstrap.

Criando a primeira página da Web com Bootstrap 4

O exemplo a seguir especifica uma página da web simples do Bootstrap 4 -

Exemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

O Bootstrap 4 usa classes de contêiner para envolver o conteúdo da página. Ele contém duas classes de contêiner -

  • .container - Representa um contêiner de largura fixa.

  • .container-fluid - Representa um contêiner de largura total.

Recipiente

A classe .container é usada para envolver o conteúdo da página com largura fixa e o conteúdo pode ser colocado no centro facilmente usando a classe .container conforme mostrado abaixo.

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

Exemplo

O exemplo a seguir especifica uma página da web simples com contêiner de largura fixa -

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </div>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Recipiente de fluido

Você pode criar um contêiner de largura total usando a classe .container-fluid conforme mostrado abaixo.

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

O exemplo a seguir especifica uma página da web simples com contêiner de largura total -

Exemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </div>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Descrição

Sistema de grade bootstrap 4 construído com flexbox que é totalmente responsivo e escala até 12 colunas (de acordo com o tamanho do dispositivo) criando layout com linhas e colunas na página. Ele fornece um primeiro sistema de grade de fluido móvel responsivo que dimensiona as colunas conforme o tamanho do dispositivo ou janela de visualização aumenta.

Funcionamento do sistema de rede

  • As linhas devem ser colocadas dentro de uma classe .container para alinhamento e preenchimento adequados.

  • Para largura responsiva, use a classe .container e, para largura fixa em todas as janelas de visualização, use a classe .container-fluid .

  • Use linhas para criar grupos horizontais de colunas.

  • O conteúdo deve ser colocado dentro das colunas, e apenas as colunas podem ser filhos imediatos das linhas.

  • As colunas contêm preenchimento para controlar o espaço entre elas.

  • Se você colocar mais de 12 colunas em uma linha, as colunas serão colocadas em uma nova linha.

  • As colunas criam lacunas entre o conteúdo da coluna por meio de preenchimento. Portanto, você pode remover a margem das linhas e o preenchimento das colunas com a classe .no-gutters na linha.

  • Você pode tornar o sistema de grade responsivo usando cinco pontos de interrupção de grade, como extra pequeno, pequeno, médio, grande e extra grande.

  • Classes de grade predefinidas como .col-4 estão disponíveis para criar layouts de grade rapidamente. Mixins MENOS também podem ser usados ​​para layouts mais semânticos.

Opções de grade

A tabela a seguir resume os aspectos de como o sistema de grade Bootstrap 4 funciona em vários dispositivos -

Dispositivos extra pequenos (<576 px) Dispositivos pequenos (≥576px) Dispositivos médios (≥768px) Dispositivos grandes (≥992 px) Dispositivos extragrandes (≥1200px)
Comportamento de grade Sempre horizontal Recolhido para começar, horizontal acima dos pontos de interrupção Recolhido para começar, horizontal acima dos pontos de interrupção Recolhido para começar, horizontal acima dos pontos de interrupção Recolhido para começar, horizontal acima dos pontos de interrupção
Largura máxima do contêiner Nenhum (automático) 540px 720px 960px 1140px
Aulas de classe .col- .col-sm- .col-md- .col-lg- .col-xl-
# de colunas 12 12 12 12 12
largura da calha

30px

(15px em cada lado de uma coluna)

30px

(15px em cada lado de uma coluna)

30px

(15px em cada lado de uma coluna)

30px

(15px em cada lado de uma coluna)

30px

(15px em cada lado de uma coluna)

Nestable sim sim sim sim sim
Ordem de coluna sim sim sim sim sim

Estrutura de grade básica

A seguir está a estrutura básica da grade Bootstrap 4 -

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Exemplo de sistema de grade

A seguir está um exemplo de sistema de grade Bootstrap 4 -

Exemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      </style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class =" col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-5">.col-sm-5</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-12">.col-sm-12</div>
         </div>
      </div>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Criação de layouts de duas colunas

O exemplo a seguir descreve a criação de dois layouts de coluna para dispositivos pequenos, médios e grandes. Em dispositivos pequenos, como telefones celulares, as colunas se tornarão automaticamente horizontais como padrão.

Exemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-7">.col-sm-7</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-8">.col-sm-8</div>
         </div>
		 
         <div class = "row">
            <div class = "col-sm-9">.col-sm-9</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
      </div>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Criação de layouts de três colunas

O exemplo a seguir descreve a criação de layouts de três colunas para dispositivos médios e grandes. Se a resolução da tela for maior ou igual a 992 pixels, ela será exibida no modo paisagem em tablets e, como de costume, será exibida no modo retrato.

Exemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-8">.col-sm-8</div>
            <div class = "col-sm-2">.col-sm-2</div>
         </div>
		
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
      </div>
      
      <!-- 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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Descrição

O Bootstrap 4 usa métodos de coleta de conteúdo para exibir o texto, blocos de código, imagens responsivas, dados em formato tabular, etc. na página da web.

A tabela a seguir lista os métodos de conteúdo que você pode usar para manipular o Bootstrap 4 -

S.No. Métodos e Descrição
1

Tipografia

O recurso de tipografia cria títulos, parágrafos, listas e outros elementos embutidos.

2

Código

É usado para exibir blocos de código embutidos e multilinhas no documento.

3

Imagens

O Bootstrap 4 fornece suporte para imagens usando a tag <img>.

4

Mesas

As tabelas são usadas para exibir os dados em um formato tabular.

5

Figuras

O elemento de figura especifica o conteúdo junto com imagens relacionadas com uma legenda opcional.

Descrição

O Bootstrap 4 usa métodos de coleta de conteúdo para exibir o texto, blocos de código, imagens responsivas, dados em formato tabular, etc. na página da web.

A tabela a seguir lista os métodos de conteúdo que você pode usar para manipular o Bootstrap 4 -

S.No. Métodos e Descrição
1

Alertas

O componente de alerta especifica a mensagem predefinida para ações do usuário.

2

Distintivos

Os emblemas são usados ​​para destacar as informações adicionais ao conteúdo.

3

Migalhas de pão

É usado para mostrar informações baseadas em hierarquia de um site.

4

Botões

Bootstrap fornece um botão clicável para colocar conteúdo, como texto e imagens.

5

Grupo de botões

Os grupos de botões permitem que vários botões sejam empilhados em uma única linha.

6

Cartas

O cartão é um contêiner de conteúdo que exibe uma caixa delimitada com algum preenchimento ao redor.

7

Carrossel

Carrossel é uma maneira flexível e responsiva de adicionar um controle deslizante ao seu site.

8

Colapso

É usado para mostrar ou ocultar o conteúdo.

9

Dropdowns

Os menus suspensos podem ser usados ​​para exibir links em formato de lista.

10

Formulários

O elemento do formulário é usado para coletar a entrada do usuário.

11

Grupo de entrada

Usando grupos de entrada, você pode facilmente preceder e acrescentar texto ou botões às entradas baseadas em texto.

12

Jumbotron

Ele aumenta o tamanho dos títulos e adiciona muita margem para o conteúdo da página de destino.

13

Modal

Modal é uma janela filho que é colocada em camadas sobre sua janela pai.

14

Navs

O Bootstrap fornece itens de navegação para o seu site em um menu horizontal.

15

Navbar

Navbar fornece cabeçalhos de navegação para seu aplicativo ou site.

16

Paginação

A paginação é usada para dividir o conteúdo relacionado em várias páginas.

17

Popovers

Popover é semelhante à dica de ferramenta, oferecendo uma visão estendida completa com um título.

18

Progresso

A barra de progresso mostra o andamento de um processo com barras empilhadas, fundos animados e rótulos de texto.

19

Scrollspy

Scrollspy é usado para indicar o link atualmente ativo no menu com base na posição de rolagem.

20

Dicas de ferramentas

As dicas de ferramentas são úteis quando você precisa descrever um link.

Descrição

O Bootstrap 4 usa uma coleção de utilitários para exibir bordas, cor do texto, inserir vídeo, etc. na página da web.

A tabela a seguir lista os tipos de utilitários que você pode usar para manipular o Bootstrap 4 -

S.No. Métodos e Descrição
1

Fronteiras

O utilitário Border fornece estilo, cor e raio da borda de um elemento.

2

Ícone Clearfix e Fechar

Clearfix é usado para limpar o conteúdo flutuado e fechar o ícone para descartar o conteúdo.

3

Cores

Use as classes contextuais para alterar a cor do texto, link e cor de fundo de um elemento.

4

Embutir

É usado para incorporar o vídeo em uma página usando o elemento <iframe>.

5

Flutuador

É usado para fazer um elemento flutuar para o lado esquerdo ou direito.

6

Sombras e Espaçamento

O utilitário Shadow adiciona sombra aos elementos e o utilitário de espaçamento fornece valores de margem ou preenchimento a um elemento.

7

Dimensionamento

Você pode definir o tamanho de um elemento para largura ou altura usando os utilitários de largura e altura.

8

Texto

O Bootstrap fornece utilitários de texto para controlar o alinhamento, transformação, peso do texto e muito mais.

9

Flex

O utilitário Flex pode ser usado para gerenciar o layout, alinhamento, colunas de grade, navegação e outros componentes da página.

Descrição

Bootstrap é uma estrutura de front-end móvel poderosa e popular para a construção de primeiros sites móveis responsivos na web usando estrutura HTML, CSS e JS.

A tabela a seguir mostra as diferenças no Bootstrap 3 e Bootstrap 4 -

S.No. Componente Bootstrap 3 Bootstrap 4
1 Arquivos de origem CSS MENOS SCSS
2 Sistema de rede Sistema de grade de 4 camadas (xs, sm, md, lg) Sistema de grade de 5 camadas (xs, sm, md, lg, xl)
3 Unidade CSS px rem
4 Tamanho da fonte 14px 16px
5 Estrutura suspensa Criado com <ul> e <li> Criado com <ul> ou <div>
6 Colunas de compensação col-md-offset-4 offset-md-4
7 Imagens classe responsiva .img classe .img-fluid
8 Mesas Adicionar classe .table-responsive ao elemento pai <div> Adicionar classe responsiva .table ao elemento <table>
9 Glifos Suportado Não suportado
10 Objetos de mídia Usa classes para objetos de mídia, como .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list e .media-body Usa apenas a classe .media para objetos de mídia.
11 Tabelas escuras / inversas Não suportado Usa a classe .table-dark para fazer tabelas dark / inverse
12 Caixas de seleção e botões de rádio Exibe as caixas de seleção e botões de rádio usando .radio , .radio-inline , .checkbox , ou .checkbox-inline aulas Exibe as caixas de seleção e botões de rádio usando .form-check , .form-check-label , .form-check-entrada , ou -.form-check in-line aulas
13 Tamanho de controle de formulário Aumentar ou diminuir o tamanho de um controle de entrada usando .input-lg e .input-sm aulas Aumentar ou diminuir o tamanho de um controle de entrada usando .form-controlo-lg e .form-controlo-sm aulas
14 Texto de ajuda Exiba o texto de ajuda usando a classe .help-block Exibir o texto de ajuda usando a classe .form-text
15 Estilos Usa as classes .btn-default e .btn-info nos botões Usa as classes .btn-secondary , .btn-light e .btn-dark nos botões e removeu a classe .btn-default .
16 Botões de contorno Não suportado Defina o estilo dos botões com a cor do contorno usando a classe .btn-outline- *
17 Tamanhos de botão A classe .btn-xs está disponível Disponível apenas para as classes .btn-sm e .btn-lg e eliminou a classe .btn-xs
18 Cabeçalhos de menu Use a classe .dropdown-header para a tag li Use a classe .dropdown-header para tags h1 - h2
19 Divisores Use a classe .divider no elemento li Use a classe .dropdown-divider no elemento div
20 Navbars fixas Fixar a barra de navegação para cima ou para baixo usando fixo-.navbar-topo e de fundo .navbar-fixo aulas Fixar a barra de navegação para cima ou para baixo usando .fixed-topo e de fundo .fixed aulas
21 Pagers Alinhe as páginas usando .previous e .next aulas Não suportado
22 Jumbotron Full Width Ele não usa a classe de fluido .jumbotron em jumbotrons de largura total Ele usa a classe de fluido .jumbotron para jumbotrons de largura total
23 Item de carrossel Usa a classe .item para itens de carrossel. Usa a classe de item de carrossel para itens de carrossel.
24 Wells, Panels and Thumbnails Suportado Não suportado. Em vez disso, use cartões
25 Inline Navs Não inclui a classe .nav inline Exiba os navs inline usando a classe .nav-inline