ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap のプログレスバーコンポーネントの詳細な説明
この記事では、Bootstrap のプログレス バー コンポーネントについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Web ページでは、読み込みステータスなどのスコアリング システムなど、プログレス バーの効果は珍しいことではありません。シンプルで柔軟なプログレス バーを通じて、現在のワークフローやアクションを改善して、リアルタイムのフィードバックを提供できます。 Bootstrap のプログレス バー コンポーネントを見てみましょう。
関連する推奨事項: 「bootstrap チュートリアル 」
Bootstrap フレームワークは、進行状況バーの基本スタイルを提供します。 、幅 100% の背景色、次に完了の進行状況を示すハイライト色です。実はこのようなプログレスバーは非常に簡単に作ることができます 一般的にはコンテナを2つ使います 外側のコンテナは一定の幅を持ち背景色を設定します 子要素で幅を設定します 例えば完成度は30です% (つまり、親コンテナの幅の比率) ) を設定し、そのハイライトの背景色を設定します。
ブートストラップ フレームワークもこの方法で実装されます。これには 2 つのコンテナが用意されています。外側のコンテナは「progress」スタイル、サブコンテナは「progress-bar」スタイルを使用します。このうち、progress はプログレス バーのコンテナ スタイルを設定するために使用され、progress-bar はプログレス バーの進行状況を制限するために使用されます。
.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; transition: width .6s ease; }role 属性は、検索エンジンに次のことを伝えます。 p の機能は進行状況バーです。aria-valuenow="40" 属性は、現在の進行状況バーに進行状況が 40% であることを示します。aria-valuemin="0"属性は進行状況バーの最小値が 0% であることを示します; aria-valuemax="100" プロパティは進行状況バーの最大値が 100%であることを示します
色付きのプログレス バー
#☑ progress-bar-warning: 警告の進行状況バーを示します。進行状況バーの色は黄色です
☑ progress-bar-danger: エラーを示します。 プログレス バー、プログレス バーの色は赤です。
具体的な使用法は非常に簡単で、基本的なクラス名に対応するクラス名を追加するだけです。プログレス バー。基本的なプログレス バーと比較して、カラー プログレス バーはプログレス バーの色です。特定の変更
<div class="progress"> <div class="progress-bar" style="width:40%"></div> </div>
<div> <div> <span>40% Complete</span> </div> </div>
縞模様のプログレス バー
.progress-bar-success { background-color: #5cb85c; } .progress-bar-info { background-color: #5bc0de; } .progress-bar-warning { background-color: #f0ad4e; } .progress-bar-danger { background-color: #d9534f; }
<div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div>
.progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 40px 40px; }#Dynamic Stripes縞模様の進行状況バーを移動させるには、 Bootstrap フレームワークには、動的な縞模様のプログレス バーも用意されています。その実装原理は主に CSS3 のアニメーションによって実現されます。まず、@keyframes を通じてプログレス バー ストライプ アニメーションが作成されます。このアニメーションは主に、背景画像の位置 (background-position の値) を変更することを行います。縞模様のプログレス バーは CSS3 の線形グラデーションによって作成され、線形グラデーションは対応する背景に背景画像を実装するためです。
.progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }
<div class="progress progress-striped"> <div class="progress-bar" style="width:70%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }カスケード進行状況バー上記の進行状況バーの提供に加えて、Bootstrap フレームワークはカスケード進行状況も提供します。バーストリップ。プログレスバーをカスケード接続すると、さまざまな状態のプログレスバーをまとめて配置し、水平に配置できます。
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
[注]カスケード進行状況バーの合計は 100% を超えることはできません
<div> <div></div> <div></div> <div></div> </div>
在实际开发中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,Bootstrap考虑了这种使用场景,只需要在进度条中添加需要的值
<div> <div>20%</div> </div>
在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width
属性
<div> <div>0%</div> </div> <div> <div>0%</div> </div> <div> <div>1%</div> </div> <div> <div>1%</div> </div>
更多编程相关知识,请访问:编程视频!!
以上がBootstrap のプログレスバーコンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。