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>