Source

ความคืบหน้า

เอกสารประกอบและตัวอย่างสำหรับการใช้แถบความคืบหน้าแบบกำหนดเองของ Bootstrap ที่มีการรองรับแถบแบบเรียงซ้อน พื้นหลังแบบเคลื่อนไหว และป้ายข้อความ

มันทำงานอย่างไร

ส่วนประกอบความคืบหน้าถูกสร้างขึ้นด้วยองค์ประกอบ HTML สององค์ประกอบ, CSS บางตัวเพื่อกำหนดความกว้าง และแอตทริบิวต์บางอย่าง เราไม่ได้ใช้องค์ประกอบHTML5<progress>เพื่อให้แน่ใจว่าคุณสามารถซ้อนแถบความคืบหน้า ทำให้เคลื่อนไหว และวางป้ายกำกับข้อความไว้ได้

  • เราใช้.progressเป็นตัวตัดเพื่อระบุค่าสูงสุดของแถบความคืบหน้า
  • เราใช้ด้านใน.progress-barเพื่อบ่งบอกถึงความคืบหน้าจนถึงตอนนี้
  • ต้องการ สไตล์.progress-barอินไลน์ คลาสยูทิลิตี้ หรือ CSS ที่กำหนดเองเพื่อกำหนดความกว้าง
  • นอกจาก.progress-barนี้ยังต้องการบางส่วนroleและariaคุณลักษณะเพื่อให้สามารถเข้าถึงได้

นำทั้งหมดมารวมกัน และคุณมีตัวอย่างต่อไปนี้

<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 มี ยูทิลิตี้จำนวน หนึ่งสำหรับการตั้งค่าความกว้าง ขึ้นอยู่กับความต้องการของคุณ สิ่งเหล่านี้อาจช่วยในการกำหนดค่าความคืบหน้าได้อย่างรวดเร็ว

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

ป้าย

เพิ่มป้ายกำกับในแถบความคืบหน้าของคุณโดยการวางข้อความภายในไฟล์.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>

ส่วนสูง

เราตั้งค่าเฉพาะheightบน.progressดังนั้นหากคุณเปลี่ยนค่านั้น ค่าภายใน.progress-barจะปรับขนาดโดยอัตโนมัติตามนั้น

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

พื้นหลัง

ใช้คลาสยูทิลิตี้พื้นหลังเพื่อเปลี่ยนรูปลักษณ์ของแถบความคืบหน้าแต่ละรายการ

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

หลายแท่ง

รวมแถบความคืบหน้าหลายแถบในองค์ประกอบความคืบหน้าหากคุณต้องการ

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

ลาย

เพิ่ม.progress-bar-stripedลงในแถบใดก็ได้.progress-barเพื่อใช้แถบผ่านการไล่ระดับสี CSS เหนือสีพื้นหลังของแถบความคืบหน้า

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

ลายเส้นเคลื่อนไหว

การไล่ระดับสีแบบลายทางสามารถเคลื่อนไหวได้เช่นกัน เพิ่ม.progress-bar-animatedเพื่อ.progress-barทำให้แถบเคลื่อนไหวจากขวาไปซ้ายผ่านภาพเคลื่อนไหว 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>