84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Cards
|
|||
|
|
localeTitle: 牌
|
|||
|
|
---
|
|||
|
|
## #Bootstrap 4卡
|
|||
|
|
|
|||
|
|
* 使用Bootstrap 4可以创建卡片。
|
|||
|
|
|
|||
|
|
* 卡片是带边框的盒子，内部有一些填充物，可以方便地显示一组特定的信息。
|
|||
|
|
|
|||
|
|
|
|||
|
|
##### 要创建一个基本的Bootstrap 4卡，您需要创建一个带有`.card`类的`<div>`容器，并在另一个带有`.card-body`类的`<div>`容器中`.card-body`
|
|||
|
|
|
|||
|
|
###### 这就是它在html doc中的外观
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<!-- content of the card goes here -->
|
|||
|
|
<div class="card-body">Content</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ＃＃＃ 页眉和页脚
|
|||
|
|
|
|||
|
|
可以通过添加页眉和页脚来增强卡的结构。要添加其中一个元素，必须使用`.card-header`或`.card-footer`类创建`<div>`容器。
|
|||
|
|
|
|||
|
|
###### 这就是它在html doc中的外观
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<!-- content of the card goes here -->
|
|||
|
|
<div class="card-header">Header content</div>
|
|||
|
|
<div class="card-body">Body content</div>
|
|||
|
|
<div class="card-footer">Footer content</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ###卡片与图像
|
|||
|
|
|
|||
|
|
* 您还可以使用特定的类来显示卡片中的图像。
|
|||
|
|
|
|||
|
|
* 为此目的有两个类：card-img-top，它将图像放在卡片的顶部;而card-img-bottom，将图像放在底部，两者都使它们适合圆形边框。卡整齐地。
|
|||
|
|
|
|||
|
|
* 这些类必须与卡内的`<img>`标签一起使用才能正常工作。
|
|||
|
|
|
|||
|
|
* 请记住，如果您希望图像跨越整个宽度，则可以使用card-body类将图像容器添加到`<div>`容器之外。
|
|||
|
|
|
|||
|
|
|
|||
|
|
###### 这就是它在html doc中的外观
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<!-- content of the card goes here -->
|
|||
|
|
<!-- image on the top of the content -->
|
|||
|
|
<img src="picture.jpg" alt="Picture" class="card-img-top">
|
|||
|
|
<div class="card-body">Body content</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<!-- content of the card goes here -->
|
|||
|
|
<div class="card-body">Body content</div>
|
|||
|
|
<!-- image on the bottom of the content -->
|
|||
|
|
<img src="picture.jpg" alt="Picture" class="card-img-bottom">
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ###卡片叠加
|
|||
|
|
|
|||
|
|
* 要将图像放入卡片的背景并在其上显示文本，您需要在要在图像上显示的内容上使用class card-img-overlay，而不是使用卡片体类。
|
|||
|
|
|
|||
|
|
###### 这就是它在html doc中的外观
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<!-- content of the card goes here -->
|
|||
|
|
<img src="picture.jpg" alt="Picture" class="card-img-top">
|
|||
|
|
<!-- this content is displayed over the image, which is now in the background and covers the whole element -->
|
|||
|
|
<div class="card-img-overlay">Overlay content</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
```
|