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.
Zimafunikanso .progress-barzina rolendi zina ariakuti zitheke, kuphatikiza dzina lopezeka (kugwiritsa ntchito aria-label, aria-labelledby, kapena zofanana).

Ikani zonse pamodzi, ndipo muli ndi zitsanzo zotsatirazi.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" 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.

html

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

Zolemba

Onjezani malembo kuzomwe mukupita patsogolo poyika mawu mkati mwa .progress-bar.

25%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" 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.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" 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.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Mipiringidzo ingapo

Phatikizani mipiringidzo yambiri yopita patsogolo ngati mukufuna.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" 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.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" 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.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la njira yosinthira ya CSS ya Bootstrap, mipiringidzo yopita patsogolo tsopano imagwiritsa ntchito zosintha za CSS zakomweko .progresskuti zisinthidwe nthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Zosintha za Sass

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