پیش رفت
بوٹسٹریپ کسٹم پروگریس بارز استعمال کرنے کے لیے دستاویزات اور مثالیں جو اسٹیکڈ بارز، اینی میٹڈ بیک گراؤنڈز، اور ٹیکسٹ لیبلز کے لیے سپورٹ فراہم کرتی ہیں۔
یہ کیسے کام کرتا ہے
پیش رفت کے اجزاء دو 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
۔
<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>
سس
متغیرات
$progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: $box-shadow-inset;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;
کی فریمز
کے لیے CSS متحرک تصاویر بنانے کے لیے استعمال کیا جاتا ہے .progress-bar-animated
۔ میں شامل ہے scss/_progress-bar.scss
۔
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}