更改BootStrap popover的默认样式及popover简单用法


Posted in Javascript onSeptember 13, 2018

下面通过一段代码给大家介绍更改BootStrap popover的默认样式,具体代码如下所述:

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

BootStrap popover弹出框默认样式,需修改弹出框样式可在CSS中自定义要修改的样式,例如:padding改为6px,背景颜色修改为黑色,字体颜色修改为白色

.popover{
   padding:6px;
  background-color:#000;
   color:#fff;
}

补充:下面看下bootstrap popover简单用法

//添加

$('#freqsComboCheckbox').addClass('has-popover').attr('data-content', "Please Select Frequency!")
            .popover({
               placement: 'bottom',
               container: '.areaBox',//将popover附加到特定的元素上
              trigger: 'manual' //manual触发方式
            }).popover('show');

//移除

$(".has-popover").not($('#freqsComboCheckbox')).removeClass('has-popover').popover('destroy');

总结

以上所述是小编给大家介绍的更改BootStrap popover的默认样式及popover简单用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
node.js 动态执行脚本
Jun 02 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
JSONP原理及应用实例详解
Sep 13 #Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 #Javascript
javascript将非数值转换为数值
Sep 13 #Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 #Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 #Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 #Javascript
详解react内联样式使用webpack将px转rem
Sep 13 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python使用super()出现错误解决办法
2017/08/14 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
汉语言文学职业规划
2014/02/14 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
单位介绍信格式
2015/01/31 职场文书
三八妇女节寄语
2015/02/27 职场文书
拖欠货款起诉状
2015/05/20 职场文书
会议主持词通用版
2019/04/02 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL