Iterambere

Inyandiko hamwe ningero zo gukoresha Bootstrap yihariye yiterambere ryimbere ryerekana inkunga kubibari byegeranye, imiterere yimiterere, hamwe nibirango byanditse.

Kuriyi page

Uburyo ikora

Ibice byiterambere byubatswe hamwe nibintu bibiri bya HTML, CSS zimwe kugirango dushyireho ubugari, nibiranga bike. Ntabwo dukoresha element ya HTML5<progress> , twemeza ko ushobora gutondekanya utubari twiterambere, kubishushanya, no gushyira ibirango byanditse hejuru yabyo.

Dukoresha i .progressnk'ugupfunyika kugirango twerekane agaciro ntarengwa k'iterambere.
Dukoresha imbere .progress-barkugirango twerekane iterambere kugeza ubu.
Ibisabwa muburyo bwa .progress-barinline, urwego rwingirakamaro, cyangwa CSS yihariye kugirango bashire ubugari bwabo.
Uwiteka .progress-bararasaba rolekandi ariaibiranga kugirango bigerweho.

Shyira ibyo byose hamwe, kandi ufite ingero zikurikira.

<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 itanga intoki zingirakamaro mugushiraho ubugari . Ukurikije ibyo ukeneye, ibi birashobora gufasha mugushiraho iterambere byihuse.

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

Ibirango

Ongeraho ibirango kumurongo witerambere ushyira inyandiko muri .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>

Uburebure

Dushiraho gusa heightagaciro kuri the .progress, niba rero uhinduye ako gaciro imbere .progress-barizahita ihinduka uko bikwiye.

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

Amavu n'amavuko

Koresha ibyiciro byingirakamaro byamasomo kugirango uhindure isura yumuntu ku giti cye.

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

Utubari twinshi

Shyiramo utubari twinshi twiterambere mubice bigize iterambere.

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

Yanditse

Ongeraho .progress-bar-stripedkuri buriwese .progress-barkugirango ushireho umurongo ukoresheje CSS gradient hejuru yiterambere ryumurongo winyuma.

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

Imirongo ya animasiyo

Ikigereranyo cya gradient irashobora kandi kuba animasiyo. Ongeraho .progress-bar-animatedkugirango .progress-barushushanye imirongo iburyo n'ibumoso ukoresheje animasiyo ya 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

Ibihinduka

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

Urufunguzo

Byakoreshejwe mugukora animasiyo ya CSS ya .progress-bar-animated. Harimo scss/_progress-bar.scss.

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