Bootstrap progress bar
Bab ini akan menjelaskan Bootstrap progress bar. Dalam tutorial ini, Anda akan melihat bagaimana untuk membuat progress bar memuat Bootstrap, mengarahkan, atau negara operasi.
Bootstrap progress bar menggunakan transisi CSS3 dan animasi untuk mendapatkan efek. versi lama dari Internet Explorer dan Firefox 9 dan sebelumnya tidak mendukung fitur ini, Opera 12 tidak mendukung animasi.
Kemajuan bar default
Buat progress bar dasar, ikuti langkah berikut:
- Tambahkan .progresskelas dengan <div>.
- Kemudian, di atas <div> di dalam, menambahkankelas .progress-bar dengan kosong <div>.
- Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.
Mari kita lihat contoh berikut:
contoh
<Div class = "kemajuan">
<Div class = "progress-bar" Peran = "progressbar" aria-ValueNow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; ">
<Span class = "sr-satunya"> 40% selesai </ span>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
Alternatif progress bar
Untuk menciptakan gaya progress bar yang berbeda sebagai berikut:
- Tambahkan .progresskelas dengan <div>.
- Kemudian, di atas <div> di dalam, menambahkankelas .progress-bar dan kemajuan-bar-*kelas kosong dengan <div>. Mana * bisasukses, info, peringatan, bahaya.
- Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.
Mari kita lihat contoh berikut:
contoh
<Div class = "kemajuan">
<Div class = "progress-bar progress- bar-sukses" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<Span class = "sr-satunya"> 90% selesai (sukses) </ span>
</ Div>
</ Div>
<Div class = "kemajuan">
<Div class = "progress-bar progress- bar-info" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<Span class = "sr-satunya"> 30% lengkap (Informasi) </ span>
</ Div>
</ Div>
<Div class = "kemajuan">
<Div class = "progress-bar progress- bar-peringatan" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<Span class = "sr-satunya"> 20% lengkap (peringatan) </ span>
</ Div>
</ Div>
<Div class = "kemajuan">
<Div class = "progress-bar progress- bar-bahaya" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<Span class = "sr-satunya"> 10% lengkap (bahaya) </ span>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
Progress bar garis-garis
Buat progress bar stripe, ikuti langkah berikut:
- Menambahkan dengan .progresskelas dan .progress-bergaris<div>.
- Kemudian, di atas <div> di dalam, menambahkankelas .progress-bar dan kemajuan-bar-*kelas kosong dengan <div>. Mana * bisasukses, info, peringatan, bahaya.
- Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.
Mari kita lihat contoh berikut:
contoh
<Div class = "progress kemajuan-bergaris" >
<Div class = "progress-bar progress- bar-sukses" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<Span class = "sr-satunya"> 90% selesai (sukses) </ span>
</ Div>
</ Div>
<Div class = "progress kemajuan-bergaris" >
<Div class = "progress-bar progress- bar-info" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<Span class = "sr-satunya"> 30% lengkap (Informasi) </ span>
</ Div>
</ Div>
<Div class = "progress kemajuan-bergaris" >
<Div class = "progress-bar progress- bar-peringatan" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<Span class = "sr-satunya"> 20% lengkap (peringatan) </ span>
</ Div>
</ Div>
<Div class = "progress kemajuan-bergaris" >
<Div class = "progress-bar progress- bar-bahaya" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<Span class = "sr-satunya"> 10% lengkap (bahaya) </ span>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
Animasi progress bar
Buat progress bar animasi, ikuti langkah berikut:
- Menambahkan dengan .progresskelas dan .progress-bergaris<div>. Sambil menambahkankelas .active.
- Kemudian, di atas <div> di dalam, menambahkankelas .progress-bar dengan kosong <div>.
- Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.
Ini akan membuat garis-garis memiliki rasa gerakan dari kanan ke kiri.
Mari kita lihat contoh berikut:
contoh
<Div class = "progress kemajuan-bergaris aktif ">
<Div class = "progress-bar progress- bar-sukses" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<Span class = "sr-satunya"> 40% selesai </ span>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
Ditumpuk progress bar
Anda bahkan dapat menumpuk beberapa progress bar. Beberapa kemajuan bar di tumpukan.progress yang sama dapat terwujud, seperti yang ditunjukkan dalam contoh berikut:
contoh
<Div class = "kemajuan">
<Div class = "progress-bar progress- bar-sukses" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<Span class = "sr-satunya"> 40% selesai </ span>
</ Div>
<Div class = "progress-bar progress- bar-info" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<Span class = "sr-satunya"> 30% lengkap (Informasi) </ span>
</ Div>
<Div class = "progress-bar progress- bar-peringatan" Peran = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<Span class = "sr-satunya"> 20% lengkap (peringatan) </ span>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
