Bootstrap列表list-group-item与card 卡片
大部分基础列表组都是无序的。
要创建列表组，可以在
- 元素上添加 .list-group 类, 在
- 元素上添加 .list-group-item 类:
基础列表组
- First item
- Second item
- Third item
![Image 1][]
激活状态列表
- Active item
- 。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:
- 成功列表项
- 次要列表项
- 信息列表项
- 警告列表项
- 危险列表项
- 主要列表项
- 深灰色列表项
- 浅色列表项
![Image 1][]
.disabled 类用于设置禁用的列表项:
![Image 1][]
链接列表项
要创建一个链接的列表项，可以将
- ， 替换
![Image 1][]
多种颜色列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:
多种颜色列表项
![Image 1][]
![Image 1][]
-———————————————————————————————————————————————————————————————————————————————————————————————————————-
div class=”container”>
简单的卡片
![Image 1][]
头部和底部
卡片头部和底部
![Image 1][]
#
#
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。 text-white用法：将卡片里部的字体变白
多种颜色卡片
![Image 1][]
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link类用于给链接设置颜色。
![Image 1][]
典型的例子：
bootstrap中container垂直居中
图片卡片
图片在头部 (card-img-top):
定义卡片card
定义卡片图片在文字上方card-img-top
定义卡片中的内容 card-body
John Doe
定义设置卡片的标题 card-title
Some example text some example text. John Doe is an architect and engineer
定义用于设置卡片正文的内容 card-text
See Profile
定义设置卡片的链接btn btn priamry
图片在底部(card-img-bottom):
![Image 1][]
[Image 1]:
深藏阁楼爱情的钟
╰+攻爆jí腚メ
太过爱你忘了你带给我的痛
向右看齐
左手的ㄟ右手
r囧r小猫
亦凉
朱雀
还没有评论，来说两句吧...