首页
会员中心
到顶部
到尾部
Bootstrap4教程

Bootstrap4 列表组

时间:2020/11/2 15:34:05  作者:  来源:  查看:0  评论:0
内容摘要:Bootstrap4 列表组大部分基础列表组都是无序的。要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在<li> 元素上添加 .list-group-item 类:实例<ul class="list-group&...

Bootstrap4 列表组

大部分基础列表组都是无序的。

Bootstrap4 列表组

要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在<li> 元素上添加 .list-group-item 类:

实例

<ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li></ul>

尝试一下 »

激活状态的列表项

通过添加 .active 类来设置激活状态的列表项:

实例

<ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li></ul>

尝试一下 »

禁用的列表项

.disabled 类用于设置禁用的列表项:

实例

<ul class="list-group"> <li class="list-group-item disabled">Disabled item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li></ul>

尝试一下 »

链接列表项

要创建一个链接的列表项,可以将 <ul> 替换为 <div><a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:

实例

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a></div>

尝试一下 »

多种颜色列表项

Bootstrap4 列表组

列表项目的颜色可以通过以下列来设置:.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-darklist-group-item-light:

实例

<ul class="list-group"> <li class="list-group-item list-group-item-success">成功列表项</li> <li class="list-group-item list-group-item-secondary">次要列表项</li> <li class="list-group-item list-group-item-info">信息列表项</li> <li class="list-group-item list-group-item-warning">警告列表项</li> <li class="list-group-item list-group-item-danger">危险列表项</li> <li class="list-group-item list-group-item-primary">主要列表项</li> <li class="list-group-item list-group-item-dark">深灰色列表项</li> <li class="list-group-item list-group-item-light">浅色列表项</li></ul>

尝试一下 »

链接的多种颜色列表项

实例

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">激活列表项</a> <a href="#" class="list-group-item list-group-item-success">成功列表项</a> <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a> <a href="#" class="list-group-item list-group-item-info">信息列表项</a> <a href="#" class="list-group-item list-group-item-warning">警告列表项</a> <a href="#" class="list-group-item list-group-item-danger">危险列表项</a> <a href="#" class="list-group-item list-group-item-primary">主要列表项</a> <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a> <a href="#" class="list-group-item list-group-item-light">浅色列表项</a></div>

尝试一下 »


相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号