ホームページ > 記事 > ウェブフロントエンド > ブートストラップの動的なプログレスバーを作成する方法

ブートストラップの動的なプログレスバーを作成する方法

(*-*)浩オリジナル: 2019-07-11 13:52:064370ブラウズ

このチュートリアルでは、ブートストラップを使用して、読み込み、リダイレクト、またはアクションの状態の進行状況バーを作成する方法を説明します。

ブートストラップの進行状況バーは、CSS3 トランジションとアニメーションを使用してこの効果を実現します。 Internet Explorer 9 以前および古いバージョンの Firefox はこの機能をサポートしておらず、Opera 12 はアニメーションをサポートしていません。 (推奨される学習: Bootstrap ビデオチュートリアル )

アニメーション化された進行状況バー

アニメーション化された進行状況バーを作成する手順は次のとおりです。

クラス .progress および .progress-striped を持つ

を追加します。

クラス .active も同時に追加します。

次に、上記の

内に、クラス .progress-bar を持つ空の

を追加します。

幅をパーセンテージで表すスタイル属性を追加します (例: 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>

Bootstrap 関連の技術記事の詳細については、Bootstrap チュートリアル列にアクセスして学習してください。！

以上がブートストラップの動的なプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップフォントアイコンの使い方次の記事：ブートストラップフォントアイコンの使い方

続きを見る