Source

პროგრესი

დოკუმენტაცია და მაგალითები 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>

ზოლიანი

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

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