Bootstrap4 基本チュートリアル

Bootstrap4 進度バー

進度バーはユーザーにタスクや操作の進捗を表示するために使用できます。以下の例では、垂直に緩やかなグラデーションを持つシンプルな進度バーの作成方法を説明します。

進度バーはユーザーのタスクの完了プロセスを表示できます。

基本的な進度バーを作成する手順は以下の通りです：

を追加します。 .progress クラスを持つ <div> を追加します。
次に、上記の <div> 内に class .progress-バー の空の <div> です。
のスタイル属性にパーセンテージ表示付きの幅を追加します。例えば、style="width:70%" は、進度バーが 70% の場所。

示例

!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 クラスを追加し、子要素に progress を追加します。-bar クラスを設定し、進度バーの進捗状況を：:< に設定します。/p>
　　<div　class="progress">
　　　　<div　class="progress-バー"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

進度バーの高さ

進度棒の高さはデフォルトで 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-バー"　style="width:40%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:20px;">
　　　　<div　class="progress-バー"　style="width:50%;"></div>
　　</div>
　　<br>
　　<div　class="progress"　style="height:30px;">
　　　　<div　class="progress-バー"　style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

進度棒タグ

進度棒内にテキストを追加できます、例えば進度のパーセンテージ：

示例

!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-バー"　style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

さまざまな色の進度棒

デフォルトでは進度棒は青色で、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-バー"　style="width:30%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-成功"　style="width:40%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-情報"　style="width:50%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-警告"　style="width:60%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-危険"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

ストライプ付きの進度棒

使用 .progress-バー-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-バー-striped　クラスを使ってストライプ付き進度棒を設定できます：</p>　
　　<div　class="progress">
　　　　<div　class="progress-バー進度棒-バー-striped"　style="width:30%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-成功進度棒-バー-striped"　style="width:40%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-情報進度棒-バー-striped"　style="width:50%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-警告進度棒-バー-striped"　style="width:60%"></div>
　　</div>
　　<br>
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-危険進度棒-バー-striped"　style="width:70%"></div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

アニメーション進度棒

使用 .progress-バー-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-バー-animated　クラスを使うことで進度棒にアニメーションを追加できます：</p>　
　　<div　class="progress">
　　　　<div　class="progress-バー進度棒-バー-ストライプ付き進度棒-バー-animated"　style="width:40%"></div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

ミックスカラーの進度棒

進度棒はさまざまな色を設定できます：

示例

!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>プログレスバーはさまざまな色を設定できます:</p>　
　　<div　class="progress">
　　　　<div　class="progress-バー　bg-成功"　style="width:40%">
　　　　　　フリースペース
　　　　</div>
　　　　<div　class="progress-バー　bg-警告"　style="width:10%">
　　　　　　警告
　　　　</div>
　　　　<div　class="progress-バー　bg-危険"　style="width:20%">
　　　　　　危険
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを試してみる ‹/›

Bootstrap4 ページネーション Bootstrap4 バッジ