Antes de falarmos sobre o que é Bootstrap devemos saber o significado de framework em desenvolvimento de programas.
O Bootstrap é uma ferramenta gratuita para desenvolvimento HTML, CSS e JS. Crie protótipos rapidamente ou aplicações completas com nossas variáveis e mixins Sass, sistemas de grid responsivo, componentes pré-construídos e poderosos plugins com jQuery.
Um framework é usado para facilitar o desenvolvimento de software, pois trata-se de um conjunto de ferramentas, bibliotecas e padrões de código criado para dar mais agilidade de produtividade. Isso ocorre porque ele tem funcionalidades pré-definidas que permitem aos desenvolvedores criar aplicativos ou sites de forma mais rápida e eficiente, evitando a necessidade de começar do zero.
Então, agora podemos dizer que Bootstrap é um framework de desenvolvimento web que fornece um conjunto de ferramentas e estilos pré-definidos para facilitar a criação de sites responsivos e modernos, mesmo para pessoas sem conhecimento avançado em programação.
CDN e Frameworks
Um termo que podemos ouvir bastante quando falamos de framework é CND. Colocando por exetenso essa abreviação, CDN significa Content Delivery Network e são servidores localizados em algum local seguro que contém cópias de conteúdo estático (como imagens, arquivos CSS e JavaScript) de um site.
Temos duas opções quando queremos adicionar um framework dentro de nosso site:
- baixar o arquivo do framework e enviar para nosso site
- apenas inserir um link do framework disponibilizado por um servidor CDN.
Como exemplo, links de CSS e JS, temos,
- https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
Como adicionar Bootstrap no meu HTML?
Podemos iniciar incluindo CSS e JavaScript prontos para produção do Bootstrap via CDN sem a necessidade de baixar e enviar para nosso site.
Para CSS, basta colocarmos a linha abaixo dentro da tag <head> do nosso HTML
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN” crossorigin=”anonymous”>Para JavaScript, coloque a linha abaixo antes da tag </body>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL” crossorigin=”anonymous”></script>Exemplo Adicionando Bootstrap Passo a Passo no HTML
#1 Dentro do nosso arquivo index.html ou outro qualquer, incluímos a tag <meta name=”viewport”> para um termos um comportamento mais responsivo para dispositivos móveis.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demostração de Bootstrap</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
</body>
</html>#2 Agora coloque a tag <link> dentro da tag <head> para inserir o CSS e a tag <script> antes do fechamento </body> para inserir nosso pacote JavaScript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap de Exemplo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>Dica
Podemos incluir Popper e nosso JS separadamente.
| Descrição | URL |
|---|---|
| CSS | https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css |
| JS | https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js |
Se você não planeja usar menus suspensos, popovers ou dicas de ferramentas, economize alguns kilobytes ao não incluir o Popper.
Veja outras alternativas de links:
CSS
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>Popper
<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>JavaScript
<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>
Comments on “O que é Bootstrap e como adicioná-lo no HTML”