Bootstrap が毎日学習する必要があるプログレスバー_JavaScript スキル

1. プログレスバー

Web ページでは、読み込みステータスなどのスコアリング システムなど、プログレス バーの効果は珍しくありません。

進行状況バーは、他の独立したコンポーネントと同じです。開発者は、独自のニーズに応じて対応するバージョンを選択できます:

☑ レス バージョン: ソースコード ファイル progress-bars.less

☑ Sass バージョン: ソース ファイル _progress-bars.scss

☑ 新しいバージョンのコンパイル: bootstrap.css ファイルの 4500 行目から 4575 行目

そして、Bootstrap フレームワークは、誰もが使用できるさまざまなスタイルの進行状況バーを提供します。

2. プログレス バー – 基本スタイル

Bootstrap フレームワークは、プログレス バーの基本スタイル、幅 100% の背景色、および完了の進行状況を示す強調表示色を提供します。実際、このようなプログレスバーを作成するのは非常に簡単です。通常、外側のコンテナは一定の幅を持ち、その子要素で幅を設定します。たとえば、完了度は 30% です。 (つまり、親コンテナの幅) を選択し、それにハイライトの背景色を設定します。

1) 使用方法:

Bootstrap フレームワークもこの方法で実装されます。外側のコンテナを使用します。 「progress」スタイル、サブコンテナは「progress-bar」スタイルを使用します。このうち、progress はプログレス バーのコンテナ スタイルを設定するために使用され、progress-bar はプログレス バーの進行状況を制限するために使用されます。使用方法は非常に簡単です:

2)、実装原理

前述したように、このような基本的なプログレスバーは主に 2 つの部分に分かれています:

進行状況スタイルは、主に進行状況バー コンテナの背景色、コンテナの高さ、間隔などを設定します:

/bootstrap.css ファイル 行 4516~行 4524/

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

進行状況バーのスタイルは進行方向を設定しますが、進行状況バーの背景色と遷移効果を設定することが重要です: bootstrap.css の

/行 4525~4538 file/

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

3)、構造最適化:

これにより、基本的なプログレス バーの効果が得られますが、障害のある人が Web を閲覧するのは少し難しいため、構造を改善することができます (意味的によりわかりやすく):

40% Complete

1>、ロール属性関数: Tell検索エンジンは、この div の機能が進行状況バーであることを認識します。

2>、aria-valuenow="40" 属性の効果: 現在の進行状況バーの進行状況は 40% です。

3>、​​aria-valuemin="0" 属性関数: プログレスバーの最小値は 0% です。

4>、aria-valuemax="100" 属性関数: プログレスバーの最大値は 100% です。

3. 進行状況バー – 色付きの進行状況バー

Bootstrap フレームワークの進行状況バーは、ユーザーにわかりやすく表示するために、警告メッセージ ボックスと同じです。これは、さまざまな状態がさまざまな進行状況バーの色で構成されていることに基づいています。ここでは色付きプログレスバーと呼び、主に次の 4 種類があります。

☑ progress-bar-info: は情報のプログレスバーを表し、色は進行状況バーの色は青色です

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

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

☑ progress -bar-danger: はエラーの進行状況バーを示します。進行状況バーの色は赤です

1) 使用方法:

具体的な使用方法は非常に簡単で、基本的な手順に従って対応するクラス名を追加するだけです。

2)、実装原則:

基本的な進行状況バーと比較して、カラー進行状況バーには進行状況の色に特定の変化があります。対応するスタイル コードは次のとおりです:

/bootstrap.css ファイル 4548 行目 ～ 4550 行目/

.progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 background-color: #d9534f;
}

4. プログレス バー –ストライプ プログレス バー

色付きのプログレス バーに加えて、Bootstrap フレームワークは、画像の CSS3 線形グラデーションを使用して実装されています。 Bootstrap フレームワークで縞模様のプログレス バーを使用するには、クラス名「progress-striped」をプログレス バーのコンテナ「progress」に追加するだけです。もちろん、プログレス バーのストライプに色の効果を持たせたい場合は必要です。色の進行状況と同様に、前の色の進行状況バーで説明したように、対応する色のクラス名を進行状況バーに追加するだけです。

縞模様のプログレスバーを作成する構造を見てみましょう:、

1)、元の実装:

前述のように、実装ストライプ プログレスバーは主に CSS3 の線形グラデーションを使用します。具体的なコードは次のとおりです:

/bootstrap.css ファイル行 4539~行 4547/

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

同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：

/bootstrap.css文件第4551行～第4554行/

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

/bootstrap.css文件第4558行～第4561行/

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

/bootstrap.css文件第4565行～第4568行/

.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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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);
}

5、进度条–动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<br/>

1）、实现原理：

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

/bootstrap.css文件第4500行～第4515行/

@-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;
 }
}

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。

<br/>

调用动画对应的样式代码如下：

/bootstrap.css文件第4544行～第4547行/

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

运行效果如下：

特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

6、进度条–层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。来简单的看一个示例：

运行效果如下：

7、进度条–带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

1）、实现方法：

只需要在进度条中添加你需要的值，如：

20%

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

0%

2）、原理分析：<br/>

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第4748行~第4759行/

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
 min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
 min-width: 30px;
 color: #777;
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
  box-shadow: none;
}

注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。

以上就是关于Bootstrap进度条的全部内容介绍，并有详细的Bootstrap教程，希望对大家的学习有所帮助。