Puede que tenga varias razones para llamar la atención de los visitantes sobre
ciertas partes de su sitio web o tal vez desee alertar a
los usuarios sobre cierta información o puede que desee mantener
informados a los usuarios sobre el progreso de una operación que inicien en su sitio web.
Veamos algunos mecanismos diferentes que
bootstrap proporciona para este tipo de operaciones.
Bootstrap tiene muchos componentes diferentes que nos permiten mantener informados a los usuarios.
Tenemos insignias que nos permiten llamar la atención de
los usuarios sobre las actualizaciones recientes de nuestra página web.
Tenemos
mensajes de alerta, error y advertencia que se pueden entregar a los usuarios
si realizan operaciones que no están permitidas.
Además, podemos utilizar barras de progreso para mantener a los usuarios informados
sobre el progreso de cualquier operación que inicien en nuestro sitio web.
Veamos esto con un poco más de detalle a continuación. Las
insignias son una forma fácil de añadir una pequeña cantidad de
información a su sitio web para atraer la atención de los visitantes.
Como ejemplo, se puede ver que hemos añadido un par de insignias a
esta descripción del plato aquí en nuestra página principal para que
pueda ver que tenemos la insignia de color rojo que llama la atención de los usuarios
sobre el hecho de que este es un elemento caliente en el menú
y quizás incluso informarles sobre el precio del menú.
Este tipo de pequeñas piezas de información se puede agregar a su sitio web usando una insignia.
Una insignia, por ejemplo,
la roja aquí se crea usando un span con la insignia de clases y la insignia de peligro.
Puede usar los otros colores que están integrados en
el marco de arranque para crear insignias de varios colores diferentes.
Del mismo modo, puede usar una insignia píldora que crea un rectángulo redondeado como se ve aquí,
y eso se puede hacer aplicando la insignia, la
clase badge-píldora junto con la clase de insignia.
Las alertas son otra forma de informar a los usuarios sobre la información.
Así, por ejemplo, se puede crear una alerta usando el componente de alerta
que simplemente se puede crear aplicando la alerta con advertencia de alerta, por ejemplo,
en este ejemplo se ve advertencia creando una alerta de color amarillo.
Puede aplicar nuevamente peligro primario y otros colores de arranque allí.
Y luego alert-despermisible clase,
le permite incluir una clase allí en la que el usuario puede hacer clic para descartar una alerta.
Para apoyar esa operación,
también debe incluir un botón en su alerta como puede ver dentro de este div,
incluimos este botón aquí.
Y el contenido de la alerta se puede formatear usando HTML estándar como se puede ver aquí.
Por lo tanto, esto nos permite crear una alerta en nuestra página web.
Por lo tanto, para resumir, la Alerta se puede crear mediante una aplicación de la clase de alerta
junto con clases de alerta de calificación adicionales,
que le permiten crear alertas en diferentes colores.
También podemos incluir enlaces en nuestras alertas.
También podemos hacer que la alerta sea inadmisible usando
la clase de alerta inadmisible e incluyendo un botón cruzado dentro de nuestra alerta.
Del mismo modo, las barras de progreso se incluyen en los sitios web para mantener
informados a los usuarios sobre el progreso de lo que hemos iniciado en el sitio web.
Así, por ejemplo, si estás cargando un archivo a un sitio web
, es posible que quieras mantener informado al usuario sobre la cantidad del archivo que ha
completado la carga mostrando una barra de progreso en el sitio web.
Por lo tanto, crear una barra de progreso en bootstrap se
realiza aplicando la clase de progreso a un div y dentro de eso podemos aplicar
otro div interno con la barra de progreso de la clase y
también permitir que eso se diseñe aún más usando cosas como
barra de progreso rayada y luego puedes aplicar el color para
la barra de progreso especificando el color como guión BG y el color.
Entonces, en este caso, el peligro bg-se aplica a esta barra de progreso.
También podemos hacer la parte de progreso rayada,
también podemos animar la barra de progreso,
y también especificar cuánto de esa barra de progreso debe estar en forma.
Por lo tanto, cambiando este valor de ancho
dinámicamente puede crear una barra de progreso que seguirá actualizándose en la página web.
Por lo tanto, para resumir, se puede crear una barra de
progreso aplicando una clase de progreso al div y dentro de
allí un div interno al que aplique
la clase de barra de progreso le permitirá crear barra de progreso.
Incluso puede apilar varias barras de progreso juntas para crear
una barra de progreso apilada y también aplicar diferentes colores a la barra de progreso y también
puede tener un aspecto diferente para la barra de progreso usando
la clase rayada barra de progreso y también la clase
animada barra de progreso para animar el rayas en nuestra barra de progreso.
Ahora que hemos analizado varias formas de alertar a los usuarios,
vamos a hacer un ejercicio sencillo a continuación y utilizar insignias
en nuestra página web para llamar la atención de los usuarios.