HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap แถบความคืบหน้า

❮ ก่อนหน้า ถัดไป ❯

แถบความคืบหน้าขั้นพื้นฐาน

แถบความคืบหน้าสามารถใช้เพื่อแสดงให้ผู้ใช้เห็นว่าเขา/เธออยู่ในกระบวนการไกลแค่ไหน

Bootstrap มีแถบความคืบหน้าหลายประเภท

แถบความคืบหน้าเริ่มต้นใน Bootstrap มีลักษณะดังนี้:

เสร็จสมบูรณ์ 70%

ในการสร้างแถบความคืบหน้าเริ่มต้น ให้เพิ่ม.progressคลาสให้กับ<div>องค์ประกอบ:

ตัวอย่าง

<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>

หมายเหตุ: Internet Explorer 9 และรุ่นก่อนหน้าไม่รองรับแถบความคืบหน้า (เนื่องจากใช้การเปลี่ยนภาพและภาพเคลื่อนไหว CSS3 เพื่อให้ได้เอฟเฟกต์บางส่วน)

หมายเหตุ:เพื่อช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ คุณควรรวมแอตทริบิวต์ aria-*

แถบความคืบหน้าพร้อมป้ายกำกับ

แถบความคืบหน้าที่มีป้ายกำกับมีลักษณะดังนี้:

70%

ลบ.sr-onlyชั้นเรียนออกจากแถบความคืบหน้าเพื่อแสดงเปอร์เซ็นต์ที่มองเห็นได้:

ตัวอย่าง

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

แถบความคืบหน้าสี

คลาสตามบริบทถูกใช้เพื่อให้ "ความหมายผ่านสี"

คลาสตามบริบทที่สามารถใช้กับแถบความคืบหน้าคือ:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
สำเร็จ 40% (สำเร็จ)
เสร็จสมบูรณ์ 50% (ข้อมูล)
เสร็จสมบูรณ์ 60% (คำเตือน)
สำเร็จ 70% (อันตราย)

ตัวอย่างต่อไปนี้แสดงวิธีสร้างแถบความคืบหน้าด้วยคลาสตามบริบทที่แตกต่างกัน:

ตัวอย่าง

<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>

แถบความคืบหน้าลาย

แถบความคืบหน้าสามารถเป็นแถบได้:

สำเร็จ 40% (สำเร็จ)
เสร็จสมบูรณ์ 50% (ข้อมูล)
เสร็จสมบูรณ์ 60% (คำเตือน)
สำเร็จ 70% (อันตราย)

เพิ่มคลาส.progress-bar-stripedเพื่อเพิ่มแถบความคืบหน้า:

ตัวอย่าง

<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>

แถบความคืบหน้าเคลื่อนไหว

40%

เพิ่มคลาส.activeเพื่อทำให้แถบความคืบหน้าเคลื่อนไหว:

ตัวอย่าง

<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>

แถบความคืบหน้าแบบซ้อน

แถบความคืบหน้าสามารถซ้อนกันได้:

ที่ว่าง
คำเตือน
อันตราย

สร้างแถบความคืบหน้าแบบเรียงซ้อนโดยวางแถบหลายอันไว้ในแถบเดียวกัน<div class="progress">:

ตัวอย่าง

<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>

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มคลาสที่ถูกต้องเพื่อให้โค้ด HTML นี้ทำงานเป็นแถบความคืบหน้า

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ ก่อนหน้า ถัดไป ❯