Tutorial básico do Bootstrap

Plugin do Bootstrap

Objeto Multimídia do Bootstrap Avisos do Bootstrap

Barra de Progresso do Bootstrap

Este capítulo explicará as barras de progresso do Bootstrap. Neste tutorial, você verá como usar o Bootstrap para criar barras de progresso de estado de carregamento, redirecionamento ou ação.

Barras de progresso do Bootstrap usam CSS3 transições e animações para obter esse efeito. Internet Explorer 9 e versões mais antigas e Firefox antigos não suportam essa característica, Opera 12 Não suporta animação.

Barra de progresso padrão

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

Adicione uma classe .progress do <div>.
Em seguida, dentro do <div> acima, adicione um atributo class .progress-bar um <div> vazio.
Adicionar um atributo de estilo com representação de porcentagem da largura, por exemplo, style="largura: 60%"; Isso indica que a barra de progresso está 60% de posição.

Vamos ver o exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Barra de progresso</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 progresso" aria-valuenow="60
		　aria-valuemin="0" aria-valuemax="100" style="largura:　40%;">
		<span class="sr-only">40% Concluído </span>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Barra de progresso alternada

Os passos para criar barras de progresso de diferentes estilos são os seguintes:

Adicione uma classe .progress do <div>.
Em seguida, dentro do <div> acima, adicione um atributo class .progress-bar e a classe progress-bar-* um <div> vazio. Dentre eles,* pode ser success, info, warning, danger.
Adicione um atributo style com a largura em porcentagem, por exemplo, style="60%"; Isso indica que a barra de progresso está 60% de posição.

Vamos ver o exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Barra de progresso alternada</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="width:　90%;">
		<span class="sr-only">90% Concluído (Sucesso) </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="width:　30%;">
		<span class="sr-only">30% Concluído (Informação) </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="width:　20%;">
		<span class="sr-only">20% Concluído (Aviso) </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="width:　10;%">
		<span class="sr-only">10% Concluído (Perigo) </span>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Barras de progresso listradas

Os passos para criar uma barra de progresso listrada são os seguintes:

Adicione uma classe .progress e .progress-striped do <div>.
Em seguida, dentro do <div> acima, adicione um atributo class .progress-bar e a classe progress-bar-* um <div> vazio. Dentre eles,* pode ser success, info, warning, danger.
Adicione um atributo style com a largura em porcentagem, por exemplo, style="60%"; Isso indica que a barra de progresso está 60% de posição.

Vamos ver o exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Exemplo Bootstrap　-　Barras de progresso listradas</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="width:　90%;">
　　　　　　　　<span class="sr-only">90% Concluído (Sucesso) </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="width:　30%;">
　　　　　　　　<span class="sr-only">30% Concluído (Informação) </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="width:　20%;">
　　　　　　　　<span class="sr-only">20% Concluído (Aviso) </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="width:　10;%">
　　　　　　　　<span class="sr-only">10% Concluído (Perigo) </span>
　　　　</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Barras de progresso animadas

Os passos para criar uma barra de progresso animada são os seguintes:

Adicione uma classe .progress e .progress-striped Adicione as classes .active.
Em seguida, dentro do <div> acima, adicione um atributo class .progress-bar um <div> vazio.
Adicione um atributo style com a largura em porcentagem, por exemplo, style="60%"; Isso indica que a barra de progresso está 60% de posição.

Isso fará com que as listras tenham um movimento de direita para esquerda.

Vamos ver o exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Barras de progresso 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="width:　40%;">
		<span class="sr-only">40% Concluído </span>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Barras de progresso empilhadas

Você pode empilhar várias barras de progresso. Coloque várias barras de progresso na mesma .progress É possível empilhar, conforme o exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Barras de progresso empilhadas</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="width:　40%;">
		<span class="sr-only">40% Concluído </span>
	</div>
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="width:　30%;">
		<span class="sr-only">30% Concluído (Informação) </span>
	</div>
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100
		　style="width:　20%;">
		<span class="sr-only">20% Concluído (Aviso) </span>
	</div>
</div>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Objeto Multimídia do Bootstrap Avisos do Bootstrap