Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Ɲɛfɛtaali

Sɛbɛnw ni misaliw baarakɛcogo la Bootstrap ladamu ɲɛtaa baraw la minnu bɛ dɛmɛ jira baraw lajɛlenw kan, kɔkanna ɲɛnamaw, ani sɛbɛnniw taamasiyɛnw.

A bɛ baara kɛ cogo min na

Ɲɛtaa yɔrɔw bɛ jɔ ni HTML fɛn fila ye, CSS dɔw walasa ka bonya sigi, ani fɛn damadɔw. An tɛ baara Kɛ ni HTML5 <progress>yɔrɔ ye , k’a Jira ko i bɛ Se ka ɲɛtaa-sɛbɛnw Sìgi ɲɔgɔn kan, k’u Labɛn, ka sɛbɛnni-sɛbɛnw Blà u kan.

  • An bɛ baara Kɛ ni .progressas a wrapper ye walasa ka max value jira progress bar la.
  • An bɛ baara kɛ ni kɔnɔna .progress-barye walasa ka ɲɛtaa jira fo ka na se bi ma.
  • The .progress-barbɛ inline style, utility class, walima custom CSS de wajibiya walasa k’u bonya sigi.
  • The .progress-barfana bɛ dɔw roleni ariajogo dɔw de wajibiya walasa a ka se ka sɔrɔ.

Aw ye o bɛɛ fara ɲɔgɔn kan, aw bɛ nin misaliw sɔrɔ.

<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 bɛ nafamafɛn damadɔ di walasa ka bonya sigi sen kan . Ka kɛɲɛ ni i magow ye, o fɛnw bɛ se ka dɛmɛ don ɲɛtaa labɛnni na joona.

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

Labels (Labɛnw).

Aw bɛ labeliw fara aw ka ɲɛtaa jiralanw kan ni sɛbɛnniw bilali ye .progress-bar.

25% ye .
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Janya

An bɛ heightnafa dɔ dɔrɔn de Sìgi .progress, o la n'i y'o nafa Yɛlɛma kɔnɔna .progress-barbɛ bonya Yɛlɛma a yɛrɛma ka Kɛɲɛ ni o ye.

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

Backgrounds (Baarakɛcogo).

Baara kɛ ni kɔkanna nafama kalanw ye walasa ka ɲɛtaa taamasiyɛn kelen-kelen bɛɛ cogoya Changer.

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

Baro caman

Aw bɛ ɲɛtaa jiralan caman don ɲɛtaa yɔrɔ dɔ la ni aw mago bɛ a la.

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

A bɛ kɛ ni sɛrɛkiliw ye

Fàra .progress-bar-stripedo .progress-barkan walasa ka sɛrɛ dɔ Kɛ CSS gradient fɛ progress bar ka kɔkanna kulɛri kan.

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

Bande animées

Gradient striped fana bɛ se ka kɛ animation ye. A fara a kan .progress-bar-animatedwalasa .progress-barka jiriw ɲɛnamaya kinin fɛ ka taa numan fɛ CSS3 animationw fɛ.

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

Yɛlɛma-yɛlɛmaw

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

Keyframes (kalansenw).

A bɛ kɛ ka CSS animations dilan ka ɲɛsin .progress-bar-animated. A bɛ sɔrɔ scss/_progress-bar.scss.

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