简单回忆一下,在制作提示框(tooltip)时,可以使用<button>或者<a>标签元素,而且通过 data- 属性来声明提示框的信息,如下所示:
<button type="button"
class="btnbtn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="我是一个提示框tooltip">
鼠标移上来
</button>
而弹出框Popover和提示框tooltip相比,就多了一个content内容,那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作,如下:
<button type="button"
class="btnbtn-default"
data-container="body"
data-placement="bottom"
data-toggle="popover"
data-original-title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容" >
猛击我吧
</button>
<a href="#" class="btnbtn-default"
data-container="body"
data-placement="right"
data-toggle="popover"
title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容">
猛击我吧
</a>
运行效果如下:

正如上图所示,弹出框的制作结构和提示框并无太多差别,但样式风格上还是有蛮大的区别。其主要定义了弹出框边框、圆角、背景、阴影以及三角形等样式:具体代码见右侧的bootstrap.css。
请验证,完成请求
由于请求次数过多,请先验证,完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报