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 »