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

下面通过一段代码给大家介绍更改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简单用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap的popover（弹出框）2秒后定时消失的实现代码

    Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的.它可以用来显示任何元素的一些信息. 先在目标DOM结构中弹出小提示,然后2秒后提示消失 <input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement=&q

  • BootStrap使用popover插件实现鼠标经过显示并保持显示框

    BootStrap使用popover插件实现鼠标经过显示并保持显示框

    在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas

  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • Bootstrap popover用法详解

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

  • 全面解析Bootstrap中tooltip、popover的使用方法

    全面解析Bootstrap中tooltip、popover的使用方法

    一.tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理:  1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值  源码分析:  1.ownerDocument:文档:包含两个对象:<DocType>.documentEle

  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /

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

    下面通过一段代码给大家介绍更改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: n

  • Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大.尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方. 后来无意中发现页面上引入了Bootstrap,而Bootstrap默认将box-sizing样式统一设成border-box了.具体内容

  • Android更改EditText下划线颜色样式的方法

    Android更改EditText下划线颜色样式的方法

    前言 相信大家都知道,当使用AppCompatEditText(Edit Text)时,默认的下划线是跟随系统的#FF4081的颜色值的,通过改变这个值可以改变所有的颜色样式 有时候你想单独定义某一个界面的颜色样式,则可以这样做: 1.在你的build.gradle中添加最新的appcompat库 dependencies { compile 'com.android.support:appcompat-v7:X.X.X' // X.X.X 为最新的版本号 } 2.让你的activity继承an

  • Bootstrap风格的WPF样式

    Bootstrap风格的WPF样式

    简介 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css WPF样式和CSS还是不太相同,所以有些内容实现上稍有出入,有些内容用法不太一样,有些内容并没有实现 但至少,一些概念,尺寸和取色,还是很好的借鉴 博客说明按Bootstrap官方文档的顺序来写 App.xaml里引用Bootstrap.xaml资源 <Application.Resources> <ResourceDictionar

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 快速修改antd vue单个组件的默认样式

    快速修改antd vue单个组件的默认样式

    目录 一.想要修改组件的默认样式 二.类名scoped的限制 你是否会有这样的疑惑 三.使用/deep/. >>>时 Ant Design Vue地址:https://www.antdv.com/docs/vue/introduce-cn/ 刚接触Ant Design Vue的童鞋们可能会有这样的问题,不就是修改默认的组件样式吗,为什么一会生效,一会又不生效.希望看完这个文章,会给你一些收获~ 一.想要修改组件的默认样式 首先你需要知道组件是渲染在哪里的 这个组件是渲染在当前页面内部,还

  • Bootstrap表单布局样式源代码

    Bootstrap表单布局样式源代码

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control 内联表单: 内联表单中所有元素都向左对

  • Bootstrap表单布局样式代码

    Bootstrap表单布局样式代码

    废话不多说了,直接给大家贴代码了. <form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host"&

  • 重置默认样式 css reset第1/2页

    重置默认样式 css reset第1/2页

    我在HTML下的默认样式中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset).每个人的用法和写法都不一样.找到一篇关于css reset的调查文章, 可以看看国外使用css reset的比例调查.这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看. 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css rese

  • chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

    chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

    一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性 input:-webkit-autofill, textarea:-web

随机推荐