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%であることを示します

色付きのプログレス バー

ブートストラップ フレームワークのプログレス バーと警告メッセージ ボックス 同様に、ユーザーのエクスペリエンスを向上させるために、さまざまな状態に応じてさまざまなプログレス バーの色が構成されています。ここでは色付きプログレスバーと呼び、主に以下の 4 種類があります。

☑ progress-bar-info: 情報のプログレスバーを表します。プログレスバーの色は青です。

☑ progress-bar-success: 成功した進行状況バーを示します。進行状況バーの色は緑色です。

#☑ progress-bar-warning: 警告の進行状況バーを示します。進行状況バーの色は黄色です

☑ progress-bar-danger: エラーを示します。 プログレス バー、プログレス バーの色は赤です。

具体的な使用法は非常に簡単で、基本的なクラス名に対応するクラス名を追加するだけです。プログレス バー。基本的なプログレス バーと比較して、カラー プログレス バーはプログレス バーの色です。特定の変更

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>

縞模様のプログレス バー

Bootstrap フレームワークでは、色付きのプログレス バーを提供するだけでなく、縞模様のプログレス バーも提供されます。この縞模様のプログレス バーは、画像を使用せずに CSS3 の線形グラデーションを使用して実装されています。 Bootstrap フレームワークで縞模様のプログレス バーを使用するには、クラス名「progress-striped」をプログレス バーのコンテナ「progress」に追加するだけです。もちろん、プログレス バーのストライプに色の効果を持たせたい場合は、色付きのプログレスと同様に、クラス名「progress-striped」をプログレス バーに追加するだけです。対応する色のクラス名をバーに追加します。[注] プログレス バーにストライプ効果を作成できます。 IE9 ブラウザはそれをサポートしていません

.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 class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></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 の線形グラデーションによって作成され、線形グラデーションは対応する背景に背景画像を実装するためです。

[注意] IE9 ブラウザは

.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);
}

をサポートしていません。ブートストラップ フレームワークでは、プログレス バー コンテナー「progress」にクラス名「active」を追加し、ドキュメントのロード時に「progress-bar-stripes」アニメーションを有効にすることで、右から右に移動するアニメーション効果を表示します。

<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

に配置して、積み重ねて表示します

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

[注]カスケード進行状況バーの合計は 100% を超えることはできません

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
</div>

提示标签

在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div>
</div>

更多编程相关知识，请访问：编程视频！！

以上がBootstrap のプログレスバーコンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。