English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

オンラインツール

Bootstrap 基礎チュートリアル

Bootstrap プログレスバー

Bootstrap プラグイン

を使用しています。この章では、Bootstrap プログレスバーについて説明します。このチュートリアルでは、Bootstrapを使ってロード、リダイレクト、またはアクション状態のプログレスバーを作成する方法を見ていきます。3 トランジションやアニメーションを使用してこの効果を得ます。Bootstrap プログレスバーは CSS 9 およびより古いバージョンのFirefoxや旧バージョンのOperaもこの機能をサポートしていません、Internet Explorer 12 アニメーションはサポートされていません。

デフォルトのプログレスバー

基本的なプログレスバーを作成する手順は以下の通りです：

  • を追加します。 .progress を持つ <div>。</div>

  • 次に、上記の <div> 内に、classを持つ .progress-bar の空の <div>。</div>

  • パーセンテージ表示付きの幅を持つstyle属性を追加します、例えば style="width: 60%"; というのは、進捗バーが 60% の位置。

以下の例を見てみましょう：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8"-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>

  • 次に、上記の <div> 内に、classを持つ .progress-bar とclass progress-bar-* の空の <div>。</div> その中で、* 以下のものができます。 success、info、warning、danger。</div>

  • 幅を示すパーセンテージを持つスタイル属性を追加する例：style="60%"; というのは、進捗バーが 60% の位置。

以下の例を見てみましょう：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8"-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>

  • 次に、上記の <div> 内に、classを持つ .progress-bar とclass progress-bar-* の空の <div>。</div> その中で、* 以下のものができます。 success、info、warning、danger。</div>

  • 幅を示すパーセンテージを持つスタイル属性を追加する例：style="60%"; というのは、進捗バーが 60% の位置。

以下の例を見てみましょう：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8"-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 を追加して、class .active。</div>

  • 次に、上記の <div> 内に、classを持つ .progress-bar の空の <div>。</div>

  • 幅を示すパーセンテージを持つスタイル属性を追加する例：style="60%"; というのは、進捗バーが 60% の位置。

これにより、ストライプが右から左に動くように見えます。

以下の例を見てみましょう：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8"-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"-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 警告