Bootstrap4.x学习笔记【十二】

　　　　　　内容扩展管理器——卡片

卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合

一、卡片样式

1.先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容

    <div class="card" style="width:300px;">
        <div class="card-body">卡片主体</div>
    </div>
    <br>

2. ①卡片主体标题可以使用.card-title(标题).card-subtitle(小标题)等

    ②卡片主体使用.card-text 代表文本内容

    ③卡片主体使用.card-link 代表超链接

    <div class="card" style="width: 300px;">
        <div class="card-body">
            <h4 class="card-title">卡片标题</h4>
            <h6 class="card-subtitle text-muted">小标题</h6>
            <p class="card-text">这里是卡片的文本内容！...</p>
            <a href="#" class="card-link">注册</a>
            <a href="#" class="card-link">登录</a>
        </div>
    </div>

3.使用.card-img-top 可以设计一个带主题图片的内容管理器

    <div class="card" style="width:300px;">
        <img class="card-img-top" src="img/1.png" alt="bt">
        <div class="card-body">
            Hello！
        </div>
    </div>

 

4.①使用.card-header 设置一个列表组的标头

   ②使用.card-footer 配合.card-header，负责页眉页脚

    <div class="card text-center" style="width:300px;">
        <div class="card-header text-left">列表标题</div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">列表1</li>
            <li class="list-group-item">列表2</li>
            <li class="list-group-item">列表3</li>
        </ul>
        <div class="card-footer text-right">页脚</div>
    </div>

5.卡片默认是 100%显示的，可以使用栅格系统嵌套来固定卡片的布局，也可以使用.w-25、.w-50、w-75、w-100 来设置卡片的显示百分比

6.卡片支持文本的整体对齐和局部的对齐方式，采用.text-center 等

7.卡片使用.card-header-tabs 可以配合列表 ul 实现导航功能

    <div class="card text-center"style="width:500px;">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item"><a href="#"class="nav-link active">主页</a></li>
                <li class="nav-item"><a href="#"class="nav-link">内容</a></li>
                <li class="nav-item"><a href="#"class="nav-link disabled">关于</a></li>
            </ul>
        </div>
        <div class="card-body">
            。。。
        </div>
    </div>

8.将 ul 中的文本改成按钮式：.nav-pills、.card-header-pills 实现按钮导航

    <div class="card text-center"style="width:500px;">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
                <li class="nav-item"><a href="#"class="nav-link active">主页</a></li>
                <li class="nav-item"><a href="#"class="nav-link">内容</a></li>
                <li class="nav-item"><a href="#"class="nav-link disabled">关于</a></li>
            </ul>
        </div>
        <div class="card-body">
            。。。
        </div>
    </div>

9.卡片中.card-img 插入一个整体的图片，卡片通过内部栅格，也可以实现左右水平排列的图文显示

    <div class="card w-75">
        <div class="row">
            <div class="col-sm-6">
                <img class="card-img" src="img/图书馆.png" alt="bt">
            </div>
            <div class="col-sm-6">
                <div class="card-title">图片标题</div>
                <div class="card-text">图片文本</div>
            </div>
        </div>
    </div>