Boostrap学习笔记一: popover用法

最近在自学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。这个还需后续再研究。

Boostrap学习笔记一: popover用法相关推荐

Puppeteer 学习笔记及基本用法
Puppeteer 学习笔记及基本用法 Puppeteer 安装语法基本语法 API 分层结构加载导航页面等待元素.请求.响应自定义等待元素定位用户模拟操作请求拦截获取 WebSoc ...
情态动词学习笔记(4) 基本用法：建议和忠告
情态动词学习笔记(4) 基本用法:建议和忠告 could 表建议 it is a nice day. we could go for a walk. 今天天气不错,我们可以出去散步 shall用于第一 ...
socket编程学习笔记：部分函数用法以及accept函数问题
学习笔记:socket编程部分函数用法 socket()函数: bind()函数: listen()函数: accept()函数: connect()函数: socket()函数: socket函数对 ...
SQL学习笔记 where子句用法，like关键字嵌套查询
where子句比较运算符: < , <= , > , >= , = , != , !< , !> . text , ntext , image .型数据不可用. ...
学习笔记之awk用法
文本处理三剑客之awk 1. 首先简要总结一些文本处理三剑客: grep族:文本过滤工具 sed:行编辑工具 2. 下面就来看看awk是什么? awk现在linux上用的是GNU ...
学习笔记之sed用法
Sed命令用法 sed是文本三剑客之一 sed是什么? Sed:行编辑工具,处理一行文本.一次从文本中读取一行,将这一行放在自己的模式空间中,如果能被sed ...
java学习笔记(五)----super用法，final用法，抽象类，接口
子类不会继承父类的构造方法,在子类的构造方法中可使用super(参数列表)调用父类的构造方法. class Person { String name; int age; public Pers ...
lambda表达式浅析【C++学习笔记】
lambda表达式浅析[C++学习笔记] 基本用法: auto f = [/*捕获列表*/](/*参数*/)->int /*后置返回值类型*/{/** 函数体*/}; 捕获列表: [] : 不捕 ...
OpenCV 学习笔记03 boundingRect、minAreaRect、minEnclosingCircle、boxPoints、int0、circle、rectangle函数的用法...
函数中的代码是部分代码,详细代码在最后 1 cv2.boundingRect 作用:矩形边框(boundingRect),用于计算图像一系列点的外部矩形边界. cv2.boundingRect(arr ...

Boostrap学习笔记一: popover用法

Boostrap学习笔记一: popover用法相关推荐

最新文章

热门文章