Bootstrap4 Tutoriais Básicos

Bootstrap4 Navegação de Páginas Bootstrap4 Bordão

Bootstrap4 Barra de progresso

A barra de progresso pode ser usada para exibir o progresso de uma tarefa ou operação para o usuário. O exemplo a seguir mostrará como criar uma barra de progresso simples com gradientes verticais.

A barra de progresso pode mostrar o processo de conclusão da tarefa do usuário.

Os passos para criar uma barra de progresso básica são os seguintes:

Adicione um atributo .progress classe
Em seguida, dentro do <div> acima, adicione um <div> com a classe .progress-bar um <div> vazio.
Adicione um atributo style com a largura em porcentagem, por exemplo, style="width:70%" indica que a barra de progresso está 70% da posição.

示例

<!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 progresso básica</h2>
　　<p>Para criar uma barra de progresso padrão, adicione a classe "progress" ao elemento de contêiner e a classe "progress" ao elemento filho-Classe "bar" e configure o progresso da barra de progresso: :</p>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Altura da barra de progresso

进度条高度默认为 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>

Teste e Veja ‹/›

进度条标签

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

示例

<!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>

Teste e Veja ‹/›

不同颜色的进度条

默认情况下进度条为蓝色，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-success" style="width: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-warning" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

条纹的进度条

可以使用 .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>

Teste e Veja ‹/›

动画进度条

使用 .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>

Teste e Veja ‹/›

混合色彩进度条

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

示例

<!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>Mistura de Cores da Barra de Progresso</h2>
　　<p>As barras de progresso podem ser configuradas com várias cores:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　Espaço Livre
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　AVISO
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　DANGER
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Bootstrap4 Navegação de Páginas Bootstrap4 Bordão