Kgatelopele

Ditokomane le mehlala ya go šomiša dibara tša tšwelopele ya tlwaelo tša Bootstrap tšeo di bontšhago thekgo ya dibara tše di kgobokeditšwego, dimelo tša dipopaye, le dileibole tša sengwalwa.

Letlakaleng le

Kamoo e šomago ka gona

Dikarolo tša tšwelopele di agilwe ka dielemente tše pedi tša HTML, tše dingwe tša CSS go beakanya bophara, le dika tše mmalwa. Ga re šomiše elemente ya HTML5<progress> , re netefatša gore o ka kgoboketša dibara tša tšwelopele, wa di phediša, le go bea dileibole tša sengwalwa godimo ga tšona.

Re šomiša .progressbjalo ka sephuthedi go laetša boleng bja max bja baara ya tšwelopele.
Re šomiša ya ka gare .progress-bargo laetša tšwelopele go fihla ga bjale.
The .progress-bare nyaka setaele sa ka gare ga mothaladi, sehlopha sa utility, goba CSS ya tlwaelo go beakanya bophara bja bona.
The .progress-bargape e nyaka tše dingwe rolele ariadika go e dira gore e fihlelelege, go akaretšwa leina leo le fihlelelwago (go šomiša aria-label, aria-labelledby, goba se se swanago).

Bea seo ka moka mmogo, gomme o na le mehlala ye e latelago.

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 e fana ka seatla se se tletšego sa didirišwa tša go beakanya bophara . Go ithekgile ka dinyakwa tša gago, tše di ka thuša ka go beakanya tšwelopele ka pela.

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>

Dileibole

Oketša dileibole go dibara tša gago tša tšwelopele ka go bea sengwalwa ka gare ga .progress-bar.

25% ya .

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>

Bogodimo

Re bea fela heightboleng go .progress, ka fao ge o fetoša boleng bjoo bja ka gare .progress-barbo tla fetoša bogolo ka go iketla go ya ka fao.

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>

Dimelo tša ka morago

Šomiša diklase tša mohola wa ka morago go fetoša ponagalo ya dibara tša tšwelopele ka botee.

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>

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Dibara tše dintši

Akaretša dibara tše ntši tša tšwelopele karolong ya tšwelopele ge o nyaka.

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>

E na le methalo

Oketša .progress-bar-stripedgo efe goba efe .progress-bargo diriša mothalo ka CSS gradient godimo ga mmala wa morago wa baara ya tšwelopele.

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>

Methalo ya dipopaye

The metsero gradient ka boela animated. Oketša .progress-bar-animatedgo .progress-bargo phediša methalo go le letona go ya go le letshadi ka dipopaye tša 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

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya go batamela ga diphetogo tša CSS tša Bootstrap tšeo di tšwelelago, dibara tša tšwelopele bjale di šomiša diphetogo tša CSS tša selegae godimo .progressbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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;

Diforeime tša bohlokwa

E šomišwa go hlama ditshwantšho tša dipopaye tša CSS tša .progress-bar-animated. E akareditšwe go scss/_progress-bar.scss.

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