rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-10 03:46:13 +01:00
Code Issues Actions Packages Releases Activity
Bootstrap/site/content/docs/4.5/components/progress.md

140 lines
6.1 KiB
Markdown
Raw Normal View History

Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
---
Massive cleanup - Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color
2015-08-14 22:45:55 -07:00
layout: docs
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
title: Progress
update components docs
2017-05-27 23:01:14 -07:00
description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
restore page headers, use partial and page frontmatter to organize it
2015-08-05 17:47:45 -07:00
group: components
update components docs
2017-05-27 23:01:14 -07:00
toc: true
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
---
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
## How it works
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
update components docs
2017-05-27 23:01:14 -07:00
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
- We use the inner `.progress-bar` to indicate the progress so far.
add example of width util
2016-12-30 21:43:16 -08:00
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
Put that all together, and you have the following examples.
Only caption 1st set of progress bar examples
2016-02-08 00:31:10 -08:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<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>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Docs: Add captions above progress bars; refs #17264 [skip sauce]
2016-02-07 13:13:06 -08:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
add example of width util
2016-12-30 21:43:16 -08:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
add example of width util
2016-12-30 21:43:16 -08:00
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
add example of width util
2016-12-30 21:43:16 -08:00
update components docs
2017-05-27 23:01:14 -07:00
## Labels
Docs: Add captions above progress bars; refs #17264 [skip sauce]
2016-02-07 13:13:06 -08:00
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
Add labels to your progress bars by placing text within the `.progress-bar`.
Docs: Add captions above progress bars; refs #17264 [skip sauce]
2016-02-07 13:13:06 -08:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
update components docs
2017-05-27 23:01:14 -07:00
## Height
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
Update progress.md to reflect setting height on .progress
2017-05-26 10:52:15 -07:00
We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Update progress.md to reflect setting height on .progress
2017-05-26 10:52:15 -07:00
<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>
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
</div>
Update progress.md to reflect setting height on .progress
2017-05-26 10:52:15 -07:00
<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>
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
</div>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
update components docs
2017-05-27 23:01:14 -07:00
## Backgrounds
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
Use background utility classes to change the appearance of individual progress bars.
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<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>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
update components docs
2017-05-27 23:01:14 -07:00
## Multiple bars
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
Include multiple progress bars in a progress component if you need.
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<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>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
update components docs
2017-05-27 23:01:14 -07:00
## Striped
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< example >}}
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<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">
Fix progress doc markup
2017-01-04 12:04:07 -05:00
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
</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>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
{{< /example >}}
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
update components docs
2017-05-27 23:01:14 -07:00
## Animated stripes
fix progress bar animated biznas
2014-10-26 22:48:12 -07:00
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
Rewrite progress to markdown
2014-07-11 15:45:11 -07:00
rename classes from .bs-docs and .bs to .bd
2015-04-16 14:07:20 -07:00
<div class="bd-example">
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Ensure button plugin sets/removes active class correctly on page load (#28952) * Ensure correct active class is set on button toggles/checkboxes/radios on page load Sanity check, ensures that the UI visually matches the actual values/states of controls. Also ensures that if any autocomplete/autofill happened, this is visually accounted for by having the correct class set. Includes unit tests (and `autocomplete` has been removed from these as it's no longer necessary) * Remove now unnecessary autocomplete attribute As the attribute was there to force/ensure that the visual presentation matched the state, and this is now taken care of programmatically, there's no need to unnecessarily suppress autocomplete...let them autocomplete if they want to...
2019-06-24 21:01:44 +01:00
<button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false">
fix progress bar animated biznas
2014-10-26 22:48:12 -07:00
Toggle animation
</button>
</div>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
```html
Rewrite progress component without <progress> element - <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
2016-12-29 14:56:28 -08:00
<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>
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2020-11-04 16:39:29 +02:00
```
Reference in New Issue Copy Permalink