Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. La barra de progreso es una representación pictórica que informa sobre los detalles de cualquier objetivo o tarea, es decir, se utiliza para representar el progreso de una tarea o cualquier operación que muestra cuánto del proceso se completó y cuánto queda. Puede agregar una barra de progreso en una página web utilizando clases de arranque predefinidas. En este artículo, aprenderemos cómo crear una barra de progreso con un color diferente usando clases predefinidas de Bootstrap.
Sintaxis:
<div class="progress">Contents<div>
La barra de progreso en bootstrap se puede crear en diferentes colores. Hay dos métodos para cambiar el color de la barra de progreso en bootstrap.
Método 1: Usar tipo bg:
Podemos agregar la clase bg-type en el div de progreso para cambiar su color. Hay 8 tipos de opciones de personalización de color disponibles en bootstrap5:
- bg-primario
- bg-secundario
- bg-éxito
- bg-peligro
- bg-advertencia
- bg-info
- bg-luz
- bg-oscuro
Ejemplo: Este ejemplo ilustra algunas barras de progreso básicas en diferentes colores. Estas barras de progreso significan una emoción a través de sus colores de fondo, como éxito, peligro y neutralidad. Para crear una parte de la barra de progreso en un color diferente, siga agregando un nuevo div con la barra de progreso de clase dentro del progreso.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <br /> <div class="progress" style="max-width: 60%"> <div class="progress-bar" style="width: 10%">10% </div> <div class="progress-bar bg-success" style="width: 20%">20% </div> <div class="progress-bar bg-danger progress-bar-stripped" style="width: 30%"> 30% </div> <div class="progress-bar bg-warning progress-bar-stripped" style="width: 40%"> 40% </div> </div> </center> </body> </html>
Producción:
Método 2: Usando la propiedad de color de fondo de CSS:
Podemos cambiar el color de la barra de progreso a cualquier color deseado usando el parámetro de estilo con la propiedad de color de fondo. Para crear una parte de la barra de progreso en un color diferente, siga agregando un nuevo div con la barra de progreso de clase dentro del progreso.
Ejemplo: aquí, cambiaremos el color de la barra de progreso usando colores definitivos con la ayuda de sus códigos hexadecimales, nombre o valores RGB.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <br /> <div class="progress" style="max-width: 60%"> <div class="progress-bar" style="width: 80%; background-color: green"> </div> <div class="progress-bar progress-bar-stripped" style="width: 80%; background-color: #66b400"> </div> <div class="progress-bar progress-bar-stripped" style="width: 70%; background-color: rgb(141, 3, 72)"> </div> </div> <br /> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA