O Bootstrap 5 é a versão mais recente da estrutura do bootstrap que permite que seus usuários criem sites responsivos criados com a técnica móvel primeiro. O Bootstrap 5 foi lançado no ano de 2021 e possui muitas características distintivas, como as folhas de estilos rápidas e a capacidade de resposta aprimorada. Neste tutorial, vamos demonstrar como você pode criar uma página da web simples usando o bootstrap 5.

Vamos começar.

Como criar sua primeira página da web usando o bootstrap 5

Inclua Bootstrap 5

O primeiro passo é obviamente adicionar Bootstrap 5 no seu arquivo html. Com o objetivo de incluir o bootstrap 5, obtenha um CDN para CSS, e JavaScript e adicione -o ao seu arquivo como mostramos abaixo.

Além do CDN, também adicionamos um conjunto de caracteres UTF-8 junto com uma meta tag responsiva. Nesta tag, a largura está definida como largura do dispositivo, o que significa que a largura da página da web mudará na correspondência à largura do dispositivo, enquanto que a escala inicial é definida como 1, o que significa que quando a página da web é carregada pelo navegador Pela primeira vez, o nível de zoom será 1.

Faça uma barra de navegação

Depois de incluir o Bootstrap 5 em nosso arquivo, agora faremos uma barra de navegação superior usando várias classes Bootstrap 5.

Abaixo, vamos explicar as várias classes usadas para criar uma barra de navegação.

1. O .Navi é usado para embrulhar uma barra de navegação junto com .NavBar-Expand-Sm para o colapso responsivo, enquanto isso, o .BG-secundário e .Navbar-Dark são os diferentes esquemas de cores fornecidos à barra de navegação.
2. O .recipiente A classe envolve todos os elementos de uma barra de navegação com uma largura fixa.
3. O .Texto branco e .Centro de texto As classes correspondem à cor e alinhamento do cabeçalho principal do site.
4. O .Navbar-Nav é usado para criar uma barra de navegação com altura máxima e é leve e também suporta suspensos. Enquanto isso, .ML-AUTO Define a margem esquerda dos itens da lista para automaticamente.
5. O .NAV-ITEM, e .Nav-link são usados ​​para criar vários itens de lista na barra de navegação.
6. O .ativo Classe torna um link ativo.

Saída

Uma barra de navegação foi criada com sucesso.

Adicionando conteúdo

Agora que criamos com sucesso uma barra de navegação, adicionaremos algum conteúdo no site. No código abaixo, estamos apenas adicionando algum texto à seção "Sobre nós".

Sobre nós

Oi. Bem -vindo à minha primeira página da web. Esta é uma página da web responsiva que eu criei usando o bootstrap 5. O Bootstrap é a versão mais recente da estrutura de bootstrap que permite que seus usuários criem sites responsivos com uma técnica móvel primeiro. Esta abordagem afirma que o web design é desenvolvido pela primeira vez para telefones celulares e, posteriormente, para outros dispositivos.

O Bootstrap 5 foi lançado no ano de 2021 e possui muitos recursos incríveis, como as folhas de estilos rápidas e a capacidade de resposta aprimorada.

Várias classes usadas para adicionar conteúdo na página da web são explicadas aqui.

1. O .linha A classe cria uma fileira na qual vamos colocar nosso texto, enquanto isso, .alinhe-itens-esquerda classe alinha o conteúdo à esquerda.
2. O .col A classe gera uma coluna, enquanto que, o .Text-Col A classe fornece uma cor padrão para o texto.

Observação: Com o objetivo de adicionar conteúdo, basicamente construímos um sistema de grade acima. Um sistema de grade no Bootstrap 5 utiliza vários recipientes, linhas e colunas para ajustar e alinhar o conteúdo.

Saída

Algum conteúdo foi adicionado à página da web.

Adicionando Galeria de Imagens

Para tornar nosso site mais interessante, agora estamos adicionando algumas imagens construindo outro sistema de grade.

Aqui explicamos as classes usadas acima.

1. O .COL-MD-4 A classe cria quatro colunas de igual largura e especifica que a largura do dispositivo é média ou maior que 768px, enquanto isso, a largura do contêiner é de 720px.
2. O .MT-3 A classe fornece uma margem superior para o layout da grade.
3. O .COL-LG-3 A classe cria 3 colunas de igual largura e afirma que a largura do dispositivo é grande com tamanho de tela maior ou igual a 992px.
4. Por fim, as imagens são responsivas o .IMG-FLUID Classe.

Saída

Uma galeria de imagens responsivas foi adicionada com sucesso.

Adicionando um botão

Por fim, vamos adicionar um botão em nosso site.

Contate-nos

As aulas usadas para criar o botão são discutidas abaixo.

1. O .mt-2 define a margem superior do botão.
2. Com o objetivo de personalizar nosso botão, estamos usando o .btn aula, enquanto isso, o .BTN-secundário classe especifica a cor do botão e o .Btn-Large A classe declara o tamanho do botão.

Saída
É assim que a página completa da web se parece.

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

Observação: Para avaliar a capacidade de resposta da página da web, escala o navegador da web para cima e para baixo.

Conclusão

Com o objetivo de criar sua primeira página da web usando o bootstrap 5, você precisa ter um entendimento básico de várias classes embutidas de Bootstrap 5. Uma necessidade básica dessa estrutura é um recipiente que envolve elementos dentro dele. As classes de contêiner podem ser usadas com outras classes para construir várias entidades que uma página da web possui, como uma barra de navegação, grade de imagem, botões, etc. Nesta redação, demonstramos com a ajuda de um exemplo apropriado de como você pode criar sua primeira página da web usando o bootstrap 5.