Bootstrap中怎么添加列表?下面本篇文章给大家介绍一下Bootstrap5列表群组List group组件的用法,希望对大家有所帮助!
列表组是显示一系列内容的灵活而强大的组件。Bootstrap修改和扩展它们以支持其中的任何内容。 最基本的列表组是一个无序的列表,其中包含列表项和适当的类。在它的基础上使用下面的选项,或者根据需要使用您自己的CSS。【相关推荐:《bootstrap教程》】
看下面列表是不很简单,就是在html列表元素的基础上加了两个类list-group和ist-group-item
将active加到list-group-item指示当前的活动状态。 将disabled加到list-group-item使其呈现禁用。
使用a或button,并加入list-group-item-action来创建具有hover、禁用和启用状态的动态列表群组。我们分离这些伪类别,以确保由非交互元素组成的列表群组(如li或div)不提供点击或触击。
确保不要在这里使用标准的btn。
在list-group中加入list-group-flush来移除部分边框及圆角,以在父容器中(如:卡片)产生边缘贴齐的列表群组。
在list-group中添加list-group-numbered修饰符类(并可选地使用ol元素)以选择编号的列表组项。数字是通过CSS生成的(与ol的默认浏览器样式相反),以便更好地放置在列表组项目中,并允许更好的自定义。
数字由ol上的counter reset生成,然后在li上用 ::before 元素设置样式并放置在counter increment和content中。
- 第一项内容
- 第二项内容
- 第三项内容
li中还可以使用其他元素。
第一项标题第一项内容 第二项标题第二项内容 第三项标题第三项内容
列表并不是总是竖向排列的,在list-group中加入list-group-horizontal将列表显示改为水平。
你也选择加入响应式变化.list-group-horizontal-{sm|md|lg|xl|xxl},使列表群组从该断点的最小min-width开始水平放置。
目前水平列表群组不能与Flush列表群组合并使用。
- 第一项内容
- 第二项内容
- 第三项内容
在list-group-item中加入list-group-item-颜色
可以改变列表背景颜色。
这里添加了上一个示例中没有的悬停样式。还支持active状态;应用它以指示情境式列表组项上的活动选择。
同过通用类,向任何列表项目添加标签以显示未读计数、活动等。
- 第一项内容 14
- 第二项内容 14
- 第三项内容 14
通过弹性盒子通用类,几乎任何的HTML都能加入到项目内,如以下的列表群组连接。
将Bootstrap的复选框与单选框放在列表群组中,并依据需要进行自定义。您可以在不使用label的情况下使用它们,但请记住要包含aria-label以及必要的内容。
下面两个例子radio和checkbox用法都是一样的,所以每样演示了一个。
如果您希望将label作为list-group-item使用以创造较大的点击区域,这么做是可以的。用将表单和文字包裹在一起即可。
更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!
위 내용은 Bootstrap中怎么添加列表?列表群组的用法浅析의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!