A importância do Bootstrap CDN está, principalmente, na diminuição do tempo de carregamento das páginas. Ao utilizar um CDN, o navegador não precisa baixar o arquivo do Bootstrap diretamente do site do projeto, mas do servidor mais próximo possível da máquina da pessoa que está utilizando o sistema.
Em alguns casos, em que a preocupação com a segurança tem um foco maior do que outras questões, como rapidez de carregamento da página, a aplicação do framework Bootstrap, por meio de um CDN, pode ser um pouco problemática. Nessas situações, é possível utilizar versões mais leves ou apropriadas para aquele problema.
Fora isso, usar o Bootstrap pode trazer uma série de benefícios, capazes de agregar recursos para suas aplicações de maneira muito mais prática e agilizada. O fato de os documentos necessários para a execução do framework estarem remotamente disponibilizados pode trazer diversas facilidades para seu projeto.
Neste guia, mostraremos as principais delas, abordando esses temas:
- O que é o Bootstrap CDN e para que serve?
- Bootstrap local vs. Bootstrap CDN: quais as diferenças?
- Quais as vantagens de usar o Bootstrap CDN?
- Quais as desvantagens de usar o Bootstrap CDN?
- Como instalar e usar o Bootstrap CDN?
- Como usar um link do Bootstrap em um servidor CDN?
- Confira um template pronto usando Bootstrap CDN
Vamos lá?
O que é o Bootstrap CDN e para que serve?
Primeiramente, precisamos saber que Bootstrap é um framework utilizado no desenvolvimento de Sistemas Web modernos. Sua base se caracteriza pelo uso conjunto de elementos de CSS e JavaScript predefinidos. O uso de frameworks em projetos dessa área é capaz de favorecer a utilização de recursos, como pessoal e tempo hábil para execução.
Bootstrap CDN é um serviço de distribuição de arquivos do Bootstrap Framework e que permite aos usuários do sistema carregar o framework e seus componentes de fontes remotas. Isso economiza tempo na transferência de arquivos, especialmente, em redes com velocidades de conexão mais lentas — como em smartphones.
Ou seja, é possível que nossa página apenas carregue os arquivos nas próprias bases CDN do Bootstrap, facilitando o acesso do seu serviço e sem a necessidade de carregar esses arquivos em nosso projeto. Lembrando que tanto os arquivos de CSS quanto os de JavaScript podem ser inseridos em nossos projetos por esse sistema.
O que é um CDN?
CDN é uma sigla para Content Delivery Network — ou Rede de Entrega de Conteúdo, em português. Uma CDN é uma rede de servidores distribuídos geograficamente, que fornece conteúdo para os usuários finais.
Ao contrário de um servidor Web convencional, os conteúdos de um CDN não estão armazenados em um único lugar, mas em vários servidores ao redor do mundo. Quando um usuário solicita um conteúdo, o CDN analisa a localização e fornece o conteúdo do servidor mais próximo.
Esses materiais podem ser textos, imagens, sites inteiros ou mesmo frameworks, como no caso do Bootstrap.
Bootstrap local vs. Bootstrap CDN: quais as diferenças?
Primeiramente, a principal diferença entre usar o Bootstrap local e Bootstrap CDN está na localização dos arquivos utilizados pelo framework. Os arquivos do Bootstrap CDN estão armazenados em um servidor remoto. Isso significa que você não precisa baixar os arquivos do Bootstrap para seu computador, e não há a necessidade de configurações ou qualquer outra coisa para utilizá-lo.
No Bootstrap CDN, você está apenas usando um link para os arquivos do Bootstrap. Diferentemente de você usar uma versão de Bootstrap local em sua página ou sistema, você está usando os arquivos do Bootstrap que estão armazenados em seu computador ou no servidor em que sua página está hospedada.
A principal vantagem do uso local é que você pode personalizar os arquivos do Bootstrap para atender às suas necessidades e aos detalhes de personalização de seus projetos.
Quais as vantagens de usar o Bootstrap CDN?
Velocidade no acesso pelo sistema, resumidamente. O Bootstrap CDN sempre estará disponível e favorece que o framework e suas classes sejam facilmente acessados pela página que os utiliza. Veremos, mais adiante no artigo, que podemos fazer nossa própria versão do framework e torná-la disponível em servidores CDN.
Quais as desvantagens de usar o Bootstrap CDN?
Muito provavelmente, o que mais incomoda as pessoas desenvolvedoras mais experientes ao trabalhar com um Bootstrap CDN convencional está na falta de personalização daquele recurso. Otimizar seu sistema ou página será, por vezes, mais difícil quando utilizamos o Bootstrap por esse modo.
Como instalar e usar o Bootstrap CDN?
Existem diversas formas de utilizá-lo em nossos projetos, podendo variar conforme a experiência em desenvolvimento e necessidade de uso. Para exemplificar o caráter dessas possibilidades, trazemos algumas abordagens sobre a instalação e uso do Bootstrap CDN. Confira!
Método manual (ou local)
Você pode ir até a página oficial do Bootstrap, baixar os arquivos do framework e desempacotá-los na pasta de seu projeto — a mesma em que vai o “index.html” de seu site. A partir daí, basta disponibilizar o local em sua própria página HTML, entre as tags <head> de sua página:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/bootstrap/4/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="/jquery.min.js"></script>
<script src="/bootstrap/4/js/bootstrap.min.js"></script>
</head>
</html>
Construtores de sites: TemplateToaster Bootstrap
Existem outros recursos, como construtores personalizados de sites e temas — muito utilizados por pessoas que preferem construir seus sites pelo WordPress, principalmente. Um desses construtores é o TemplateToaster Bootstrap.
Sua função é, basicamente, adotar os parâmetros utilizados pelo Bootstrap em um theme builder. Com ele, a pessoa consegue construir todo o tema a partir de templates, com apenas o básico de conhecimento de sistemas Web.
Como usar um link do Bootstrap em um servidor CDN?
Bootstrap CDN, sendo uma rede de entrega de conteúdo gratuita, pode nos ajudar a carregar bibliotecas de maneira mais rápida aos usuários. Bootstrap CSS, JavaScript e jQuery são necessários para tornar nossos projetos responsivos e compatíveis com qualquer dispositivo — além de bonitos, é claro.
Usando o Bootstrap CDN, na prática
O código seguinte foi preparado usando os links do Bootstrap CDN, e pode ser utilizado em qualquer máquina, sem a necessidade de instalação dos componentes:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Starter Template - Exemplo Trybe </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Olá, Mundo!</h1>
<p>Este é um template básico utilizando o Bootstrap</p>
</div>
<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.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
Repare, em nosso exemplo acima, que os locais em que estão disponibilizadas as nossas style sheets, assim como os scripts de JS de nosso sistema, estão hospedados em um endereço — esses são arquivos disponibilizados remotamente, pelos CDNs.
Nesse caso, basta utilizarmos as classes contidas no framework para que funcionem, sem a necessidade de estarem contidas em nossos projetos.
Bootstrap CDN: classes de tipografia
Entre vários outros elementos, é possível configurarmos, também, a tipografia de nossa página por meio dele. Para facilitar sua compreensão, trazemos, a seguir, alguns exemplos que podem ser aplicados por pessoas iniciantes que desejam um maior aprofundamento na ferramenta. Veja!
Classes de capitalização
Indica que um texto é capitalizado ou não. Utilize as classes text-lowercase, uppercase e capitalize para sua aplicação, da seguinte forma:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Tipografia</h2>
<p class="text-lowercase">Caixa Baixa.</p>
<p class="text-uppercase">Caixa Alta.</p>
<p class="text-capitalize">Capitalize o texto!</p>
</div>
</body>
</html>
O navegador mostrará o seguinte resultado:
Classes de Alinhamento
Também é possível usar o Bootstrap em sua versão CDN para alinhar o conteúdo de sua página. Para isso, você deverá utilizar as classes text-start, end ou center para definir o posicionamento de seu parágrafo. Veja, na prática, a aplicação dessas classes, no exemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Tipografia Bootstrap CDN</h2>
<p class="text-start">Alinhamento à esquerda.</p>
<p class="text-end">Alinhamento à direita.</p>
<p class="text-center">Centralizado.</p>
<p class="text-nowrap">Texto sem quebra. Texto sem quebra. </p>
</div>
</body>
</html>
O resultado que o navegador mostrará para o código deverá ser bem parecido com isso:
Classes de estilização de listas
A classe .list-unstyled remove o estilo de lista padrão:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Elementos de Tipografia com Bootstrap CDN</h2>
<p>A classe .list-unstyled remove o estilo de lista padrão:</p>
<ul class="list-unstyled">
<li>PHP</li>
<li>JAVA
<ul>
<li>PYTHON</li>
<li>C#</li>
</ul>
</li>
<li>GO</li>
</ul>
</div>
</body>
</html>
O resultado deverá ser bem parecido com o seguinte:
Inputs de teclado
Se por acaso você precisar designar algum comando que deve ser especificamente realizado em um teclado, você poderá utilizar o parâmetro <kbd>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Keyboard Inputs</h1>
<p>Use <kbd>ctrl + p</kbd> para abrir o menu de impressão</p>
</div>
</body>
</html>
O navegador mostrará o seguinte resultado:
Estilização apropriada de códigos
É possível estilizarmos apenas códigos de linguagens durante os conteúdos textuais em nossas páginas. Veja, a seguir, como fazer a aplicação, usando a tag <code>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap CDN</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Códigos</h1>
<p>Códigos são estilizados de maneira diferente da fonte padrão:</p>
<p>São elementos HTML: <code>H1</code>, <code>span</code>, <code>div</code> and <code>script</code> .</p>
</div>
</body>
</html>
A saída deverá ser bem parecida com essa:
Confira um template pronto usando Bootstrap CDN
Na sequência, você poderá conferir uma página completa e funcional baseada inteiramente no Bootstrap CDN. Copie o código em sua máquina e faça modificações — tipografia, disposição dos conteúdos e tudo o mais que você encontrar durante a exploração!
Lembre-se de que programação é prática. Cada um dos problemas com que você se deparar e resolver fará uma enorme diferença quando você precisar solucionar questões reais nos projetos do dia a dia da pessoa desenvolvedora. Confira:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap 5 - Exemplo Blog da Trybe </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>Minha página Bootstrap CDN</h1>
<p>Este site é reponsivo, redimensione e confira!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Página inicial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">um link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">outro link</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Sobre</h2>
<h5>Imagem 1:</h5>
<div class="fakeimg">Imagem</div>
<p>Algum texto aqui</p>
<h3 class="mt-4">Alguns links aqui</h3>
<p>Mais texto aqui</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">outro link</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Título Head</h2>
<h5>Descrição e data</h5>
<div class="fakeimg">Imagem</div>
<p>Texto, texto,texto</p>
<p>Parágrafo</p>
<h2 class="mt-5">Outro título</h2>
<h5>Outra descrição</h5>
<div class="fakeimg">Outra imagem</div>
<p>Texto</p>
<p>... e mais texto</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>Rodapé</p>
</div>
</body>
</html>
O código deverá ficar bem parecido com isso, no navegador:
Neste guia, exploramos os principais detalhes que compõem o Bootstrap e seu modelo mais utilizado no mercado, o Bootstrap CDN. Aprendemos que uma de suas principais vantagens está em seu acesso compartilhado e instantâneo, sem a necessidade de carregar os arquivos de framework em nossas aplicações e páginas, deixando-as mais leves e com acesso mais facilitado aos usuários.
Vimos como utilizar o framework em nossos projetos a partir dos servidores CDN, e como aplicar o framework com essas condições, além de alguns recursos que podem ser utilizados. Tudo com a ajuda de exemplos práticos e que podem ser facilmente utilizados por pessoas iniciantes para um aprendizado mais próximo com a ferramenta e seus recursos disponibilizados.
E aí, gostou e quer aprender ainda mais a programar para a Web? Então, faça a sua inscrição em nosso processo seletivo, acesse nosso curso introdutório gratuito de JavaScript!
