د بوټسټریپ دودیز پرمختګ بارونو کارولو لپاره اسناد او مثالونه د سټیک شوي بارونو ، متحرک شالیدونو ، او متن لیبلونو لپاره ملاتړ وړاندې کوي.
څنګه کار کوي
د پرمختګ برخې د دوه HTML عناصرو سره جوړ شوي، ځینې سی ایس ایس د عرض ټاکلو لپاره، او یو څو ځانګړتیاوې. موږ د HTML5 <progress>
عنصر نه کاروو ، دا ډاډه کول چې تاسو کولی شئ د پرمختګ بارونه ذخیره کړئ، دوی یې متحرک کړئ، او د متن لیبلونه یې ځای په ځای کړئ.
- موږ
.progress
د ریپر په توګه کاروو ترڅو د پرمختګ بار اعظمي ارزښت څرګند کړي.
.progress-bar
موږ تر دې دمه پرمختګ په ګوته کولو لپاره داخلي کاروو .
- د
.progress-bar
دوی عرض ټاکلو لپاره انلاین سټایل، د کارونې ټولګي، یا دودیز CSS ته اړتیا لري.
- دا د لاسرسي وړ کولو لپاره
.progress-bar
ځینې role
او aria
ځانګړتیاو ته هم اړتیا لري.
دا ټول یوځای کړئ، او تاسو لاندې مثالونه لرئ.
بوټسټریپ د عرض تنظیمولو لپاره یو څو اسانتیاوې چمتو کوي . ستاسو اړتیاو پورې اړه لري، دا ممکن د پرمختګ په چټکتیا سره تنظیم کولو کې مرسته وکړي.
لیبلونه
د متن دننه کولو سره ستاسو د پرمختګ بارونو ته لیبلونه اضافه کړئ .progress-bar
.
لوړوالی
موږ یوازې په کې یو height
ارزښت ټاکو .progress
، نو که تاسو دا ارزښت بدل کړئ نو داخلي .progress-bar
به په اتوماتيک ډول د هغې سره سم اندازه شي.
پس منظرونه
د انفرادي پرمختګ بارونو بڼه بدلولو لپاره د شالید کارونې ټولګي وکاروئ.
څو بارونه
که تاسو اړتیا لرئ د پرمختګ برخې کې ډیری پرمختګ بارونه شامل کړئ.
پټه
د پرمختګ بار شالید رنګ کې د CSS ګریډینټ له لارې د پټې پلي .progress-bar-striped
کولو لپاره هر ته اضافه کړئ ..progress-bar
متحرک پټې
پټې شوې تدریجي هم متحرک کیدی شي. د CSS3 انیمیشنونو له لارې ښي او کیڼ اړخ ته پټې متحرک .progress-bar-animated
کولو لپاره اضافه کړئ ..progress-bar