in English

Ахиц дэвшил

Давхардсан баар, хөдөлгөөнт дэвсгэр болон текст шошгыг дэмждэг Bootstrap-ийн өөрчлөн явцын мөрүүдийг ашиглах баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Хэрхэн ажилладаг

Явцын бүрэлдэхүүн хэсгүүд нь хоёр HTML элемент, өргөнийг тохируулах зарим 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>

Bootstrap нь өргөнийг тохируулах цөөн хэдэн хэрэгслүүдээр хангадаг . Таны хэрэгцээ шаардлагаас хамааран эдгээр нь ахиц дэвшлийг хурдан тохируулахад тусална.

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