tutorial pengembangan web terbaru
 

Bootstrap Progress Bars

❮ Sebelumnya Berikutnya Bab ❯

Dasar Progress Bar

Sebuah progress bar dapat digunakan untuk menunjukkan pengguna seberapa jauh ia / dia dalam proses.

Bootstrap menyediakan beberapa jenis bar kemajuan.

Sebuah progress bar default di Bootstrap terlihat seperti ini:

70% Lengkap

Untuk membuat kemajuan bar default, menambahkan .progress kelas ke <div> elemen:

Contoh

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

Catatan: Progress bar tidak didukung di Internet Explorer 9 dan sebelumnya (karena mereka menggunakan CSS3 transisi dan animasi untuk mencapai beberapa efek mereka).

Catatan: Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus menyertakan aria-* atribut.

Progress Bar Dengan Label

Sebuah progress bar dengan label terlihat seperti ini:

70%

Lepaskan .sr-only kelas dari progress bar menunjukkan persentase terlihat:

Contoh

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

Bar berwarna Kemajuan

kelas kontekstual digunakan untuk memberikan "makna melalui warna".

Kelas yang kontekstual yang dapat digunakan dengan kemajuan bar:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% Lengkap (sukses)
50% Lengkap (Info)
60% Lengkap (peringatan)
70% Lengkap (bahaya)

Contoh berikut menunjukkan bagaimana untuk membuat progress bar dengan kelas kontekstual yang berbeda:

Contoh

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

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Cobalah sendiri "

Bar bergaris Kemajuan

Kemajuan bar juga dapat bergaris-garis:

40% Lengkap (sukses)
50% Lengkap (Info)
60% Lengkap (peringatan)
70% Lengkap (bahaya)

Menambahkan kelas .progress-bar-striped untuk menambahkan garis-garis untuk kemajuan bar:

Contoh

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Cobalah sendiri "

Animasi Progress Bar

Berikut adalah "animated" progress bar:

40%

Menambahkan kelas .active untuk menghidupkan progress bar:

Contoh

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

Bar Kemajuan ditumpuk

Kemajuan bar juga dapat ditumpuk:

Ruang bebas
PERINGATAN
Bahaya

Buat progress bar ditumpuk dengan menempatkan beberapa bar ke dalam yang sama <div class="progress"> :

Contoh

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»


❮ Sebelumnya Berikutnya Bab ❯