-
Foundation curso
- Foundation curso
- Foundation iniciado
- Foundation texto
- Foundation mesa
- Foundation pulsador
- Foundation Grupo de botones
- Foundation icono
- Foundation etiqueta
- Foundation cuadro recordatorio
- Foundation Una barra de progreso
- Foundation panel
- Foundation imagen
- Foundation Menú desplegable
- Foundation Lista plegable
- Foundation lista
- Foundation lengüeta
- Foundation paginación
- Foundation lista de precios
- Foundation Barra superior de navegación
- Foundation barra lateral
- Foundation exploración de diapositivas(Off-Canvas)
- Foundation Magellan
- Foundation formulario
- Foundation tamaño de la trama de entrada
- Foundation conmutador
- Foundation deslizador
- Foundation globo
- Foundation cuadro modal
- Foundation Joyride
- Foundation igualada
Foundation malla
- Foundation Sistema de rejilla
- Foundation malla - apilados horizontalmente
- Foundation malla - pequeños equipos
- Foundation malla - equipos de tamaño mediano
- Foundation malla - El equipo grande
- Foundation bloque de rejilla
- Foundation Ejemplos de cuadrícula
Foundation Manual de referencia
El mejor tutorial de Fundación barra de progreso en 2024. En este tutorial podrás aprender El color de la barra de progreso,barra de progreso filete,A Tamaño de la barra de progreso,etiqueta barra de progreso,
Fundación barra de progreso
Fundación puede ser utilizado como una barra de progreso para mostrar el procesamiento del programa de grado:
Podemos <div> usar elemento .progress clase para crear barra de progreso, .meter clase de elemento secundario (<span>). Podemos establecer el porcentaje de avance en el elemento <span>, de la siguiente manera:
Ejemplos
<Class = estilo de "meter" Span = "width: 70%"> </ span>
</ Div>
Trate »
El color de la barra de progreso
Por defecto, el color de la barra de progreso es azul. Los diferentes colores de clase: .secondary , .success , o .alert :
Ejemplos
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "progresar secundaria" >
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "éxito progreso" >
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "alerta progreso" >
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
Trate »
barra de progreso filete
.radius y .round clases se utiliza para añadir esquinas redondeadas para la barra de progreso:
Ejemplos
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "Radio de progreso" >
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "progreso redondeado" >
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
Trate »
A Tamaño de la barra de progreso
Puede utilizar .small- num o .large- num para modificar el ancho de la barra de progreso, num es un número entre 1 (8.33%) y 12 (por defecto (100%)) :
Ejemplos
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "progreso a gran 6">
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "progreso a gran 9">
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<Div class = "progreso a gran 11">
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
<! - La anchura por defecto ->
<Div class = "progreso a gran 12">
<Class = estilo de "meter" Span = "width: 50%"> </ span>
</ Div>
Trate »
etiqueta barra de progreso
CSS se puede utilizar para etiquetar la barra de progreso. El siguiente ejemplo añade un elemento <span> para mostrar porcentajes:
Ejemplos
Naturales Porcentaje {
position: absolute;
superior: 50%;
izquierda: 50%;
color: blanco;
transform: translate (-50%, -50%);
font-size: 12px;
}
</ Style>
<Div class = "progreso">
<Class = estilo de "meter" Span = "position: relative; anchura: 75%">
<Span class = "porcentaje"> 75% </ span>
</ Span>
</ Div>
<Div class = "éxito progreso" >
<Class = estilo de "meter" Span = "position: relative; anchura: 50%">
<Span class = "porcentaje"> 50% </ span>
</ Span>
</ Div>
<Div class = "alerta progreso" >
<Class = estilo de "meter" Span = "position: relative; anchura: 25%">
<Span class = "porcentaje"> 25% </ span>
</ Span>
</ Div>
Trate »