ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Progress Bars


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

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

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>
ลองตัวเอง»

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

นี่คือ "animated" แถบความคืบหน้า:

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>
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»