小程序分销设置_Bootstrap根本插件学习笔记之Pop

2021-01-12 16:42 jianzhan
Bootstrap基本插件学习笔记之Popover提示框(19)       这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之Popover提示框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Tooltip采用的是hover方式弹出提示框(参见前一篇:),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框。

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title Popover提示弹出框 /title 
 /head 
 body 
 div 
 div 
 h1 Popover提示弹出框 /h1 
 /div 
 div 
 button type="button" data-toggle="popover"
 data-placement="left" title="popover left" data-content="测试" 左边的按钮 /button 
 button type="button" data-toggle="popover"
 data-placement="right" title="popover right" data-content="测试" 左边的按钮 /button 
 button type="button" data-toggle="popover"
 data-placement="top" title="popover top" data-content="测试" 左边的按钮 /button 
 button type="button" data-toggle="popover"
 data-placement="bottom" title="popover bottom" data-content="测试" 左边的按钮 /button 
 /div 
 /div 
 script 
 $(function () {
 $("[data-toggle='popover']").popover();
 /script 
 /body 
 /html 

效果如下:

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。