Bootstrap之占位符

秃头man

于 2022-04-20 19:19:10 发布

阅读量969

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_44703604/article/details/124304802

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Bootstrap的占位符功能，用于在网络不佳时显示数据加载前的占位，确保布局完整性。通过对比展示，解释了如何使用卡片组件创建占位符，并提供了示例代码，包括左右两边的占位符效果，以及如何添加闪烁效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、占位符

当网络不好时，数据未加载出来时，会有元素来把没有加载出来的元素的位置占着
对比：
通过卡片组件来展示
请添加图片描述
示例代码（左边）

    <div class="card w-25 float-start">
        <img src="../..//壁纸3.jpg" alt="" class="card-img-top img-fluid">
        <div class="card-body">
            <h5>风景图片</h5>
            <p class="card-text">发生发射点发射点犯得上犯得上发射点发生</p>
        </div>

    </div>

示例代码（右边）：
placeholder-glow外面的容器设置
placeholder 里面的内容设置
placeholder-glow增加了忽明忽暗的效果

    <div class="card w-25 float-start">
        <img src="../..//壁纸3.jpg" alt="" class="card-img-top img-fluid">
        <div class="card-body">
            <!-- placeholder-glow   忽闪效果
            placeholder  变成灰色   占6格-->
            <h5 class="placeholder-glow">
                <span class="placeholder col-6 bg-info"></span>
            </h5>
            <p class="card-text placeholder-glow">
                <span class="placeholder col-7 bg-danger"></span>
                <span class="placeholder col-4 bg-success"></span>
                <span class="placeholder col-4 bg-primary"></span>
                <span class="placeholder col-6 bg-dark"></span>

            </p>
        </div>
    </div>