1 00:00:03,650 --> 00:00:08,240 Puede que tenga varias razones para llamar la atención de los visitantes sobre 2 00:00:08,240 --> 00:00:11,890 ciertas partes de su sitio web o tal vez desee alertar a 3 00:00:11,890 --> 00:00:16,370 los usuarios sobre cierta información o puede que desee mantener 4 00:00:16,370 --> 00:00:22,150 informados a los usuarios sobre el progreso de una operación que inicien en su sitio web. 5 00:00:22,150 --> 00:00:25,840 Veamos algunos mecanismos diferentes que 6 00:00:25,840 --> 00:00:30,750 bootstrap proporciona para este tipo de operaciones. 7 00:00:30,750 --> 00:00:38,810 Bootstrap tiene muchos componentes diferentes que nos permiten mantener informados a los usuarios. 8 00:00:38,810 --> 00:00:42,440 Tenemos insignias que nos permiten llamar la atención de 9 00:00:42,440 --> 00:00:46,550 los usuarios sobre las actualizaciones recientes de nuestra página web. 10 00:00:46,550 --> 00:00:48,365 Tenemos 11 00:00:48,365 --> 00:00:52,010 mensajes de alerta, error y advertencia que se pueden entregar a los usuarios 12 00:00:52,010 --> 00:00:56,470 si realizan operaciones que no están permitidas. 13 00:00:56,470 --> 00:01:01,870 Además, podemos utilizar barras de progreso para mantener a los usuarios informados 14 00:01:01,870 --> 00:01:08,135 sobre el progreso de cualquier operación que inicien en nuestro sitio web. 15 00:01:08,135 --> 00:01:11,455 Veamos esto con un poco más de detalle a continuación. Las 16 00:01:11,455 --> 00:01:15,800 insignias son una forma fácil de añadir una pequeña cantidad de 17 00:01:15,800 --> 00:01:21,085 información a su sitio web para atraer la atención de los visitantes. 18 00:01:21,085 --> 00:01:24,710 Como ejemplo, se puede ver que hemos añadido un par de insignias a 19 00:01:24,710 --> 00:01:30,890 esta descripción del plato aquí en nuestra página principal para que 20 00:01:30,890 --> 00:01:37,480 pueda ver que tenemos la insignia de color rojo que llama la atención de los usuarios 21 00:01:37,480 --> 00:01:40,495 sobre el hecho de que este es un elemento caliente en el menú 22 00:01:40,495 --> 00:01:44,605 y quizás incluso informarles sobre el precio del menú. 23 00:01:44,605 --> 00:01:51,455 Este tipo de pequeñas piezas de información se puede agregar a su sitio web usando una insignia. 24 00:01:51,455 --> 00:01:52,960 Una insignia, por ejemplo, 25 00:01:52,960 --> 00:02:00,400 la roja aquí se crea usando un span con la insignia de clases y la insignia de peligro. 26 00:02:00,400 --> 00:02:04,495 Puede usar los otros colores que están integrados en 27 00:02:04,495 --> 00:02:11,945 el marco de arranque para crear insignias de varios colores diferentes. 28 00:02:11,945 --> 00:02:18,075 Del mismo modo, puede usar una insignia píldora que crea un rectángulo redondeado como se ve aquí, 29 00:02:18,075 --> 00:02:21,700 y eso se puede hacer aplicando la insignia, la 30 00:02:21,700 --> 00:02:26,000 clase badge-píldora junto con la clase de insignia. 31 00:02:26,000 --> 00:02:30,655 Las alertas son otra forma de informar a los usuarios sobre la información. 32 00:02:30,655 --> 00:02:37,245 Así, por ejemplo, se puede crear una alerta usando el componente de alerta 33 00:02:37,245 --> 00:02:45,370 que simplemente se puede crear aplicando la alerta con advertencia de alerta, por ejemplo, 34 00:02:45,370 --> 00:02:50,285 en este ejemplo se ve advertencia creando una alerta de color amarillo. 35 00:02:50,285 --> 00:02:57,075 Puede aplicar nuevamente peligro primario y otros colores de arranque allí. 36 00:02:57,075 --> 00:02:59,955 Y luego alert-despermisible clase, 37 00:02:59,955 --> 00:03:06,190 le permite incluir una clase allí en la que el usuario puede hacer clic para descartar una alerta. 38 00:03:06,190 --> 00:03:08,140 Para apoyar esa operación, 39 00:03:08,140 --> 00:03:14,625 también debe incluir un botón en su alerta como puede ver dentro de este div, 40 00:03:14,625 --> 00:03:16,740 incluimos este botón aquí. 41 00:03:16,740 --> 00:03:23,505 Y el contenido de la alerta se puede formatear usando HTML estándar como se puede ver aquí. 42 00:03:23,505 --> 00:03:27,490 Por lo tanto, esto nos permite crear una alerta en nuestra página web. 43 00:03:27,490 --> 00:03:32,320 Por lo tanto, para resumir, la Alerta se puede crear mediante una aplicación de la clase de alerta 44 00:03:32,320 --> 00:03:37,585 junto con clases de alerta de calificación adicionales, 45 00:03:37,585 --> 00:03:40,560 que le permiten crear alertas en diferentes colores. 46 00:03:40,560 --> 00:03:43,145 También podemos incluir enlaces en nuestras alertas. 47 00:03:43,145 --> 00:03:46,110 También podemos hacer que la alerta sea inadmisible usando 48 00:03:46,110 --> 00:03:51,260 la clase de alerta inadmisible e incluyendo un botón cruzado dentro de nuestra alerta. 49 00:03:51,260 --> 00:03:55,360 Del mismo modo, las barras de progreso se incluyen en los sitios web para mantener 50 00:03:55,360 --> 00:03:59,680 informados a los usuarios sobre el progreso de lo que hemos iniciado en el sitio web. 51 00:03:59,680 --> 00:04:04,100 Así, por ejemplo, si estás cargando un archivo a un sitio web 52 00:04:04,100 --> 00:04:08,105 , es posible que quieras mantener informado al usuario sobre la cantidad del archivo que ha 53 00:04:08,105 --> 00:04:12,780 completado la carga mostrando una barra de progreso en el sitio web. 54 00:04:12,780 --> 00:04:16,780 Por lo tanto, crear una barra de progreso en bootstrap se 55 00:04:16,780 --> 00:04:22,155 realiza aplicando la clase de progreso a un div y dentro de eso podemos aplicar 56 00:04:22,155 --> 00:04:26,265 otro div interno con la barra de progreso de la clase y 57 00:04:26,265 --> 00:04:30,695 también permitir que eso se diseñe aún más usando cosas como 58 00:04:30,695 --> 00:04:34,890 barra de progreso rayada y luego puedes aplicar el color para 59 00:04:34,890 --> 00:04:40,180 la barra de progreso especificando el color como guión BG y el color. 60 00:04:40,180 --> 00:04:44,910 Entonces, en este caso, el peligro bg-se aplica a esta barra de progreso. 61 00:04:44,910 --> 00:04:47,150 También podemos hacer la parte de progreso rayada, 62 00:04:47,150 --> 00:04:49,395 también podemos animar la barra de progreso, 63 00:04:49,395 --> 00:04:54,100 y también especificar cuánto de esa barra de progreso debe estar en forma. 64 00:04:54,100 --> 00:04:58,015 Por lo tanto, cambiando este valor de ancho 65 00:04:58,015 --> 00:05:04,925 dinámicamente puede crear una barra de progreso que seguirá actualizándose en la página web. 66 00:05:04,925 --> 00:05:08,350 Por lo tanto, para resumir, se puede crear una barra de 67 00:05:08,350 --> 00:05:12,030 progreso aplicando una clase de progreso al div y dentro de 68 00:05:12,030 --> 00:05:14,260 allí un div interno al que aplique 69 00:05:14,260 --> 00:05:18,800 la clase de barra de progreso le permitirá crear barra de progreso. 70 00:05:18,800 --> 00:05:22,450 Incluso puede apilar varias barras de progreso juntas para crear 71 00:05:22,450 --> 00:05:28,325 una barra de progreso apilada y también aplicar diferentes colores a la barra de progreso y también 72 00:05:28,325 --> 00:05:32,865 puede tener un aspecto diferente para la barra de progreso usando 73 00:05:32,865 --> 00:05:36,570 la clase rayada barra de progreso y también la clase 74 00:05:36,570 --> 00:05:41,375 animada barra de progreso para animar el rayas en nuestra barra de progreso. 75 00:05:41,375 --> 00:05:45,515 Ahora que hemos analizado varias formas de alertar a los usuarios, 76 00:05:45,515 --> 00:05:50,925 vamos a hacer un ejercicio sencillo a continuación y utilizar insignias 77 00:05:50,925 --> 00:05:58,090 en nuestra página web para llamar la atención de los usuarios.