• Bootstrap4.x学习笔记【十二】


          内容扩展管理器——卡片

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

    一、卡片样式

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

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

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

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

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

        <div class="card" style=" 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="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="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="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="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>

  • 相关阅读:
    HbuildeX项目打包
    百度地图(vue)
    压缩图片
    安卓移动端唤起拨号与邮箱
    上传图片 原生或vant
    git从零开始
    HbuilderX,监视物理按键
    gitlab备份and恢复数据
    ⑨.kubernetes 之ingress
    ⑧.kubernetes pod调度
  • 原文地址:https://www.cnblogs.com/Small-Windmill/p/13415258.html
Copyright © 2020-2023  润新知