การใช้ Progress bars ใน Bootstrap

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้ Progress bars ใน Bootstrap

Re: การใช้ Progress bars ใน Bootstrap

โดย boo_kyoshii » 21/08/2013 11:08 am

ลองทำตามค่ะ
ผลที่ได้
ผลที่ได้
bar.jpg (28.1 KiB) Viewed 1633 times
testbootstrap.zip
ไฟล์ทั้งหมดค่ะ
(87.81 KiB) ดาวน์โหลดแล้ว 245 ครั้ง

การใช้ Progress bars ใน Bootstrap

โดย M008 » 01/06/2013 6:21 pm

Progress bars ใน Bootstrap จะมีหลายแบบให้เลือกใช้
แบบ Basic
1.jpg
1.jpg (9.85 KiB) Viewed 1820 times

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

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>
แบบ Striped
2.jpg
2.jpg (11.41 KiB) Viewed 1820 times

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

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>
มีหลายสีให้เลือกใช้
3.jpg
3.jpg (30.72 KiB) Viewed 1820 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
4.jpg (43.98 KiB) Viewed 1820 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>

ข้างบน