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>

Сызылган

Прогресс тактасының фон төсе өстендә 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>