እድገት

ለተደራረቡ አሞሌዎች፣ የታነሙ ዳራዎች እና የጽሑፍ መለያዎች የሚያሳዩ የBootstrap ብጁ ሂደት አሞሌዎችን ለመጠቀም ሰነዶች እና ምሳሌዎች።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

የሂደት አካሎች የተገነቡት በሁለት የኤችቲኤምኤል አካላት፣ አንዳንድ CSS ስፋቱን ለማዘጋጀት እና በጥቂት ባህሪያት ነው። የሂደት አሞሌዎችን መቆለል፣ ማንቃት እና የጽሑፍ መለያዎችን በእነሱ ላይ ማስቀመጥ መቻልን በማረጋገጥ HTML5 ን<progress> አንጠቀምም ።

.progressየሂደቱን አሞሌ ከፍተኛውን ዋጋ ለማመልከት እንደ መጠቅለያ እንጠቀማለን ።
.progress-barእስካሁን ያለውን እድገት ለማመልከት ከውስጥ እንጠቀማለን ።
ስፋታቸውን .progress-barለማዘጋጀት የውስጥ መስመር ዘይቤ፣ የመገልገያ ክፍል ወይም ብጁ CSS ያስፈልገዋል።
ተደራሽ ለማድረግ .progress-barአንዳንድ roleእና ባህሪያትን ይፈልጋል ።aria

ሁሉንም አንድ ላይ አስቀምጡ, እና የሚከተሉት ምሳሌዎች አሉዎት.

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

ቡትስትራፕ ስፋትን ለማዘጋጀት ጥቂት መገልገያዎችን ይሰጣል ። እንደ ፍላጎቶችዎ ፣ እነዚህ በፍጥነት እድገትን ለማዋቀር ሊረዱ ይችላሉ።

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

መለያዎች

በ ውስጥ ጽሑፍን በማስቀመጥ በሂደት አሞሌዎችዎ ላይ መለያዎችን ያክሉ .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>

ቁመት

heightዋጋን የምናዘጋጀው በ ላይ ብቻ ነው .progress፣ ስለዚህ ያንን ዋጋ ከቀየሩት የውስጡ ልክ .progress-barእንደዚያው መጠን ይለወጣል።

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

ዳራዎች

የግለሰብ የሂደት አሞሌዎችን ገጽታ ለመለወጥ የጀርባ መገልገያ ክፍሎችን ይጠቀሙ።

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

በርካታ አሞሌዎች

ከፈለጉ በሂደት ክፍል ውስጥ ብዙ የሂደት አሞሌዎችን ያካትቱ።

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

የተራቆተ

በCSS ቅልመት በሂደት አሞሌው የጀርባ ቀለም ላይ ፈትል ለመተግበር .progress-bar-stripedወደ ማንኛውም ያክሉ ።.progress-bar

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

የታነሙ ጭረቶች

የጭረት ቅልጥፍናም እንዲሁ ሊነቃ ይችላል። በCSS3 እነማዎች በኩል ከቀኝ ወደ ግራ ገመዶቹን እነማ ለማድረግ ወደ ላይ .progress-bar-animatedያክሉ ።.progress-bar

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

ሳስ

ተለዋዋጮች

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

የቁልፍ ፍሬሞች

የ CSS እነማዎችን ለመፍጠር ያገለግላል .progress-bar-animated። ውስጥ ተካትቷል scss/_progress-bar.scss።

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