更改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 相关文章推荐
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
webpack入门必知必会
Jan 16 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
smarty缓存用法分析
2014/12/16 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
js自带函数备忘 数组
2006/12/29 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python使用PyQt5的简单方法
2019/02/27 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python 常见的反爬虫策略
2020/09/27 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
自荐信包含哪些内容
2013/10/30 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
就业协议书
2014/09/12 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2015年宣传工作总结
2015/04/08 职场文书
地球上的星星观后感
2015/06/02 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL