Bar kemajuan yang mesti dipelajari oleh Bootstrap setiap hari kemahiran javascript

1. Bar kemajuan

Dalam halaman web, kesan bar kemajuan adalah perkara biasa, seperti sistem pemarkahan, seperti status pemuatan, dsb.

Bar kemajuan adalah sama seperti komponen bebas yang lain Pembangun boleh memilih versi yang sepadan mengikut keperluan mereka sendiri:

☑ Versi KURANG: Kod sumber Fail progress-bars.less

☑ Versi Sass: Fail sumber _progress-bars.scss

☑ Susun Versi Kemudian: Barisan 4500~Baris 4575 fail bootstrap.css

Dan rangka kerja Bootstrap menyediakan anda pelbagai gaya bar kemajuan untuk digunakan oleh semua orang.

2. Bar kemajuan – gaya asas

Rangka kerja Bootstrap menyediakan gaya asas untuk bar kemajuan, warna latar belakang 100% lebar dan warna yang diserlahkan untuk menunjukkan kemajuan penyiapan. Sebenarnya, sangat mudah untuk membuat bar kemajuan seperti itu Secara amnya, dua bekas digunakan. (iaitu, lebar bekas induk nilai skala) dan tetapkan warna latar belakang serlahan kepadanya.

1) Cara menggunakan:

Rangka kerja Bootstrap juga dilaksanakan dengan cara ini Ia menyediakan dua bekas, bekas luar Gunakan gaya "kemajuan" dan subbekas menggunakan gaya "bar kemajuan". Antaranya, kemajuan digunakan untuk menetapkan gaya bekas bar kemajuan, dan bar kemajuan digunakan untuk mengehadkan kemajuan bar kemajuan. Kaedah penggunaannya sangat mudah:

2), prinsip pelaksanaan

Seperti yang dinyatakan sebelum ini, bar kemajuan asas sedemikian terbahagi kepada dua bahagian:

Gaya kemajuan terutamanya menetapkan warna latar belakang, ketinggian bekas, jarak, dll. bagi bekas bar kemajuan:

/bootstrap.css fail baris 4516~baris 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);
}

Semasa gaya bar kemajuan menetapkan arah kemajuan, adalah penting untuk menetapkan warna latar belakang dan kesan peralihan bar kemajuan:

/baris 4525~4538 bootstrap.css fail/

.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), pengoptimuman struktur:

Walaupun ini mencapai kesan bar kemajuan asas, agak sukar untuk orang kurang upaya menyemak imbas web , jadi kami boleh menjadikan struktur itu lebih baik (lebih mesra semantik):

40% Complete

1>, fungsi atribut peranan: beritahu. enjin carian bahawa fungsi div ini ialah bar kemajuan.

2>, aria-valuenow="40" kesan atribut: kemajuan bar kemajuan semasa ialah 40%.

3>, aria-valuemin="0" fungsi atribut: nilai minimum bar kemajuan ialah 0%.

4>, aria-valuemax="100" fungsi atribut: nilai maksimum bar kemajuan ialah 100%.

3. Bar kemajuan – bar kemajuan berwarna

Bar kemajuan dalam rangka kerja Bootstrap adalah sama dengan kotak mesej amaran untuk memberikan pengguna yang lebih baik pengalaman, ia juga berdasarkan Keadaan yang berbeza dikonfigurasikan dengan warna bar kemajuan yang berbeza. Ia dipanggil bar kemajuan berwarna di sini, yang terutamanya merangkumi empat jenis berikut:

☑ progress-bar-info: mewakili bar kemajuan maklumat dan warna daripada bar kemajuan adalah biru Warna

☑ progress-bar-success: menunjukkan bar kemajuan yang berjaya dan warna bar kemajuan adalah hijau

☑ kemajuan -bar-amaran: menunjukkan bar kemajuan amaran, warna bar kemajuan adalah kuning

☑ kemajuan -bar-bahaya: menunjukkan bar kemajuan ralat , warna bar kemajuan adalah merah

1) Cara menggunakan:

Penggunaan khusus adalah sangat mudah, anda hanya perlu mengikuti kemajuan asas Tambah nama kelas yang sepadan.

2), prinsip pelaksanaan:

Berbanding dengan bar kemajuan asas, bar kemajuan warna mempunyai perubahan tertentu dalam warna kemajuan bar. Kod gaya yang sepadan adalah seperti berikut:

/bootstrap.css baris fail 4548 ~ baris 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. Bar kemajuan – stripes Bar kemajuan

Selain menyediakan bar kemajuan berwarna, rangka kerja Bootstrap juga menyediakan bar kemajuan berjalur ini dilaksanakan menggunakan kecerunan linear CSS3 tanpa sebarang bantuan. Untuk menggunakan bar kemajuan berjalur dalam rangka kerja Bootstrap, anda hanya perlu menambah nama kelas "berjalur kemajuan" pada bekas "kemajuan" bar kemajuan Sudah tentu, jika anda mahu jalur bar kemajuan anda mempunyai kesan warna seperti kemajuan berwarna, anda Anda hanya perlu menambah nama kelas warna yang sepadan pada bar kemajuan, seperti yang dinyatakan dalam bar kemajuan warna sebelumnya.

Mari kita lihat struktur membuat bar kemajuan berjalur: ,

1), pelaksanaan asal:

Seperti yang dinyatakan sebelum ini, melaksanakan stripes Bar kemajuan terutamanya menggunakan kecerunan linear CSS3 Kod khusus adalah seperti berikut:

/bootstrap.css baris fail 4539~line 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教程，希望对大家的学习有所帮助。

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn