Maendeleo

Hati na mifano ya kutumia upau maalum wa maendeleo wa Bootstrap unaojumuisha usaidizi wa pau zilizopangwa, usuli uliohuishwa na lebo za maandishi.

Katika ukurasa huu

Inavyofanya kazi

Vipengele vya maendeleo vimejengwa kwa vipengele viwili vya HTML, baadhi ya CSS ili kuweka upana, na sifa chache. Hatutumii kipengele cha HTML5<progress> , kuhakikisha kuwa unaweza kuweka pau za maendeleo, kuzihuisha, na kuweka lebo za maandishi juu yake.

Tunatumia .progresskama kanga kuashiria thamani ya juu zaidi ya upau wa maendeleo.
Tunatumia ya ndani .progress-barkuashiria maendeleo hadi sasa.
.progress-barInahitaji mtindo wa ndani, darasa la matumizi, au CSS maalum ili kuweka upana wao .
Pia .progress-barinahitaji baadhi rolena ariasifa kuifanya ipatikane.

Weka yote pamoja, na unayo mifano ifuatayo.

<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 hutoa huduma chache kwa kuweka upana . Kulingana na mahitaji yako, haya yanaweza kusaidia kwa usanidi wa haraka wa maendeleo.

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

Lebo

Ongeza lebo kwenye pau zako za maendeleo kwa kuweka maandishi ndani ya .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>

Urefu

Tunaweka tu heightthamani kwenye .progress, kwa hivyo ukibadilisha thamani hiyo ya ndani .progress-baritabadilisha ukubwa kiotomatiki ipasavyo.

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

Asili

Tumia madarasa ya matumizi ya usuli ili kubadilisha mwonekano wa pau za maendeleo binafsi.

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

Baa nyingi

Jumuisha pau nyingi za maendeleo katika sehemu ya maendeleo ikiwa unahitaji.

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

Milia

Ongeza .progress-bar-stripedkwa yoyote .progress-barili kuweka mstari kupitia gradient ya CSS juu ya rangi ya mandharinyuma ya upau wa maendeleo.

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

Mistari iliyohuishwa

Upinde rangi yenye milia unaweza pia kuhuishwa. Ongeza .progress-bar-animatedkwa .progress-barkuhuisha milia kulia kwenda kushoto kupitia uhuishaji wa 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

Vigezo

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

Fremu muhimu

Inatumika kuunda uhuishaji wa CSS wa .progress-bar-animated. Imejumuishwa katika scss/_progress-bar.scss.

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