11文件 - 《bootstrap》

1、卡片的主体部分
2、图片
3、列表组、页眉、页脚
4、组合模式：上述所说的都可以放进去
- 官方例子：
5、宽度设置
6、对齐
7、导航
8、图像
9、文本放在图片身上
10、卡片样式-背景色
11、卡片样式-边框（字和边框最好颜色一致）
12、页眉和页脚的边框（页眉页尾可透明也可不透）
13、卡片排版-卡片组
14、卡片排版-卡片之间互不相连的，但是尺寸是一样
15、卡片排版-瀑布流式排列（主要看思路）？？？？

1、卡片的主体部分

<div class="col-lg-4">
    <div class="card">
        <div class="card-body">
            <!-- 卡片的主体部分 -->
            <h3 class="card-title">这是卡片的标题</h3>
            <h4 class="card-subtitle mb-3">这是卡片的幅标题</h4>
            <p class="card-text">这是卡片的文本内容，需要添加一个card-text的class</p>
            <a href="#" class="card-link">链接1</a>
            <a href="#" class="card-link">链接2</a><!-- 自动在第二个card-link加1.25rem -->
        </div>
    </div>
</div>

2、图片

<div class="col-lg-4">
    <div class="card">
        <img class="card-img-top" src="images/img_02.jpg" alt=""><!-- 不要放在body中 -->
        <!-- card-img-top：改变图片尺寸 -->
        <div class="card-body">
            <p class="card-text">这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长
            </p>
        </div>
    </div>
</div>

3、列表组、页眉、页脚

<div class="col-lg-4">
    <div class="card">
        <div class="card-header">这是卡片的头部，也叫页眉</div>
        <ul class="list-group list-group-flush"> <!-- 不添加body：会出现margin，所以不加 -->
            <li class="list-group-item">这是列表的文字</li>
            <li class="list-group-item">这是列表的文字</li>
            <li class="list-group-item">这是列表的文字</li>
        </ul>
        <div class="card-footer">这是卡片的底部，也叫页脚</div>
    </div>
</div>

4、组合模式：上述所说的都可以放进去

<div class="row mt-5"> <!-- 注意顺序 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">陈数</div>
            <img class="card-img-top" src="images/img_03.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <a href="#" class="card-link btn btn-primary">链接1</a>
                <a href="#" class="card-link btn btn-info">链接2</a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">这是列表的文字</li>
                <li class="list-group-item">这是列表的文字</li>
                <li class="list-group-item">这是列表的文字</li>
            </ul>
            <div class="card-footer">页脚</div>
        </div>
    </div>
</div>

官方例子：

<div class="row mt-5">
    <div class="col">
        <div class="card text-center"><!-- text-center： 所有居中 -->
            <div class="card-header">Featured</div>
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer text-muted">2 days ago</div>
        </div>
    </div>
</div>

5、宽度设置

<div class="row mt-5">
    <div class="card" style="width: 20rem;"><!-- w-75 -->
        <h5 class="card-title">这是卡片的标题</h5>
        <p class="card-text">
            这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
        </p>
        <a href="#" class="card-link btn btn-primary">链接1</a>
    </div>
</div>

6、对齐

<div class="row mt-5">
    <div class="col-lg-4">
        <div class="card text-left">
            <div class="card-body">
                <h5 class="card-title">左对齐</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <a href="#" class="card-link btn btn-primary">链接1</a>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">居中对齐</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <a href="#" class="card-link btn btn-primary">链接1</a>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-right">
            <div class="card-body">
                <h5 class="card-title">右对齐</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <a href="#" class="card-link btn btn-primary">链接1</a>
            </div>
        </div>
    </div>
</div>

7、导航

<div class="row mt-5">
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs"><!-- 导航 -->
                <li class="nav-item">
                    <a href="#" class="nav-link active">Active</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Link</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Disabled</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <h5 class="card-title">结合导航</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <a href="#" class="card-link btn btn-primary">链接1</a>
        </div>
    </div>
</div>

8、图像

<div class="row mt-5">
    <div class="card">
        <!-- 图片在上边 -->
        <img class="card-img-top" src="images/banner.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
    <div class="card">
        <!-- 图片在下边 -->
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
        <img class="card-img-bottom" src="images/banner.jpg" alt="">
    </div>
</div>

9、文本放在图片身上

<div class="row mt-5">
    <div class="card">
        <img class="card-img-top" src="images/banner.jpg" alt="">
        <div class="card-img-overlay text-white"><!-- card-img-overlay -->
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small>2 days ago</small></p>
        </div>
    </div>
</div>

10、卡片样式-背景色

<div class="row mt-5">
    <div class="col-3">
        <div class="card text-white bg-primary"><!-- 颜色：text-white bg-primary -->
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-secondary">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-success">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-danger">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-warning">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-info">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card bg-light">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card text-white bg-dark">
            <div class="card-header">卡片的头部</div>
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
</div>

11、卡片样式-边框（字和边框最好颜色一致）

<div class="row mt-5">
    <div class="col-3">
        <div class="card border-primary"><!-- border-primary -->
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-primary"><!-- text-primary -->
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-secondary">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-secondary">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-success">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-success">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-danger">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-danger">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-warning">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-warning"">
                <h5 class=" card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-info">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-info">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-light">
            <div class="card-header">卡片的头部</div>
            <div class="card-body border-light">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card border-dark">
            <div class="card-header">卡片的头部</div>
            <div class="card-body text-dark">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
        </div>
    </div>
</div>

12、页眉和页脚的边框（页眉页尾可透明也可不透）

<div class="row mt-5">
    <div class="col-3">
        <div class="card border-success">
            <div class="card-header bg-transparent border-success">卡片的头部</div><!-- bg-transparent：背景透明 -->
            <div class="card-body text-primary">
                <h5 class="card-title">这是卡片的标题</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
            </div>
            <div class="card-footer bg-transparent border-success">卡片的底部</div>
            <!-- bg-transparent：透明 -->
        </div>
    </div>
</div>

13、卡片排版-卡片组

<div class="row mt-5 card-group"><!-- card-group：卡片组，注意圆角 -->
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
</div>

14、卡片排版-卡片之间互不相连的，但是尺寸是一样

<div class="row mt-5 card-deck">
    <!-- card-deck:不相连 -->
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/img_03.jpg" alt="">
        <div class="card-body">
            <h5 class="card-title">这是卡片的标题</h5>
            <p class="card-text">
                这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
            </p>
            <p class="card-text"><small class="text-muted">2 days ago</small></p>
        </div>
    </div>
</div>

15、卡片排版-瀑布流式排列（主要看思路）？？？？

<div class="row mt-5">
    <div class="card-columns"><!-- card-columns：瀑布流：要新的一层 -->
        <div class="card">
            <img class="card-img-top" src="images/img_03.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题1</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <p class="card-text"><small class="text-muted">2 days ago</small></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="images/img_04.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题2</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <p class="card-text"><small class="text-muted">2 days ago</small></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="images/img_04.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题3</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <p class="card-text"><small class="text-muted">2 days ago</small></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="images/img_04.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题4</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
                </p>
                <p class="card-text"><small class="text-muted">2 days ago</small></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="images/img_03.jpg" alt="">
            <div class="card-body">
                <h5 class="card-title">这是卡片的标题5</h5>
                <p class="card-text">
                    这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一，需要添加一个card-text的class
                </p>
                <p class="card-text"><small class="text-muted">2 days ago</small></p>
            </div>
        </div>
    </div>
</div>