Bootstrap 4 - Configuração do ambiente

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

↰ Previous page Next page ↱