in English

პროგრესი

დოკუმენტაცია და მაგალითები Bootstrap-ის პერსონალური პროგრესის ზოლების გამოყენებისთვის, რომლებიც აღჭურვილია დაწყობილი ზოლების, ანიმაციური ფონის და ტექსტური ეტიკეტების მხარდაჭერით.

ამ გვერდზე

Როგორ მუშაობს

პროგრესის კომპონენტები აგებულია ორი HTML ელემენტით, ზოგიერთი CSS სიგანის დასაყენებლად და რამდენიმე ატრიბუტით. ჩვენ არ ვიყენებთ HTML5 <progress>ელემენტს , იმის გარანტიას, რომ თქვენ შეძლებთ პროგრესის ზოლების დაწყობას, მათ ანიმაციას და მათზე ტექსტური ეტიკეტების განთავსებას.

ჩვენ ვიყენებთ .progressროგორც შეფუთვას პროგრესის ზოლის მაქსიმალური მნიშვნელობის აღსანიშნავად.
ჩვენ ვიყენებთ შიდას .progress-bar, რათა მიუთითოთ აქამდე პროგრესი.
.progress-barმოითხოვს ჩაშენებულ სტილს, სასარგებლო კლასს ან მორგებულ CSS-ს მათი სიგანის დასაყენებლად .
ასევე .progress-barმოითხოვს გარკვეულ roleდა ariaატრიბუტებს, რათა ის ხელმისაწვდომი გახდეს, მათ შორის ხელმისაწვდომი სახელი (გამოყენებით aria-label, aria-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>

ზოლიანი

დაამატეთ .progress-bar-stripedნებისმიერს .progress-bar, რათა გამოიყენოთ ზოლი CSS გრადიენტის საშუალებით პროგრესის ზოლის ფონის ფერზე.

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

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, პროგრესის ზოლები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .progressრეალურ დროში გაძლიერებული პერსონალიზაციისთვის. 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; }
  }
}