列表 Lists
基本示例
最基本的列表组是一个不排序列表。
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
节点选择器
添加 .active
到一个.list-group-item
指示当前活动的选择.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
禁用节点
添加 .disabled
到一个 .list-group-item
使节点 显示为 禁用. 注意某些带有 .disabled
的元素还需要自定义 JavaScript 来完全禁用点击事件 (如:链接).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
链接和按钮
添加 .list-group-item-action
可以使 <链接>
或 <按钮>
具有悬停, 禁用, 和 点击的效果。我们将这些伪类(pseudo-classes)分开,以确保由非交互元素(如<li>
或<div>
)组成的列表组不会提供点击或提示。
去边框
添加 .list-group-flush
删除边框和圆角,使列表组在父容器(例如:卡片)中边到边呈现。
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
列表添加多媒体
包含多媒体(如:图片)内容的列表
-
安子轩commented on your post's
-
达里尔commented on your post's
-
阿七commented on your post's
自适应表格
使用List制作一个表格,可以在移动端呈现很好的自适应性