Bootstrap 列表组怎么把静态条目做成可点击的操作项.list-group-item-action 与禁用态写法【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrapBootstrap 列表组List group最基本的用法是ul classlist-group加一串li classlist-group-item条目只有静态外观。当你希望条目具备可点击的交互反馈——悬停变色、按下反馈、禁用态——时需要把条目改成a或button并加上.list-group-item-action类。这是 List group 文档中 Links and buttons 一节给出的标准做法本文按官方文档整理完整写法和验证方式。为什么默认列表组条目点不动Bootstrap 刻意把悬停、禁用等伪类状态从.list-group-item上分离出来只挂在.list-group-item-action上。官方文档的原话是这样做的目的是确保由li或div这类非交互元素组成的列表组不会显示点击或轻触的可交互外观click or tap affordance。所以如果你的列表组只有li它本来就不应该有悬停效果——想让它变成操作项必须换元素类型而不是给li加类。第一步把换成 或列表组容器可以用ul、ol或divscss/_list-group.scss中注明 Easily usable onul,ol, ordiv。官方文档给出的链接版写法div classlist-group a href# classlist-group-item list-group-item-action active aria-currenttrue The current link item /a a href# classlist-group-item list-group-item-actionA second link item/a a href# classlist-group-item list-group-item-actionA third link item/a a href# classlist-group-item list-group-item-actionA fourth link item/a a href# classlist-group-item list-group-item-action disabled aria-disabledtrueA disabled link item/a /div用button的等价写法div classlist-group button typebutton classlist-group-item list-group-item-action active aria-currenttrue The current button /button button typebutton classlist-group-item list-group-item-actionA second button item/button button typebutton classlist-group-item list-group-item-actionA third button item/button button typebutton classlist-group-item list-group-item-actionA fourth button item/button button typebutton classlist-group-item list-group-item-action disabledA disabled button item/button /div文档在此处有一条明确警告不要在这些条目上使用标准的.btn类。两类条目同时混排时保持同一种元素类型全a或全button即可。当前选中项.active在.list-group-item上加.active表示当前激活的选中项并配合aria-currenttrue让辅助技术获知状态li classlist-group-item active aria-currenttrueAn active item/li注意.active和.disabled是两回事.active标记当前选中.disabled标记不可操作互不替代。禁用态的两种写法这是最容易写错的地方因为a和button能力不同元素禁用写法原因a.disabled类 aria-disabledtruea不支持原生disabled属性button原生disabled属性即可文档原文Withbuttons, you can also make use of thedisabledattribute instead of the.disabledclass. Sadly,as dont support the disabled attribute.从 scss/_list-group.scss 可以看到禁用态.list-group-item.disabled或:disabled实际生效的样式只有三处color: var(--#{$prefix}list-group-disabled-color); pointer-events: none; background-color: var(--#{$prefix}list-group-disabled-bg);也就是说.disabled类在视觉上让条目呈禁用外观对应 scss/_variables.scss 中的$list-group-disabled-color与$list-group-disabled-bgCSS 层通过pointer-events: none挡掉了鼠标点击。但官方文档同时明确指出You may require additional JavaScript to fully disable links and buttons.即禁用链接的完整防激活可能需要你自己补充 JS文档没有提供统一实现。一个典型的处理思路是拦截点击事件以下为通用示例非官方代码document.querySelectorAll(a.list-group-item-action.disabled).forEach(link { link.addEventListener(click, event { event.preventDefault() }) })如何验证做对了在浏览器中打开页面后按以下现象判断悬停/聚焦反馈鼠标移到条目上出现背景与文字颜色变化。对应源码是 scss/_list-group.scss 中.list-group-item-action:not(.active)的:hover, :focus状态。如果你加的类没写对比如写成了.btn条目不会有这套悬停样式。激活外观带.active的条目使用--bootstrap-list-group-active-color/active-bg等 CSS 变量呈现选中外观v5.2.0 起列表组改用本地 CSS 变量见文档 CSS Variables 一节。禁用态.disabled条目变灰且不响应鼠标点击a版本检查 DOM 上是否有aria-disabledtruebutton版本检查原生disabled属性。无障碍提醒如果条目颜色承担了状态含义不要只靠颜色传达——文档引用的提示要求含义能从内容本身可见文本或.visually-hidden隐藏文本读出见 warning-color-assistive-technologies。可选分支上下文变体list-group-item-{primary|success|warning|danger|info|secondary|light|dark}这类上下文类同样可与.list-group-item-action配合用于a/button且带悬停样式和.active状态文档 For links and buttons 一节。自定义内容操作项内部可以放几乎任意 HTML官方用 flexbox 工具类如d-flex w-100 justify-content-between排布标题、时间和正文结构见文档 Custom content 一节的完整示例。整项可点的表单条目如果条目里放的是 checkbox/radio 而不是链接可以在label上加.stretched-link让整个列表组项可点击原理与限制见 stretched-link 文档。下一步条目需要切换内容面板时如果可点击条目不仅要反馈还要切换右侧/下方的内容面板文档 JavaScript behavior 一节给出了现成路径使用 Tab 插件单独引入或通过编译后的bootstrap.js在.list-group-item上写data-bs-togglelist即可不写一行 JavaScript 实现列表组导航div classlist-group idmyList roletablist a classlist-group-item list-group-item-action active contenteditable="false">【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/13 4:09:53 · 阅读 1.2k Bootstrap 列表组怎么把静态条目做成可点击的操作项？.list-group-item-action 与禁用态写法
Bootstrap 列表组怎么把静态条目做成可点击的操作项.list-group-item-action 与禁用态写法【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrapBootstrap 列表组List group最基本的用法是ul classlist-group加一串li classlist-group-item条目只有静态外观。当你希望条目具备可点击的交互反馈——悬停变色、按下反馈、禁用态——时需要把条目改成a或button并加上.list-group-item-action类。这是 List group 文档中 Links and buttons 一节给出的标准做法本文按官方文档整理完整写法和验证方式。为什么默认列表组条目点不动Bootstrap 刻意把悬停、禁用等伪类状态从.list-group-item上分离出来只挂在.list-group-item-action上。官方文档的原话是这样做的目的是确保由li或div这类非交互元素组成的列表组不会显示点击或轻触的可交互外观click or tap affordance。所以如果你的列表组只有li它本来就不应该有悬停效果——想让它变成操作项必须换元素类型而不是给li加类。第一步把换成 或列表组容器可以用ul、ol或divscss/_list-group.scss中注明 Easily usable onul,ol, ordiv。官方文档给出的链接版写法div classlist-group a href# classlist-group-item list-group-item-action active aria-currenttrue The current link item /a a href# classlist-group-item list-group-item-actionA second link item/a a href# classlist-group-item list-group-item-actionA third link item/a a href# classlist-group-item list-group-item-actionA fourth link item/a a href# classlist-group-item list-group-item-action disabled aria-disabledtrueA disabled link item/a /div用button的等价写法div classlist-group button typebutton classlist-group-item list-group-item-action active aria-currenttrue The current button /button button typebutton classlist-group-item list-group-item-actionA second button item/button button typebutton classlist-group-item list-group-item-actionA third button item/button button typebutton classlist-group-item list-group-item-actionA fourth button item/button button typebutton classlist-group-item list-group-item-action disabledA disabled button item/button /div文档在此处有一条明确警告不要在这些条目上使用标准的.btn类。两类条目同时混排时保持同一种元素类型全a或全button即可。当前选中项.active在.list-group-item上加.active表示当前激活的选中项并配合aria-currenttrue让辅助技术获知状态li classlist-group-item active aria-currenttrueAn active item/li注意.active和.disabled是两回事.active标记当前选中.disabled标记不可操作互不替代。禁用态的两种写法这是最容易写错的地方因为a和button能力不同元素禁用写法原因a.disabled类 aria-disabledtruea不支持原生disabled属性button原生disabled属性即可文档原文Withbuttons, you can also make use of thedisabledattribute instead of the.disabledclass. Sadly,as dont support the disabled attribute.从 scss/_list-group.scss 可以看到禁用态.list-group-item.disabled或:disabled实际生效的样式只有三处color: var(--#{$prefix}list-group-disabled-color); pointer-events: none; background-color: var(--#{$prefix}list-group-disabled-bg);也就是说.disabled类在视觉上让条目呈禁用外观对应 scss/_variables.scss 中的$list-group-disabled-color与$list-group-disabled-bgCSS 层通过pointer-events: none挡掉了鼠标点击。但官方文档同时明确指出You may require additional JavaScript to fully disable links and buttons.即禁用链接的完整防激活可能需要你自己补充 JS文档没有提供统一实现。一个典型的处理思路是拦截点击事件以下为通用示例非官方代码document.querySelectorAll(a.list-group-item-action.disabled).forEach(link { link.addEventListener(click, event { event.preventDefault() }) })如何验证做对了在浏览器中打开页面后按以下现象判断悬停/聚焦反馈鼠标移到条目上出现背景与文字颜色变化。对应源码是 scss/_list-group.scss 中.list-group-item-action:not(.active)的:hover, :focus状态。如果你加的类没写对比如写成了.btn条目不会有这套悬停样式。激活外观带.active的条目使用--bootstrap-list-group-active-color/active-bg等 CSS 变量呈现选中外观v5.2.0 起列表组改用本地 CSS 变量见文档 CSS Variables 一节。禁用态.disabled条目变灰且不响应鼠标点击a版本检查 DOM 上是否有aria-disabledtruebutton版本检查原生disabled属性。无障碍提醒如果条目颜色承担了状态含义不要只靠颜色传达——文档引用的提示要求含义能从内容本身可见文本或.visually-hidden隐藏文本读出见 warning-color-assistive-technologies。可选分支上下文变体list-group-item-{primary|success|warning|danger|info|secondary|light|dark}这类上下文类同样可与.list-group-item-action配合用于a/button且带悬停样式和.active状态文档 For links and buttons 一节。自定义内容操作项内部可以放几乎任意 HTML官方用 flexbox 工具类如d-flex w-100 justify-content-between排布标题、时间和正文结构见文档 Custom content 一节的完整示例。整项可点的表单条目如果条目里放的是 checkbox/radio 而不是链接可以在label上加.stretched-link让整个列表组项可点击原理与限制见 stretched-link 文档。下一步条目需要切换内容面板时如果可点击条目不仅要反馈还要切换右侧/下方的内容面板文档 JavaScript behavior 一节给出了现成路径使用 Tab 插件单独引入或通过编译后的bootstrap.js在.list-group-item上写data-bs-togglelist即可不写一行 JavaScript 实现列表组导航div classlist-group idmyList roletablist a classlist-group-item list-group-item-action active contenteditable="false">【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考