Source

پیش رفت

بوٹسٹریپ کسٹم پروگریس بارز استعمال کرنے کے لیے دستاویزات اور مثالیں جو اسٹیکڈ بارز، اینی میٹڈ بیک گراؤنڈز، اور ٹیکسٹ لیبلز کے لیے معاونت فراہم کرتی ہیں۔

یہ کیسے کام کرتا ہے

پیش رفت کے اجزاء دو 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>

بوٹسٹریپ چوڑائی کی ترتیب کے لیے مٹھی بھر افادیت فراہم کرتا ہے ۔ آپ کی ضروریات پر منحصر ہے، یہ تیزی سے پیشرفت کو ترتیب دینے میں مدد کر سکتے ہیں۔

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

دھاری دار

پروگریس بار کے پس منظر کے رنگ پر CSS گریڈینٹ کے ذریعے پٹی لگانے کے لیے .progress-bar-stripedکسی میں بھی شامل کریں ۔.progress-bar

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

متحرک دھاریاں

دھاری دار میلان کو بھی متحرک کیا جا سکتا ہے۔ CSS3 اینیمیشنز کے ذریعے دائیں سے بائیں پٹیوں کو متحرک کرنے کے لیے میں .progress-bar-animatedشامل کریں ۔.progress-bar

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