A criação de barras de progresso com Bootstrap 5 envolve o uso de seus utilitários integrados. Aqui está um guia passo a passo:
Etapa 1:Importar Bootstrap Inclua a biblioteca Bootstrap, seja por meio de um link CDN ou baixando-a localmente.
Etapa 2:Criar barra de progresso Dentro do elemento `div` onde você deseja criar a barra de progresso, use a classe `.progress`.
```html
```
Etapa 3:adicionar o estado da barra de progresso Para preencher a barra de progresso, adicione a classe `.progress-bar` dentro do contêiner `.progress`. Você também pode incluir modificadores para especificar a porcentagem de progresso e o estilo de exibição.
```html
```
Aqui, a classe `.progress-bar` cria a própria barra, e adicionamos a classe `.progress-bar-striped` para dar a ela um efeito listrado. Ajuste `aria-valuenow` para especificar o valor do progresso atual.
Etapa 4:especifique a porcentagem e o rótulo Você pode facilmente adicionar a porcentagem de progresso atual ou um rótulo à barra envolvendo o texto desejado em um elemento `
` dentro do contêiner `.progress-bar`.
```html
```
Etapa 5:animar a barra de progresso
Para habilitar a animação na barra de progresso, use a classe `.progress-bar-animated` no elemento da barra de progresso.
```html
```
Etapa 6:exibir barras de progresso contextuais
Você pode utilizar classes internas do Bootstrap para modificar ainda mais a aparência da barra de progresso, atribuindo as classes `bg-...` e `text-...` dentro de `.progress-bar`.
```html
```
Etapa 7:altura e cantos arredondados
Para modificar a altura da barra de progresso ou adicionar cantos arredondados, use a classe utilitária `.h-*` para altura e a classe `.rounded` para cantos arredondados.
```html
```
Etapa 8:Controlando a exibição
Você pode controlar o aspecto de exibição da barra de progresso usando a classe `.visually-hidden` ou `.d-none` dos utilitários do Bootstrap.
Conclusão:
Com essas etapas, você pode criar facilmente várias barras de progresso do Bootstrap 5 para indicar progresso, estados ou outros dados relevantes em suas páginas da web. É possível personalizar e estilizar as barras de progresso usando classes e propriedades CSS adicionais.
