Kev vam meej

Cov ntaub ntawv thiab cov piv txwv rau kev siv Bootstrap cov kev cai nce qib bar uas muaj kev txhawb nqa rau pawg tuav, cov keeb kwm yav dhau los, thiab cov ntawv sau.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Cov txheej txheem kev nce qib tau tsim nrog ob lub ntsiab lus HTML, qee qhov CSS los teeb tsa qhov dav, thiab ob peb yam ntxwv. Peb tsis siv HTML5 <progress>lub ntsiab lus , kom ntseeg tau tias koj tuaj yeem ua cov kab nce qib, ua haujlwm rau lawv, thiab tso cov ntawv sau rau lawv.

Peb siv lub .progresswrapper los qhia tus nqi max ntawm qhov kev kawm bar.
Peb siv sab hauv .progress-barlos qhia txog kev nce qib kom deb li deb.
Qhov .progress-baryuav tsum tau muaj cov style inline, chav kawm siv hluav taws xob, lossis kev cai CSS los teeb tsa lawv qhov dav.
Cov .progress-bartseem xav tau qee yam rolethiab ariacov cwj pwm kom nws nkag mus tau.

Muab tag nrho ua ke, thiab koj muaj cov piv txwv hauv qab no.

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

Bootstrap muab ib txhais tes ntawm cov khoom siv rau kev teeb tsa dav . Nyob ntawm koj cov kev xav tau, cov no tuaj yeem pab nrog kev teeb tsa sai sai.

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

Daim ntawv lo

Ntxiv cov ntawv sau rau koj cov kab kev nce qib los ntawm kev tso cov ntawv hauv .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>

Qhov siab

Peb tsuas yog teeb tsa tus heightnqi ntawm qhov .progress, yog li yog tias koj hloov tus nqi ntawd lub puab .progress-baryuav cia li hloov pauv raws li.

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

Keeb kwm

Siv cov chav kawm siv hluav taws xob hauv qab no los hloov qhov pom ntawm tus kheej cov kab nce qib.

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

Ntau qhov bar

suav nrog ntau qhov kev nce qib hauv ib qho kev nce qib yog tias koj xav tau.

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

striped

Ntxiv .progress-bar-stripedrau ib qho twg .progress-barlos siv cov kab txaij ntawm CSS gradient hla qhov kev nce qib bar cov xim tom qab.

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

Animated kab txaij

Cov kab txaij gradient kuj tuaj yeem ua kom muaj zog. Ntxiv .progress-bar-animatedrau .progress-baranimate cov kab txaij txoj cai mus rau sab laug ntawm CSS3 animations.

<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

Hloov pauv

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

Keyframes

Siv los tsim cov CSS animations rau .progress-bar-animated. suav nrog scss/_progress-bar.scss.

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