Pengetahuan terperinci tentang kemahiran komponen_javascript bar kemajuan Bootstrap-tutorial js-php.cn

Dalam halaman web, kesan bar kemajuan sering dilihat, seperti: sistem belah dua, status pemuatan, dll. Komponen bar kemajuan menggunakan atribut peralihan dan animasi CSS3 untuk melengkapkan beberapa kesan khas ini dalam IE9 dan versi di bawah, Firefox Ia tidak disokong dalam versi lama, dan Opera 12 tidak menyokong atribut animasi.

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

KURANG: bar kemajuan.kurang

SASS: _progress-bars.scss

Bar kemajuan asas

Prinsip pelaksanaan:

Dua bekas diperlukan. Bekas luar menggunakan nama kelas .progress, dan sub-container menggunakan nama kelas .progress-bar .progress digunakan untuk menetapkan warna latar belakang bekas bar kemajuan, ketinggian dan jarak bekas, dsb.; dan bar .progress menetapkan arah kemajuan, warna latar belakang dan kesan peralihan bar kemajuan yang berikut ialah kod sumber css:

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

Salin selepas log masuk

Contoh:

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

Salin selepas log masuk

Atribut peranan: Beritahu enjin carian bahawa div ini berfungsi sebagai bar kemajuan; Fungsi atribut

aria-valuenow="30": bar kemajuan semasa ialah 40%; Fungsi atribut

aria-valuemin="0": nilai minimum bar kemajuan ialah 0%; Fungsi atribut

aria-valuemax="100": nilai maksimum bar kemajuan ialah 100%;

Anda boleh mengalih keluar teg dengan kelas .sr sahaja daripada komponen bar kemajuan dan biarkan kemajuan semasa dipaparkan;

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

Salin selepas log masuk

Bar kemajuan berwarna

Bar kemajuan berwarna adalah sama dengan bar kemajuan amaran Untuk memberi pengguna pengalaman yang lebih baik, warna bar kemajuan yang berbeza dikonfigurasikan mengikut keadaan yang berbeza, terutamanya termasuk empat jenis berikut: . progress-bar-info: menunjukkan bar kemajuan maklumat, biru

progress-bar-success: menunjukkan bar kemajuan yang berjaya, hijau

amaran-bar-kemajuan: menunjukkan bar kemajuan amaran, kuning

progress-bar-bahaya: menunjukkan ralat bar kemajuan, merah

kod sumber css:

Cara menggunakan:

Hanya tambahkan nama kelas yang sepadan pada bar kemajuan asas

.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}

Salin selepas log masuk

Contoh:

Kesannya adalah seperti berikut:

<h1>彩色进度条</h1>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

Salin selepas log masuk

Bar kemajuan berjalur

Bar kemajuan berjalur dilaksanakan menggunakan kecerunan linear CSS3 tanpa menggunakan sebarang gambar Untuk menggunakan bar kemajuan berjalur, cuma tambahkan nama kelas "berjalur kemajuan" pada bekas.kemajuan bar kemajuan jalur kemajuan untuk diwarnakan Kemajuan adalah sama, dengan kesan warna, cuma tambahkan nama kelas warna yang sepadan pada bar kemajuan Berikut ialah kod sumber gaya berjalur .progress:

Setiap keadaan yang sepadan dengan kemajuan jalur juga mempunyai warna yang berbeza

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

Salin selepas log masuk

Mari kita lihat aplikasi bar kemajuan berjalur:

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

Salin selepas log masuk

<h1>条纹进度条</h1>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>

Salin selepas log masuk

Bar kemajuan berjalur dinamik

Berdasarkan dua kelas bar kemajuan .progress dan .progress-belang, menambah nama kelas .active boleh merealisasikan bar kemajuan berjalur dinamik. Prinsip pelaksanaan terutamanya dicapai melalui animasi CSS3. Pertama, animasi jalur-bar kemajuan dicipta melalui @keyframes Animasi ini melakukan satu perkara, iaitu menukar kedudukan imej latar belakang, iaitu nilai kedudukan latar belakang. Kerana bar kemajuan berjalur dibuat melalui kecerunan linear CSS3 dan kecerunan linear melaksanakan imej latar belakang dalam latar belakang yang sepadan

Berikut ialah kod sumber css:

@keyframes hanya mencipta kesan animasi Jika kita mahu bar kemajuan benar-benar bergerak, kita perlu memanggil animasi "progress-bar-stripes" yang dibuat oleh @keyframes dengan cara tertentu dan mencetuskan animasi untuk berkuat kuasa. melalui sesuatu peristiwa. Dalam rangka kerja Bootstrap, tambahkan nama kelas "aktif" pada bekas bar kemajuan "progres" dan biarkan animasi "progress-bar-stripes" berkuat kuasa apabila dokumen dimuatkan

Kod gaya yang sepadan dengan animasi panggilan adalah seperti berikut:

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

Salin selepas log masuk

Contoh:

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

Salin selepas log masuk

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

Salin selepas log masuk

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

下面来看一个例子：

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

Salin selepas log masuk

关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！