in English

Inkqubela phambili

Amaxwebhu kunye nemizekelo yokusebenzisa iibar zenkqubela zeBootstrap zesiko ezinenkxaso yeebar ezipakishweyo, imvelaphi eshukumayo, kunye neelebhile zokubhaliweyo.

Kweli phepha

Ingaba isebenza kanjani

Amacandelo enkqubela phambili akhiwe ngezinto ezimbini ze-HTML, ezinye i-CSS ukuseta ububanzi, kunye neempawu ezimbalwa. Asisebenzisi i-HTML5 <progress>element , siqinisekisa ukuba uyakwazi ukupakisha iibar zenkqubela-phambili, ziphile, kwaye ubeke iilebhile zokubhaliweyo phezu kwazo.

Sisebenzisa .progressumgca wokusonga ukubonisa elona xabiso liphezulu lebar yenkqubela.
Sisebenzisa ingaphakathi .progress-barukubonisa inkqubela ukuza kuthi ga ngoku.
Ifuna isitayile .progress-baresingaphakathi, iklasi eluncedo, okanye iCSS yesiko ukuseta ububanzi bazo.
Ikwafuna .progress-barezinye rolekunye arianeempawu ukwenza ukuba ifikeleleke.

Beka konke kunye, kwaye unayo le mizekelo ilandelayo.

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

I-Bootstrap ibonelela ngezinto eziluncedo zokuseta ububanzi . Ngokuxhomekeke kwiimfuno zakho, ezi zinokunceda ngokukhawuleza ukuqwalasela inkqubela.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Iileyibhile

Yongeza iilebhile kwiibar zakho zenkqubela ngokubeka okubhaliweyo ngaphakathi kwe .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>

Ubude

Sibeka heightixabiso kuphela kwi .progress, ngoko ke ukuba utshintsha elo xabiso ingaphakathi .progress-barliza kwenza ubungakanani obukhulu ngokufanelekileyo.

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

Imvelaphi

Sebenzisa iiklasi eziluncedo ngasemva ukutshintsha inkangeleko yebar yenkqubela phambili.

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

Imivalo emininzi

Bandakanya imivalo yenkqubela phambili kwiqela lenkqubela ukuba ufuna.

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

Inemigca

Yongeza .progress-bar-stripednakweyiphi na .progress-barukufaka umgca nge CSS gradient ngaphezulu kombala ongasemva webar yenkqubela.

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

Imivumbo yoopopayi

Ithareyidi enemigca nayo inokudlalwa. Yongeza .progress-bar-animatedkwi .progress-bar-anime kwimigca ekunene ukuya ekhohlo ngokusebenzisa oopopayi be-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>

Sass

Izinto eziguquguqukayo

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

Amagama angundoqo

Isetyenziselwa ukwenza oopopayi be-CSS ye .progress-bar-animated. Ibandakanyiwe kwi scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}