การใช้ Progress bars ใน Bootstrap

[M008]

Progress bars ใน Bootstrap จะมีหลายแบบให้เลือกใช้
แบบ Basic

1.jpg (9.85 KiB) Viewed 1816 times

โค้ด: เลือกทั้งหมด

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

แบบ Striped

2.jpg (11.41 KiB) Viewed 1816 times

โค้ด: เลือกทั้งหมด

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

มีหลายสีให้เลือกใช้

3.jpg (30.72 KiB) Viewed 1816 times

โค้ด: เลือกทั้งหมด

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

แบบ Striped ก็มีหลายสีให้เลือกใช้คะ

4.jpg (43.98 KiB) Viewed 1816 times

โค้ด: เลือกทั้งหมด

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

[boo_kyoshii]

ลองทำตามค่ะ

ผลที่ได้

bar.jpg (28.1 KiB) Viewed 1629 times

testbootstrap.zip

ไฟล์ทั้งหมดค่ะ

(87.81 KiB) ดาวน์โหลดแล้ว 244 ครั้ง