要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件:

jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

bootstrap-tooltip.js

bootstrap-popover.js

bootstrap.css

我试过不引入bootstrap-tooltip.js和bootstrap-popover.js这两个js文件.但是效果不是很好.当鼠标移入进去的时候不能即时的弹出提示层(而是必须点击按钮才行).这显然不是我们要的效果.

以下是我做的实例代码:

<!DOCTYPE html>

<html lang="en">

<meta charset="utf-8">

<head>

    <title>bootstrap弹出框</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

    <script  src="bootstrap/js/jquery.1.9.1.js"></script>

    <script  src="bootstrap/js/bootstrap-tooltip.js"></script>

    <script  src="bootstrap/js/bootstrap-popover.js"></script>

</head>    

<body>

    <div class="container">

    <h2>

        我是弹出框的实例

    </h2>

    <div class="well">

        <a href="#" id="example" class="btn btn-danger"

         rel="popover" data-content="我是弹出框显示内容" data-original-title="我是标题">点我,我是弹出框</a>

    </div>

    </div>

</body>

<script type="text/javascript">

$(function ()

{ $("#example").popover();

});

</script>

</html>

值得注意的是下面这段js代码是我们必须要引入的(id可以换成自己起的):

<script type="text/javascript">

$(function ()

{ $("#example").popover();

});

</script>

在测试过程中也遇到了一些问题.比如弹出层的样式不是自己想要的效果:

这显然不是我们想要的结果,我们要的效果"我是弹出框显示内容"应该要比标题小的.于是我先看了下bootstrap-popover.js文件,发现这部分代码用的样式是.popover-content.于是我又去bootstrap.css中查找该class

.popover-content {

  padding: 9px 14px;

//这里是我修改过的 如果修改默认的尺寸为14

  font-size: 10px;

}

修改后的效果如图:

这样弹出框的实例就完成了.希望对大家有帮助.

bootstrap弹出框的更多相关文章

  1. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  2. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  3. 第二百四十六节，Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  4. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  5. bootstrap弹出框提示框无法调用

    使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...

  6. bootstrap 弹出框 另类运用

    下面是我在做一个简单登录页面时,应用boostrap弹出框,通过调节做成警示框的过程,前后经过了一番波折.因为摸索过程十分有趣,最后也是成功的,使用弹出框做除了警示框的效果,下面我们来看一下吧. 首先 ...

  7. Bootstrap 弹出框和警告框插件

    一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...

  8. bootstrap 弹出框（Popover）插件 修改title等属性选项值

    <button type="button" class="btn btn-default ht-btn" data-toggle="popove ...

  9. bootstrap弹出框居中

    1.html页面(如果效果出不来,注意修改单引号) <!DOCTYPE html> <html lang="zh-CN"> <head> < ...

随机推荐

  1. 编写可维护的Javascript读书笔记

    写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了 ...

  2. Linux经常使用的命令（必看）

    http://www.importnew.com/12425.html     http://www.importnew.com/13107.html http://www.importnew.com ...

  3. 微信JS-SDK“分享信息设置”API及数字签名生成方法（NodeJS版本）

    原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...

  4. 持续集成并不能消除 Bug，而是让它们非常容易发现和改正（转）

    互联网软件的开发和发布,已经形成了一套标准流程,最重要的组成部分就是持续集成(Continuous integration,简称 CI). 本文简要介绍持续集成的概念和做法. 一.概念 持续集成指的是 ...

  5. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  6. 解决Unity3d 4.3 动画系统带来的烦恼

    近期有非常多同学问我关于unity3d 4.3更新之后动画系统和曾经不一样了,并且之前用的非常熟练的创建动画和修修改画非常多操作都不好用了,那么在这里和大家分享一下三杀的个人经验,方便大家使用unit ...

  7. crawler_URL编码原理详解

    经常写爬虫的童鞋,难免要处理含有中文的url,大部分时间,都知道url_encode,各个语言也都有支持,今天简单整理下原理,供大家科普 1.特征: 如果URL中含有非ASCII字符的话, 浏览器会对 ...

  8. 冒泡排序与简单选择排序——Java实现

    1.冒泡排序 1)原理说明:反复遍历要排序的数列,一次比較两个元素,假设他们的顺序错误就把他们交换过来.走訪数列的工作是反复地进行直到没有再须要交换,也就是说该数列已经排序完毕. 2)代码实现: pa ...

  9. SVN提交忽略*.class、.classpath、.mymetadata、.project、.settings、.myeclipse和其他非版本控制文件

    1.忽略*.class 在TortoiseSVN -->setting(设定)--规设置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVrZTY ...

  10. s3c2440 的 rtc 操作

    实时时钟(RTC)其主要功能是电源故障的制度下,使用后备电源,时钟继续.为了不浪费时间信息. s3c2440内部集成了RTC模块,并且用起来也十分简单. 其内部的寄存器BCDSEC,BCDMIN,BC ...