Bootstrap é uma framework de front-end que você pode usar para criar sites. Onde são fornecidos elementos modelos de HTML e CSS para ser utilizado em sites. Isso inclui formulários, botões, tabelas, navegação e um sistema de grade para layouts. Além disso, os módulos JavaScript possibilitam a integração de interações (por exemplo, uma apresentação de slides de imagens, guias e caixas de diálogo) no site. Além disso, o Bootstrap oferece todos os pré-requisitos para a criação de web designs responsivos, que também podem ser exibidos de forma otimizada em smartphones ou tablets.
Para usar o bootstrap
Para usar o Bootstrap, você deve integrá-lo ao seu site. Você tem duas opções para isso:
Você pode baixá-lo do site oficial do Bootstrap e incorporá-lo localmente ou você pode incorporá-lo online por meio de um CDN.
A estrutura do Bootstrap é composta de muitos arquivos e pastas diferentes, incluindo arquivos CSS e JavaScript. Para incluir esses arquivos, precisamos adicionar alguns códigos ao seu index.html. A primeira coisa que pode ser feita é incluir CSS. O código a seguir será adicionado à seção <head> do seu index.html:
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
Em seguida vamos integrar jQuery para podermos explorar todas as funcionalidades do Bootstrap. Adicione o seguinte script antes da tag de fechamento </body>:
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
A última coisa que você deve fazer para que o Bootstrap funcione é adicionar a biblioteca JavaScript antes da tag de fechamento </body> como esta:
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
Seu arquivo index.html deve se parecer como o código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo Primeiro Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content=width=device-width, inicial-scale=1">
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css>" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<script src="<https://code.jquery.com/jquery-3.3.1.slim.min.js>" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>
Estrutura do BootStrap
Bootstrap consiste em componentes individuais que você pode inserir em seu site. Estes são códigos HTML equipados com classes CSS e possivelmente código Javascript. O Bootstrap 4 tem uma estrutura modular e é dividido nas seguintes quatro áreas: