in English

Kupita patsogolo

Zolemba ndi zitsanzo zogwiritsa ntchito ma bar a Bootstrap omwe ali ndi chithandizo cha mipiringidzo yokhazikika, makanema ojambula, ndi zolemba.

Patsamba ili

Momwe zimagwirira ntchito

Zigawo zopita patsogolo zimamangidwa ndi zinthu ziwiri za HTML, zina za CSS kuti zikhazikitse m'lifupi, ndi makhalidwe ochepa. Sitigwiritsa ntchito chinthu cha HTML5<progress> , kuwonetsetsa kuti mutha kuyika zitsulo zopita patsogolo, kuzipangitsa kukhala zamoyo, ndikuyika zilembo pamwamba pake.

Timagwiritsa ntchito .progressngati chomangirira kuti tiwonetse kuchuluka kwapamwamba kwa kapamwamba.
Timagwiritsa ntchito zamkati .progress-barkusonyeza kupita patsogolo mpaka pano.
Izi .progress-barzimafuna kalembedwe kameneka, kalasi yothandiza, kapena CSS yokhazikika kuti ikhazikitse m'lifupi mwake.
Imafunikanso .progress-barzina rolendi ariazikhumbo kuti zitheke.

Ikani zonse pamodzi, ndipo muli ndi zitsanzo zotsatirazi.

<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 imapereka zida zingapo zokhazikitsira m'lifupi . Kutengera ndi zosowa zanu, izi zitha kukuthandizani kukonza mwachangu kupita patsogolo.

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

Zolemba

Onjezani malembo kuzomwe mukupita patsogolo poyika mawu mkati mwa .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>

Kutalika

Timangoyika heightmtengo pa .progress, kotero ngati mutasintha mtengo wamkatiyo .progress-barudzasintha molingana.

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

Mbiri

Gwiritsani ntchito makalasi ogwiritsira ntchito kumbuyo kuti musinthe mawonekedwe a mipiringidzo yopita patsogolo.

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

Mipiringidzo ingapo

Phatikizani mipiringidzo yambiri yopita patsogolo ngati mukufuna.

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

Mizeremizere

Onjezani .progress-bar-stripedku chilichonse .progress-barkuti mugwiritse ntchito mzere kudzera pa CSS gradient pamtundu wakumbuyo wa kapamwamba.

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

Mikwingwirima yamakanema

Mizeremizere gradient ingathenso kukhala animated. Onjezani .progress-bar-animatedkuti .progress-barmuwongolere mikwingwirima kumanja kupita kumanzere kudzera pa makanema ojambula pa 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

Zosintha

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

Mafelemu ofunika

Amagwiritsidwa ntchito popanga makanema ojambula a CSS a .progress-bar-animated. Kuphatikizidwa mu scss/_progress-bar.scss.

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