kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Change from element selector to the opt-in class

This commit is contained in:
Mark Otto 2021-03-10 21:49:47 -08:00 committed by Mark Otto
parent defce83027
commit 5c6e72c6fe
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_list-group.scss
View File

@ -12,8 +12,7 @@
@include border-radius($list-group-border-radius);
}
// stylelint-disable selector-no-qualifying-type
ol.list-group {
.list-group-numbered {
list-style-type: none;
counter-reset: section;
@ -23,7 +22,6 @@ ol.list-group {
counter-increment: section;
}
}
// stylelint-enable selector-no-qualifying-type
// Interactive list items

8
site/content/docs/5.0/components/list-group.md
View File

@ -94,14 +94,14 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
</ul>
{{< /example >}}
## Ordered list
## Numbered
Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` psuedo-element on the `<li>` with `counter-increment` and `content`.
{{< example >}}
<ol class="list-group">
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
@ -111,7 +111,7 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac
These work great with custom content as well.
{{< example >}}
<ol class="list-group">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>