Framfarir
Skjöl og dæmi til að nota Bootstrap sérsniðnar framvindustikur sem bjóða upp á stuðning við staflaða stikur, teiknaðan bakgrunn og textamerki.
Hvernig það virkar
Framvinduhlutir eru byggðir með tveimur HTML þáttum, sumum CSS til að stilla breiddina og nokkrum eiginleikum. Við notum ekki HTML5 <progress>
þáttinn , sem tryggir að þú getir staflað framvindustikum, gert þær hreyfimyndir og sett textamerki yfir þær.
- Við notum
.progress
sem umbúðir til að gefa til kynna hámarksgildi framvindustikunnar. - Við notum hið innra
.progress-bar
til að sýna framfarirnar hingað til. - Það
.progress-bar
krefst innbyggðs stíls, gagnaflokks eða sérsniðins CSS til að stilla breidd þeirra. - Það
.progress-bar
krefst líka nokkurrarole
ogaria
eiginleika til að gera það aðgengilegt.
Settu þetta allt saman og þú hefur eftirfarandi dæmi.
<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 býður upp á handfylli af tólum til að stilla breidd . Það fer eftir þörfum þínum, þetta gæti hjálpað til við að stilla framfarir fljótt.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Merki
Bættu merkimiðum við framvindustikurnar þínar með því að setja texta í .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Hæð
Við setjum aðeins height
gildi á .progress
, þannig að ef þú breytir því gildi mun innra .progress-bar
stærð sjálfkrafa breytast í samræmi við það.
<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>
Bakgrunnur
Notaðu bakgrunnsforrit til að breyta útliti einstakra framvindustika.
<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>
Margar stangir
Hafa margar framvindustikur í framvinduhluta ef þú þarft.
<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>
Röndótt
Bættu .progress-bar-striped
við hvaða sem er .progress-bar
til að setja rönd með CSS halla yfir bakgrunnslit framvindustikunnar.
<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>
Hreyfimyndaðar rendur
Einnig er hægt að hreyfa röndótta hallann. Bættu .progress-bar-animated
við til .progress-bar
að lífga rendurnar frá hægri til vinstri í gegnum CSS3 hreyfimyndir.
<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>