Progress

Dokumentācija un piemēri Bootstrap pielāgoto norises joslu izmantošanai, kas atbalsta saliktas joslas, animētus fonus un teksta etiķetes.

Šajā lapā

Kā tas strādā

Progresa komponenti ir veidoti ar diviem HTML elementiem, dažiem CSS platuma iestatīšanai un dažiem atribūtiem. Mēs neizmantojam HTML5 <progress>elementu , nodrošinot, ka varat sakraut norises joslas, animēt tās un novietot virs tām teksta iezīmes.

Mēs izmantojam .progresskā iesaiņojumu, lai norādītu progresa joslas maksimālo vērtību.
Mēs izmantojam iekšējo .progress-bar, lai norādītu līdzšinējo progresu.
Lai .progress-bariestatītu platumu, ir nepieciešams iekļauts stils, utilīta klase vai pielāgots CSS.
Lai padarītu to pieejamu, .progress-barir nepieciešami arī daži roleun atribūti.aria

Salieciet to visu kopā, un jums ir šādi piemēri.

<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 piedāvā vairākas utilītas platuma iestatīšanai . Atkarībā no jūsu vajadzībām tie var palīdzēt ātri konfigurēt progresu.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Etiķetes

Pievienojiet iezīmes savām progresa joslām, ievietojot tekstu sadaļā .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>

Augstums

Mēs iestatām heightvērtību tikai .progress, tāpēc, ja mainīsit šo vērtību, iekšējais .progress-barizmērs tiks automātiski attiecīgi mainīts.

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

Foni

Izmantojiet fona utilītu klases, lai mainītu atsevišķu progresa joslu izskatu.

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

Vairāki stieņi

Ja nepieciešams, progresa komponentā iekļaujiet vairākas progresa joslas.

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

Svītrains

Pievienojiet .progress-bar-stripedjebkuram .progress-bar, lai, izmantojot CSS gradientu, lietotu svītru virs progresa joslas fona krāsas.

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

Animētas svītras

Svītraino gradientu var arī animēt. Pievienot .progress-bar-animated, .progress-barlai animētu svītras no labās puses uz kreiso, izmantojot CSS3 animācijas.

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

Sass

Mainīgie lielumi

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

Atslēgkadri

Izmanto, lai izveidotu CSS animācijas .progress-bar-animated. Iekļauts scss/_progress-bar.scss.

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