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); @include border-radius($list-group-border-radius);
} }
// stylelint-disable selector-no-qualifying-type .list-group-numbered {
ol.list-group {
list-style-type: none; list-style-type: none;
counter-reset: section; counter-reset: section;
@ -23,7 +22,6 @@ ol.list-group {
counter-increment: section; counter-increment: section;
} }
} }
// stylelint-enable selector-no-qualifying-type
// Interactive list items // 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> </ul>
{{< /example >}} {{< /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`. 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 >}} {{< 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> <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. These work great with custom content as well.
{{< example >}} {{< 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"> <li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto"> <div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div> <div class="fw-bold">Subheading</div>