虚拟主机网站建设过程,网络推广优化服务,成都旅游网站建设,江西城开建设集团有限公司网站Bootstrap 5 列表组(List Group)语法知识点及案例
一、列表组基础语法
列表组是Bootstrap中用于显示一系列内容的灵活组件#xff0c;常用于显示菜单、导航或任何项目列表。
基本列表组结构
ul classlist-groupli classlist-group-item常用于显示菜单、导航或任何项目列表。
基本列表组结构
ul classlist-groupli classlist-group-item第一项/lili classlist-group-item第二项/lili classlist-group-item第三项/li
/ul二、列表组样式选项
1. 激活和禁用状态
ul classlist-groupli classlist-group-item active aria-currenttrue激活项/lili classlist-group-item disabled aria-disabledtrue禁用项/lili classlist-group-item普通项/li
/ul2. 颜色变体
Bootstrap 5提供了多种上下文颜色
ul classlist-groupli classlist-group-item list-group-item-primary主要项/lili classlist-group-item list-group-item-secondary次要项/lili classlist-group-item list-group-item-success成功项/lili classlist-group-item list-group-item-danger危险项/lili classlist-group-item list-group-item-warning警告项/lili classlist-group-item list-group-item-info信息项/lili classlist-group-item list-group-item-light浅色项/lili classlist-group-item list-group-item-dark深色项/li
/ul3. 无边框列表组
ul classlist-group list-group-flushli classlist-group-item无边框项1/lili classlist-group-item无边框项2/li
/ul三、列表组内容类型
1. 带徽章的列表组
ul classlist-groupli classlist-group-item d-flex justify-content-between align-items-center收件箱span classbadge bg-primary rounded-pill12/span/lili classlist-group-item d-flex justify-content-between align-items-center垃圾邮件span classbadge bg-danger rounded-pill99/span/li
/ul2. 自定义内容
div classlist-groupa href# classlist-group-item list-group-item-action activediv classd-flex w-100 justify-content-betweenh5 classmb-1列表组标题/h5small3天前/small/divp classmb-1这里是列表项的主要内容描述。/psmall附加小文字说明/small/aa href# classlist-group-item list-group-item-actiondiv classd-flex w-100 justify-content-betweenh5 classmb-1另一个标题/h5small classtext-muted昨天/small/divp classmb-1另一个列表项的内容描述。/psmall classtext-muted更多小文字/small/a
/div3. 复选框和单选按钮列表组
ul classlist-groupli classlist-group-iteminput classform-check-input me-1 typecheckbox value idfirstCheckboxlabel classform-check-label forfirstCheckbox第一选项/label/lili classlist-group-iteminput classform-check-input me-1 typecheckbox value idsecondCheckboxlabel classform-check-label forsecondCheckbox第二选项/label/li
/ul四、列表组交互行为
1. 可点击的列表组
div classlist-groupa href# classlist-group-item list-group-item-action可点击项1/aa href# classlist-group-item list-group-item-action可点击项2/aa href# classlist-group-item list-group-item-action可点击项3/a
/div2. 水平列表组
ul classlist-group list-group-horizontalli classlist-group-item水平项1/lili classlist-group-item水平项2/lili classlist-group-item水平项3/li
/ul五、综合案例代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleBootstrap 5 列表组示例/title!-- Bootstrap 5 CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheet
/head
bodydiv classcontainer py-5h1 classmb-4Bootstrap 5 列表组示例/h1!-- 示例1基本列表组 --div classrow mb-5div classcol-md-6h31. 基本列表组/h3ul classlist-groupli classlist-group-item默认列表项/lili classlist-group-item active激活状态项/lili classlist-group-item disabled禁用状态项/li/ul/divdiv classcol-md-6h32. 带徽章的列表组/h3ul classlist-groupli classlist-group-item d-flex justify-content-between align-items-center未读消息span classbadge bg-primary rounded-pill14/span/lili classlist-group-item d-flex justify-content-between align-items-center待办事项span classbadge bg-warning text-dark rounded-pill5/span/li/ul/div/div!-- 示例2颜色变体和自定义内容 --div classrow mb-5div classcol-md-6h33. 颜色变体列表组/h3div classlist-groupa href# classlist-group-item list-group-item-action list-group-item-primary主要操作项/aa href# classlist-group-item list-group-item-action list-group-item-success成功操作项/aa href# classlist-group-item list-group-item-action list-group-item-danger危险操作项/a/div/divdiv classcol-md-6h34. 自定义内容列表组/h3div classlist-groupa href# classlist-group-item list-group-item-action active aria-currenttruediv classd-flex w-100 justify-content-betweenh5 classmb-1最新公告/h5small今天/small/divp classmb-1系统将于今晚12点进行维护升级预计耗时2小时。/psmall点击查看详情/small/aa href# classlist-group-item list-group-item-actiondiv classd-flex w-100 justify-content-betweenh5 classmb-1产品更新/h5small classtext-muted3天前/small/divp classmb-1我们发布了新版本v2.0包含多项功能改进。/psmall classtext-muted点击查看更新日志/small/a/div/div/div!-- 示例3交互式列表组 --div classrow mb-5div classcol-md-6h35. 复选框列表组/h3ul classlist-groupli classlist-group-iteminput classform-check-input me-1 typecheckbox value idoption1 checkedlabel classform-check-label foroption1电子邮件通知/label/lili classlist-group-iteminput classform-check-input me-1 typecheckbox value idoption2label classform-check-label foroption2短信通知/label/lili classlist-group-iteminput classform-check-input me-1 typecheckbox value idoption3label classform-check-label foroption3推送通知/label/li/ul/divdiv classcol-md-6h36. 水平列表组/h3ul classlist-group list-group-horizontal-md mb-3li classlist-group-item首页/lili classlist-group-item active产品/lili classlist-group-item服务/lili classlist-group-item关于我们/li/ulh3 classmt-47. 无边框列表组/h3ul classlist-group list-group-flushli classlist-group-item设置/lili classlist-group-item账户/lili classlist-group-item隐私/li/ul/div/div/div!-- Bootstrap 5 JS Bundle with Popper --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js/script
/body
/html六、关键点总结
基础结构使用list-group作为容器list-group-item作为列表项状态控制active和disabled类控制项状态颜色变体通过list-group-item-*类设置不同颜色交互增强添加list-group-item-action使列表项可点击内容扩展可以在列表项中放置任意HTML内容布局选项list-group-horizontal实现水平布局list-group-flush移除边框
列表组是Bootstrap中非常灵活的组件可以用于构建导航菜单、通知列表、设置面板等各种界面元素。通过组合不同的类和结构可以实现丰富的视觉效果和交互体验。
