Tutorial básico de Bootstrap

Plugin de Bootstrap

Objetos multimedia de Bootstrap Avisos de Bootstrap

Barras de progreso de Bootstrap

Este capítulo explicará la barra de progreso de Bootstrap. En este tutorial, verá cómo usar Bootstrap para crear barras de progreso de estado de carga, redirección o acción.

Bootstrap barra de progreso utiliza CSS3 Transiciones y animaciones para obtener este efecto. Internet Explorer 9 Y versiones anteriores y la versión antigua de Firefox no admiten esta característica, Opera 12 No admite animaciones.

Barra de progreso predeterminada

Los pasos para crear una barra de progreso básica son los siguientes:

Añade una clase .progress del <div>.
A continuación, dentro del <div> superior, añade un atributo class .progress-bar Un <div> vacío.
Añadir un atributo de estilo con un ancho representativo de porcentaje, por ejemplo, style="ancho: 60%"; indica que la barra de progreso está en 60% de posición.

Vamos a ver el siguiente ejemplo:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Barra de progreso</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar" role="barra de progreso" aria-valuenow="60
		　aria-valuemin="0" aria-valuemax="100" style="ancho:　40%;">
		<span class="sr-solo">40% Completado </span>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Barra de progreso alternativa

Los pasos para crear barras de progreso de diferentes estilos son los siguientes:

Añade una clase .progress del <div>.
A continuación, dentro del <div> superior, añade un atributo class .progress-bar y la clase progress-bar-* Un <div> vacío. Entre ellos,* puede ser success, info, warning, danger.
Añade un atributo style con un ancho en porcentaje, por ejemplo style="60%"; indica que la barra de progreso está en 60% de posición.

Vamos a ver el siguiente ejemplo:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Barra de progreso alternativa</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　90%;">
		<span class="sr-solo">90% Completado (éxito) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　30%;">
		<span class="sr-solo">30% Completado (información) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　20%;">
		<span class="sr-solo">20% Completado (advertencia) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-danger" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　10%">;
		<span class="sr-solo">10% Completado (peligroso) </span>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Barras de progreso rayadas

Los pasos para crear una barra de progreso rayada son los siguientes:

Añade una clase .progress y .progress-striped del <div>.
A continuación, dentro del <div> superior, añade un atributo class .progress-bar y la clase progress-bar-* Un <div> vacío. Entre ellos,* puede ser success, info, warning, danger.
Añade un atributo style con un ancho en porcentaje, por ejemplo style="60%"; indica que la barra de progreso está en 60% de posición.

Vamos a ver el siguiente ejemplo:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Ejemplo Bootstrap　-　Barras de progreso rayadas </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-success" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
　　　　　　　　　style="ancho:　90%;">
　　　　　　　　<span class="sr-solo">90% Completado (éxito) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-info" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
　　　　　　　　　style="ancho:　30%;">
　　　　　　　　<span class="sr-solo">30% Completado (información) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-warning" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
　　　　　　　　　style="ancho:　20%;">
　　　　　　　　<span class="sr-solo">20% Completado (advertencia) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-danger" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
　　　　　　　　　style="ancho:　10%">;
　　　　　　　　<span class="sr-solo">10% Completado (peligroso) </span>
　　　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Barras de progreso animadas

Los pasos para crear una barra de progreso animada son los siguientes:

Añade una clase .progress y .progress-striped Añade también las clases .active.
A continuación, dentro del <div> superior, añade un atributo class .progress-bar Un <div> vacío.
Añade un atributo style con un ancho en porcentaje, por ejemplo style="60%"; indica que la barra de progreso está en 60% de posición.

Esto dará una sensación de movimiento de derecha a izquierda a las rayas.

Vamos a ver el siguiente ejemplo:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Barras de progreso animadas </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped active">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　40%;">
		<span class="sr-solo">40% Completado </span>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Barras de progreso apiladas

Puedes apilar múltiples barras de progreso. Coloca múltiples barras de progreso en el mismo .progress Se puede apilar en el medio, como se muestra en el siguiente ejemplo:

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Barras de progreso apiladas </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　40%;">
		<span class="sr-solo">40% Completado </span>
	</div>
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　30%;">
		<span class="sr-solo">30% Completado (información) </span>
	</div>
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="ancho:　20%;">
		<span class="sr-solo">20% Completado (advertencia) </span>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Objetos multimedia de Bootstrap Avisos de Bootstrap