Основной курс Bootstrap

Bootstrap плагин

Объекты мультимедиа Bootstrap Предупреждения Bootstrap

Ленточки прогресса Bootstrap

В этой главе мы рассмотрим Bootstrap ленту прогресса. В этом руководстве вы увидите, как использовать Bootstrap для создания лент прогресса для загрузки, редиректа или состояния действия.

Bootstrap лента прогресса использует CSS3 переходы и анимацию для достижения этого эффекта. Internet Explorer 9 и более ранние версии, а также старые версии Firefox не поддерживают эту функцию, Opera 12 не поддерживает анимацию.

Базовая лента прогресса

Шаги создания базовой ленты прогресса:

добавьте класс .progress для <div>.
Затем, в <div> сверху, добавьте класс .progress-bar пустого <div>.
Добавьте атрибут style с процентным значением ширины, например style="width: 60%"; это означает, что полоса прогресса находится на 60%.

Давайте посмотрим на пример ниже:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Прогрессивная полоса</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="progressbar" aria-valuenow="60">
		　aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
		<span class="sr-only">40% завершено</span>
	</div>
</div>
</body>
</html>

Тестировать看看 ‹/›

Результаты показаны ниже:

Альтернативная лента прогресса

Шаги создания лент прогресса с различным стилем:

добавьте класс .progress для <div>.
Затем, в <div> сверху, добавьте класс .progress-bar и класс progress-bar-* пустого <div>. Где * может быть success、info、warning、danger.
Добавьте атрибут стиля с百分比 ширины, например style="60%"; это означает, что полоса прогресса находится на 60%.

Давайте посмотрим на пример ниже:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Прогрессивная полоса с альтернативными полосами</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% завершено (успех)</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% завершено (информация)</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% завершено (предупреждение)</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% завершено (опасно)</span>
	</div>
</div>
</body>
</html>

Тестировать看看 ‹/›

Результаты показаны ниже:

Полосная лента прогресса

Шаги создания полосной ленты прогресса:

добавьте класс .progress и .progress-striped для <div>.
Затем, в <div> сверху, добавьте класс .progress-bar и класс progress-bar-* пустого <div>. Где * может быть success、info、warning、danger.
Добавьте атрибут стиля с百分比 ширины, например style="60%"; это означает, что полоса прогресса находится на 60%.

Давайте посмотрим на пример ниже:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Пример Bootstrap - Прогрессивная полоса с полосами</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% завершено (успех)</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% завершено (информация)</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% завершено (предупреждение)</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% завершено (опасно)</span>
　　　　</div>
</div>
</body>
</html>

Тестировать看看 ‹/›

Результаты показаны ниже:

Анимированная лента прогресса

Шаги создания анимированной ленты прогресса:

добавьте класс .progress и .progress-striped для <div>. .active.
Затем, в <div> сверху, добавьте класс .progress-bar пустого <div>.
Добавьте атрибут стиля с百分比 ширины, например style="60%"; это означает, что полоса прогресса находится на 60%.

Это создаст эффект движения полос справа налево.

Давайте посмотрим на пример ниже:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Анимированные полосы прогресса</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% завершено</span>
	</div>
</div>
</body>
</html>

Тестировать看看 ‹/›

Результаты показаны ниже:

Накладные полосы прогресса

Вы можете накладывать несколько полос прогресса. Разместите несколько полос прогресса в одном .progress Реализация накопления на примере, как показано ниже:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Накладные полосы прогресса</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% завершено</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% завершено (информация)</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% завершено (предупреждение)</span>
	</div>
</div>
</body>
</html>

Тестировать看看 ‹/›

Результаты показаны ниже:

Объекты мультимедиа Bootstrap Предупреждения Bootstrap