商贸有限公司网站案例,网站项目建设背景,中国城乡建设部网站首页,房产手机网站开发目录 01-列表组的相关基础知识02-一个简单的列表组示例03-激活或禁用列表组的一行或多行04-设置列表项的颜色05-给列表项添加徽章 01-列表组的相关基础知识
Bootstrap的list-group是一个用于创建列表组件的CSS类#xff0c;通常用于显示一个项目列表#xff0c;如导航菜单或… 目录 01-列表组的相关基础知识02-一个简单的列表组示例03-激活或禁用列表组的一行或多行04-设置列表项的颜色05-给列表项添加徽章 01-列表组的相关基础知识
Bootstrap的list-group是一个用于创建列表组件的CSS类通常用于显示一个项目列表如导航菜单或其他相关信息的列表。它通常与ul或ol元素结合使用创建一个垂直的项目列表每个项目都可以包含文本、链接、按钮或其他内容。以下是一些常用的list-group类和用法
list-group这是主要的list-group类用于创建基本的列表组件。通常与ul或ol元素一起使用。
ul classlist-groupli classlist-group-itemItem 1/lili classlist-group-itemItem 2/lili classlist-group-itemItem 3/li
/ullist-group-item这是用于每个列表项的类。它可以包含文本和其他元素。
ul classlist-groupli classlist-group-itemItem 1/lili classlist-group-itemItem 2/lili classlist-group-itemItem 3/li
/ullist-group-item-action这是用于将列表项转化为可交互的动作元素的类通常用于制作可点击的链接或按钮比如下面的代码中如果没有加上属性 list-group-item-action 那么鼠标放到相应的区域上无变化而加上的话鼠标放到相应的区域这个区域会有变化。
ul classlist-groupli classlist-group-item list-group-item-actionClickable Item 1/lili classlist-group-item list-group-item-actionClickable Item 2/lili classlist-group-item list-group-item-actionClickable Item 3/li
/ullist-group-item-primary, list-group-item-secondary, list-group-item-success, 等这些是用于指定列表项的颜色主题的类。您可以根据需要选择不同的颜色主题。
ul classlist-groupli classlist-group-item list-group-item-primaryPrimary Item/lili classlist-group-item list-group-item-successSuccess Item/lili classlist-group-item list-group-item-dangerDanger Item/li
/ullist-group-item-heading这是用于添加每个列表项的标题的类。
ul classlist-groupli classlist-group-itemh5 classlist-group-item-headingItem Title/h5Item description goes here./li
/ul以上是一些Bootstrap中list-group的常见类和用法它们可以帮助您创建各种列表组件用于导航、显示信息或其他目的。您可以根据自己的需求组合和自定义这些类以满足特定的设计和功能要求。
02-一个简单的列表组示例
!DOCTYPE html
html
headmeta charsetUTF-8title列表组/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter列表组/h3
ul classlist-groupli classlist-group-item list-group-item-action江南行 张潮〔唐代〕/lili classlist-group-item list-group-item-action1. 茨菰叶烂别西湾/lili classlist-group-item list-group-item-action2. 莲子花开犹未还/lili classlist-group-item list-group-item-action3. 妾梦不离江水上/lili classlist-group-item list-group-item-action4. 人传郎在凤凰山/li
/ul
/body
/html运行效果如下 由于添加到类list-group-item-action所以当鼠标放到对应的区域上效果如下 如果相应的行我没有添加类list-group-item-action那么效果如下
03-激活或禁用列表组的一行或多行
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title激活和禁用状态/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter激活和禁用状态/h3
ul classlist-groupli classlist-group-item江南行 张潮〔唐代〕/lili classlist-group-item active1. 茨菰叶烂别西湾激活状态/lili classlist-group-item active2. 莲子花开犹未还激活状态/lili classlist-group-item disabled3. 妾梦不离江水上禁用状态/lili classlist-group-item disabled4. 人传郎在凤凰山禁用状态/li
/ul
/body
/html运行效果如下
04-设置列表项的颜色
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title设置列表项的颜色/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter列表项的背景和文字颜色/h3
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
/ul
/body
/html运行效果如下
05-给列表项添加徽章
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title添加徽章/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter添加徽章/h3
h5各个训练营报名的人数/h5
ul classlist-groupli classlist-group-item d-flex justify-content-between align-items-center网络安全训练营span classbadge badge-primary badge-pill260/span/lili classlist-group-item d-flex justify-content-between align-items-center网站开发训练营span classbadge badge-primary badge-pill160/span/lili classlist-group-item d-flex justify-content-between align-items-center人工智能开发训练营span classbadge badge-primary badge-pill220/span/li
/ul
/body
/html运行效果如下
