Bootstrap4 Tutoriales básicos

Bootstrap4 Paginación Bootstrap4 Medalla

Bootstrap4 Barra de progreso

El barra de progreso se puede usar para mostrar el progreso de una tarea o operación al usuario. A continuación, se muestra un ejemplo de cómo crear un barra de progreso simple con una transición vertical.

El barra de progreso puede mostrar el proceso de finalización de la tarea del usuario.

Los pasos para crear un barra de progreso básico son los siguientes:

Agregue un atributo .progress clase
A continuación, dentro del <div> anterior, agregue un <div> con la clase .progress-bar Un <div> vacío.
Agregue un atributo de estilo "width" con un ancho en porcentaje, por ejemplo, style="width:70%" indica que el barra de progreso está 70% ubicación.

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Barra de progreso básica</h2>
　　<p>Para crear un barra de progreso predeterminado, agregue la clase "progress" al elemento contenedor y "progress" al elemento hijo-clase "bar" y configure el progreso del barra de progreso: :</p>
　　<div　class="progress">
　　　　<div　class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Altura del barra de progreso

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>进度条高度</h2>
　　<p>进度条高度默认为　16px。我们可以使用　CSS　的　height　属性来修改他：</p>　
　　<div class="progress" style="height:10px;">
　　　　<div　class="progress-bar" style="width:40%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:20px;">
　　　　<div　class="progress-bar" style="width:50%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:30px;">
　　　　<div　class="progress-bar" style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

进度条标签

可以在进度条内添加文本，如进度的百分比：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>进度条文本标签</h2>
　　<div　class="progress">
　　　　<div　class="progress-bar" style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>多种颜色的进度条</h2>
　　<p>Bootstrap4　提供了以下几种进度条颜色:</p>　
　　<div　class="progress">
　　　　<div　class="progress-bar" style="width:30%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-éxito"　style="ancho:40%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-info" style="width:50%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-advertencia"　style="ancho:60%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-peligro"　style="ancho:70%"></div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>条纹的进度条</h2>
　　<p>可以使用　.progress-bar-striped 类来设置条纹进度条：</p>　
　　<div　class="progress">
　　　　<div　class="progress-bar progress-bar-striped" style="width:30%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>动画进度条</h2>
　　<p>使用　.progress-bar-animated 类可以为进度条添加动画：</p>　
　　<div　class="progress">
　　　　<div　class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

混合色彩进度条

进度条可以设置多种颜色：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Barra de progreso de colores mezclados</h2>
　　<p>Se pueden configurar varios colores para la barra de progreso:</p>　
　　<div　class="progress">
　　　　<div　class="progress-bar bg-éxito"　style="ancho:40%">
　　　　　　Espacio libre
　　　　</div>
　　　　<div　class="progress-bar bg-advertencia"　style="ancho:10%">
　　　　　　Advertencia
　　　　</div>
　　　　<div　class="progress-bar bg-peligro"　style="ancho:20%">
　　　　　　Peligro
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Paginación Bootstrap4 Medalla