Bootstrap4速成笔记六 Pagination,Popover,Progress,Scrollspy,Tooltips

最新推荐文章于 2023-07-24 22:16:36 发布

退堂鼓一级演员

最新推荐文章于 2023-07-24 22:16:36 发布

阅读量246

点赞数

分类专栏：前端文章标签： css html bootstrap html5

本文链接：https://blog.youkuaiyun.com/yeweij226/article/details/104502492

版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了前端开发中的Pagination分页器、Popover提示信息、Progress进度条、Scrollspy滚动监听及Tooltips工具提示等组件的使用方法，通过实例详细讲解了如何在项目中应用这些组件。

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

文章目录

Pagination分页器

使用分页器可以设置分页
使用方法：使用类为"pagination"的ul作为包装，然后设置多个类为"page-item"的页表项，每个页表项设置类为"page-link"的链接标签

<div class="component demo">
        <nav>
            <ul class="pagination">
                <li class="page-item">
                    <a href="#" class="page-link">1</a></li>
                <li class="page-item">
                    <a href="#" class="page-link">2</a></li>
                <li class="page-item">
                    <a href="#" class="page-link">3</a></li>
                <li class="page-item">
                    <a href="#" class="page-link">4</a></li>
            </ul>
        </nav>
    </div>

在这里插入图片描述
可以在包装类上设置情景类，例如pagination+宽度(xs/sm/md/lg/xl)设置宽度

Popover显示提示信息方法

在任何可以使用动作的控件上都可以加入popover方法来显示一些提示信息，例如在下面的例子中对按钮加入popover方法，
使用方法：设置data-toggle=popover，data-title=标题内容，data-content=主体内容；
在这里我设置了一些属性内容，如data-placement="bottom"设置提示信息在下部显示；data-trigger="focus"设置点击任意位置提示信息消失
代码：

 <div class="component demo">
        <button type="button" data-toggle="popover" title="a" class="btn btn-primary" data-content="abcgduehos" data-placement="bottom" data-trigger="focus">Pop</button>
    </div>

在这里插入图片描述

Progress进度条组件

使用Progress组件可以实现进度条的相关效果

使用方法：首先设置类为"progress"的div作为包装，然后在里面设置一个类为"progress-bar"的div作为进度条的显示组件，情景类可以设置progress-bar-striped设置条纹样式，progress-bar-animated设置动画样式

在这里使用了bg样式进行了颜色上的修改

<div class="component demo">
        <div class="progress">
            <div class="bg-danger progress-bar progress-bar-striped progress-bar-animated" style="width:30%">30%</div>
        </div>
    </div>

在这里插入图片描述

Scrollspy滚动监听方法

可以使用Scrollspy的方法监听滚动的效果并且予以显示
首先使用无序列表创建一个带导航的文本段（方法请见Bootstrap4速成笔记五 Listgroup,Modal,Nav,NavBar中的nav与navbar内容）
代码如下

<body>
    <div class="row">
        <div class="col-3">
            <ul class="nav nav-pills flex-column position-fixed bg-light p-3 text-right">
                <li class="nav-item"><a href="#html" class="nav-link">HTML</a></li>
                <li class="nav-item"><a href="#css" class="nav-link">CSS</a></li>
                <li class="nav-item"><a href="#js" class="nav-link">JS</a></li>
            </ul>
        </div>
        <div class="col-9">
            <h3 id="html">HTML</h3>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <h3 id="css">CSS</h3>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <h3 id="js">JS</h3>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
            <p>Hide and seek will be played by every child, which is my favorite game. I like to find a quiet park and then play hide and seek with friends. The place is big and we can hide in many corner. When my friends come close to me, I will be nervous and hold my breath. The most exciting moment is found by other persons.</p>
        </div>
    </div>
</body>

在这里插入图片描述
如想要监听导航栏的滚动方法，可以在body内加入data-spy=“scroll”，data-target=“导航栏包装id”，我在导航栏的包装上使用了id=“scroll-demo”

效果：

Tooltips工具提示方法

Tooltips可以在任何控件上显示提示信息
使用方法：在确定组件上设置data-toggle=“tooltip”，同时设置title=“显示内容”
再在JS文件中监听data-toggle并调用tooltip方法

 <button type="button" class="btn btn-primary" data-toggle="tooltip" title="hello" >Tooltip</button>

$('[data-toggle="tooltip"]').tooltip()

在这里插入图片描述