Tiến triển

Tài liệu và ví dụ để sử dụng thanh tiến trình tùy chỉnh Bootstrap có hỗ trợ cho các thanh xếp chồng lên nhau, hình nền động và nhãn văn bản.

Trên trang này

Làm thế nào nó hoạt động

Các thành phần tiến trình được xây dựng bằng hai phần tử HTML, một số CSS để đặt chiều rộng và một vài thuộc tính. Chúng tôi không sử dụng phần tử HTML5<progress> , đảm bảo bạn có thể xếp chồng các thanh tiến trình, tạo hiệu ứng cho chúng và đặt nhãn văn bản lên chúng.

Chúng tôi sử dụng .progressnhư một trình bao bọc để chỉ ra giá trị tối đa của thanh tiến trình.
Chúng tôi sử dụng bên trong .progress-barđể chỉ ra sự tiến bộ cho đến nay.
Yêu .progress-barcầu kiểu nội tuyến, lớp tiện ích hoặc CSS tùy chỉnh để đặt chiều rộng của chúng.
Nó .progress-barcũng yêu cầu một số rolevà ariathuộc tính để làm cho nó có thể truy cập được.

Đặt tất cả lại với nhau, và bạn có các ví dụ sau.

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

Bootstrap cung cấp một số tiện ích để thiết lập chiều rộng . Tùy thuộc vào nhu cầu của bạn, những điều này có thể giúp tiến trình cấu hình nhanh chóng.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Nhãn

Thêm nhãn vào thanh tiến trình của bạn bằng cách đặt văn bản trong .progress-bar.

25%

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

Chiều cao

Chúng tôi chỉ đặt một heightgiá trị trên .progress, vì vậy nếu bạn thay đổi giá trị đó, bên trong .progress-barsẽ tự động thay đổi kích thước cho phù hợp.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Tầng lớp

Sử dụng các lớp tiện ích nền để thay đổi giao diện của các thanh tiến trình riêng lẻ.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Nhiều thanh

Bao gồm nhiều thanh tiến trình trong một thành phần tiến trình nếu bạn cần.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sọc

Thêm .progress-bar-stripedvào bất kỳ .progress-barđể áp dụng một sọc thông qua CSS gradient trên màu nền của thanh tiến trình.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sọc hoạt hình

Gradient sọc cũng có thể được làm động. Thêm vào .progress-bar-animatedđể .progress-bartạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3.

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

Sass

Biến

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Khung hình chính

Được sử dụng để tạo hoạt ảnh CSS cho .progress-bar-animated. Bao gồm trong scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}