Bootstrap 4 တိုးတက်မှုဘားများ
အခြေခံ တိုးတက်မှုဘား
လုပ်ငန်းစဉ်တစ်ခုတွင် အသုံးပြုသူတစ်ဦးအား သူ/သူမ မည်မျှဝေးကွာကြောင်းပြသရန် တိုးတက်မှုဘားကို အသုံးပြုနိုင်သည်။
ပုံသေတိုးတက်မှုဘားတစ်ခုဖန်တီးရန်၊ .progressအတန်းတစ်ခုကို ကွန်တိန်နာဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်ကာ .progress-barအတန်းကို ၎င်း၏ကလေးဒြပ်စင်သို့ ထည့်ပါ။ widthတိုးတက်မှုဘား၏ အကျယ်ကို သတ်မှတ်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုပါ -
ဥပမာ
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Progress Bar အမြင့်
တိုးတက်မှုဘား၏အမြင့်သည် ပုံမှန်အားဖြင့် 16px ဖြစ်သည်။ ၎င်းကိုပြောင်းလဲရန် CSS heightပိုင်ဆိုင်မှုကိုသုံးပါ။ တိုးတက်မှုကွန်တိန်နာနှင့် တိုးတက်မှုဘားအတွက် တူညီသောအမြင့်ကို သတ်မှတ်ရမည်ကို သတိပြုပါ။
ဥပမာ
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
တိုးတက်မှုဘား အညွှန်းများ
မြင်နိုင်သောရာခိုင်နှုန်းကိုပြသရန် တိုးတက်မှုဘားအတွင်း စာသားထည့်ပါ-
ဥပမာ
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
ရောင်စုံတိုးတက်မှုဘားများ
ပုံမှန်အားဖြင့်၊ တိုးတက်မှုဘားသည် အပြာရောင် (မူလတန်း) ဖြစ်သည်။ ၎င်း၏အရောင်ကိုပြောင်းလဲရန် Bootstrap 4 ဆက်စပ်နောက်ခံအတန်းများကို အသုံးပြုပါ။
ဥပမာ
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
အစင်းကြောင်း တိုးတက်မှုဘားများ
.progress-bar-stripedတိုးတက်မှုဘားများသို့ အစင်းကြောင်းများထည့်ရန် အတန်း ကို အသုံးပြု ပါ-
ဥပမာ
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
လှုပ်ရှားနေသော တိုးတက်မှုဘား
.progress-bar-animatedတိုးတက်မှုဘားကို သက်ဝင်လှုပ်ရှားရန် အတန်းကို ထည့်ပါ -
ဥပမာ
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
တိုးတက်မှုဘားများစွာ
တိုးတက်မှုဘားများကိုလည်း stack လုပ်နိုင်သည်-
ဥပမာ
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>