Ахиц дэвшил

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

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

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

Явцын бүрэлдэхүүн хэсгүүд нь хоёр HTML элемент, өргөнийг тохируулах зарим CSS болон цөөн хэдэн шинж чанаруудаар бүтээгдсэн. Бид HTML5 <progress>элементийг ашигладаггүй бөгөөд ингэснээр та ахиц дэвшлийн мөрүүдийг давхарлаж, тэдгээрийг хөдөлгөөнтэй болгож, дээр нь текстийн шошго байрлуулах боломжтой.

Бид .progressахиц дэвшлийн талбарын хамгийн их утгыг заахдаа боодол болгон ашигладаг.
.progress-barОдоогийн байдлаар ахиц дэвшлийг харуулахын тулд бид дотоод хэсгийг ашигладаг .
Өргөнийг .progress-barтохируулахын тулд шугамын хэв маяг, хэрэгслийн анги эсвэл захиалгат CSS шаардлагатай.
Мөн хандах боломжтой нэр ( , , эсвэл үүнтэй төстэй) зэргийг багтаасан хандах боломжтой болгохын .progress-barтулд зарим roleболон шинж чанаруудыг шаарддаг.ariaaria-labelaria-labelledby

Энэ бүгдийг нэгтгэж үзвэл танд дараах жишээнүүд байна.

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 нь өргөнийг тохируулах цөөн хэдэн хэрэгслүүдээр хангадаг . Таны хэрэгцээ шаардлагаас хамааран эдгээр нь ахиц дэвшлийг хурдан тохируулахад тусална.

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>

Шошго

Дотроо текст байрлуулж явцын талбарт шошго нэмнэ үү .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>

Өндөр

Бид зөвхөн дээр heightутгыг тохируулдаг .progressтул хэрэв та энэ утгыг өөрчилбөл дотоод хэмжээ .progress-barавтоматаар өөрчлөгдөнө.

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>

Арын дэвсгэр

Явцын талбарын харагдах байдлыг өөрчлөхийн тулд суурь хэрэгслийн ангиллыг ашиглана уу.

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>

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Олон баар

Шаардлагатай бол ахиц дэвшлийн бүрэлдэхүүн хэсэгт хэд хэдэн явцын мөрийг оруулаарай.

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>

Судалчлагдсан

Явцын талбарын дэвсгэр өнгө дээр CSS градиентаар зураас тавихын .progress-bar-stripedтулд дурын дээр нэмнэ үү ..progress-bar

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>

Хөдөлгөөнт судлууд

Судалчлагдсан градиентийг мөн хөдөлгөөнт болгож болно. CSS3 хөдөлгөөнт дүрсээр баруунаас зүүн тийш зураасыг хөдөлгөөнтэй болгохын тулд .progress-bar-animatedнэмэх ..progress-bar

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн арга барилын нэг хэсэг болгон ахиц дэвшлийн талбарууд одоо .progressсайжруулсан бодит цагийн тохиргоонд зориулж локал CSS хувьсагчдыг ашиглаж байна. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

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

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;

Түлхүүр фрэймүүд

-д зориулсан CSS хөдөлгөөнт дүрсийг бүтээхэд ашигладаг .progress-bar-animated. -д багтсан scss/_progress-bar.scss.

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