Boostrap学习笔记一: popover用法

最新推荐文章于 2025-03-07 13:46:36 发布

cywalker

最新推荐文章于 2025-03-07 13:46:36 发布

阅读量1.3k

点赞数

分类专栏： Boostrap 文章标签： Boostrap Popover

本文链接：https://blog.youkuaiyun.com/cy_walker/article/details/53791744

版权

Boostrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在自学javaweb过程中，使用Bootstrap的Popover插件进行前端交互开发的经验。重点讲解了如何通过Popover插件实现注册界面的实时校验提示，并分享了一些使用技巧。

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

最近在自学java web基础，搭建自己的页面时候用到了Boostrap的JS库。由于之前没有接触过JQuery，所以用起来磕磕绊绊，所以在这里简单记一下Boostrap中我用到的JS 插件的一些用法。
第一个用到的就是Boostrap中的popover插件。原因是一个简单的注册界面需要验证用户名是否合法，是否已被注册，密码是否合法，再次输入密码是否和之前的密码匹配等，需要用到popover来进行信息警告。
首先一个简单的例子:

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" id="button1" class="btn btn-default" 
            data-container="body" data-toggle="popover">
        左侧的 Popover
    </button> 
</div>

<script>
$(function (){
    $('#button1').popover({
        trigger: 'click',
        title: "test1",
        placement: 'right',
        content: 'hello'
    });
});
</script>

可以看到，在使用API进行popover编程时，一定要引用$(‘#element’).popover()对id=”element”的控件进行popover激活。之前就是直接复制官网上的代码，发现点击后并不能trigger，一直很困惑。然后用name=”element”是不能激活popover的。
要是需要为input框添加popover效果，则只需要trigger=’focus’即可。但似乎不支持blur，不能在blur之后判断input框中的内容是否合法从而触发popover。这个还需后续再研究。