Bootstrap é uma estrutura CSS projetada para criar sites responsivos e, especialmente, os sites desenvolvidos para celulares antes de serem projetados para qualquer outro tipo de dispositivo. Essa estrutura foi desenvolvida usando HTML, CSS e JavaScript, e consiste em modelos para criar vários elementos, como botões, formas, suspensos e muito mais. Além disso, essa estrutura é de código aberto e também é livre para usar.

Como o título do artigo sugere, aqui o foco principal de nossa discussão será o bootstrap 5. Portanto, sem mais delongas, vamos começar.

O que é Bootstrap 5?

Bootstrap 5 é a versão mais recente da estrutura do bootstrap que permite que seus usuários criem sites incríveis com folhas de estilo CSS rápidas e resposta aprimorada. Foi lançado no ano de 2021 e é suportado por quase todos os navegadores e plataformas. \

Recursos de bootstrap

Algumas das características distintivas do bootstrap 5 são as seguintes.

1. Esta versão mais recente do bootstrap é leve e pode ser personalizada de acordo com as necessidades dos usuários.
2. Consiste em maior capacidade de resposta.
3. É útil para desenvolver sites projetados para telefones celulares primeiro e outros dispositivos posteriormente.
4. Esta estrutura é compatível com todos os navegadores modernos.
5. É mais rápido, economizando muito tempo e energia.

Bootstrap 5 vs. Outras versões

Em comparação com outras versões, especificamente versão 3 e versão 4, o Bootstrap 5 usa JavaScript de baunilha em vez de jQuery. No entanto, as versões mais antigas ainda podem ser usadas para consertar bug ou alteração da documentação.

Agora que temos uma introdução básica do que é o Bootstrap 5, vamos construir nossa primeira página da web usando esta estrutura.

Meu primeiro programa Bootstrap5

Com o objetivo de usar o bootstrap 5, você obviamente precisa instalá -lo primeiro. Você pode incluir esta estrutura da rede de entrega de conteúdo ou baixar e instalá -la no bootstrap.com. A primeira abordagem é preferida se você não quiser hospedar Bootstrap 5. Abaixo, damos o CDN do bootstrap 5.

Para CSS

Para javascript

Agora que temos nosso CDN, vamos construir uma página da web usando o bootstrap 5. Abaixo, fornecemos um guia passo a passo.

Passo 1
A primeira etapa para usar o Bootstrap 5 é incluir HTML5 Doctype para que o Bootstrap 5 possa fazer uso completo de vários elementos HTML e CSS Properties.

>

Além do html5 doctype, também incluímos o atributo Lang, junto com um conjunto de personagens.

Passo 2
Como sabemos, o Bootstrap 5 desenvolve um site com uma abordagem para celular, portanto, a próxima etapa é adicionar uma meta tag responsiva para garantir que o site construído como resultado responda ao toque e zoom.

Inclua o seguinte a tag.

etapa 3
Uma necessidade básica do bootstrap 5 é incluir um contêiner com o objetivo de envolver o conteúdo do site. Esses recipientes basicamente envolvem elementos dentro deles. Para usar esses contêineres, use as duas classes a seguir.

1. .recipiente Para construir um recipiente com largura fixa, mas responsiva.
2. .Fluid de contêiner Para fazer um contêiner de largura completa que se estende pela largura completa da viewport.

Passo 4
Para esta etapa, adicionaremos algum conteúdo para criar nossa página da web usando o contêiner de largura fixa. Estamos mantendo nosso programa muito simples para que, como iniciante, é fácil entender o Bootstrap 5.

Bootstrap 5

Bootstrap 5 é a versão mais recente da estrutura do Bootstrap que permite que seu usuário crie sites incríveis com CSS rápido
folhas de estilo e capacidade de resposta aprimorada.

Em comparação com outras versões especificamente versão 3 e versão 4, o bootstrap 5 usa JavaScript de baunilha em vez de
jQuery.

No código acima, usando a classe de contêineres, criamos um elemento div que nibe ainda mais um título e dois parágrafos. Para ver o efeito total do bootstrap 5 redimensione a janela do seu navegador. Na saída abaixo, mostramos como a página olha para tamanhos de tela aleatórios.

Saída
Quando a largura da tela é 837px, e acima.

Quando a largura da tela é 677px e menor.

Uma página da web foi criada com sucesso usando o bootstrap 5.

Conclusão

O Bootstrap 5 é a versão mais recente da estrutura de bootstrap CSS que permite que seus usuários criem sites que são responsivos na natureza e com uma abordagem móvel primeiro. Esta versão tem folhas de estilo rápido e capacidade de resposta aprimorada e foi lançada em 2021. Tem muitos recursos incríveis que o distinguem de outras versões. Em comparação com outras versões, especificamente versão 3 e versão 4, o Bootstrap 5 usa JavaScript de baunilha em vez de jQuery. Este tutorial abrange todos os detalhes necessários sobre o Bootstrap 5, juntamente com um programa simples.