五、提示框组件
注意：
1：使用data-toggle="tooltip"
2：data-placement表示提示框的方向，共有四个方向，left,right,bottom,top
3：data-animation是将其动画效果设为false,即鼠标移过去后，由原来的渐入渐出变为瞬间出现，没有缓冲效果。
<div> <p> <!-- 缓和 --> this is a test title,<a href="#" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="cnblog.com/jtjds" data-animation="false">click me,remember </p> </div> <!-- <script src="https://www.jb51.net/js/jquery-1.11.3.min.js"></script> 本地的加载文件--> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript"> $('[data-toggle="tooltip"]').tooltip();//初始化 $('#clickEvent').tooltip('show') //打开就直接显示 $('#clickEvent').on('shown.bs.tooltip', function () { alert("2222"); //事件处理，显示后将弹出此项 }) </script>
六、弹出框组件
注意：
1：弹出框即为任意元素添加一小块悬浮层，存放非主要信息。
2：当内容长度为0时，不显示弹出框。使用data-toggle="popover"
3：依赖于提示框插件，且需手动初始化（见javascript里的初始化）
看下下面这段代码，不再截图：
复制代码 代码如下:
<!-- 点击按钮实现弹出，再点击按钮实现隐藏-->
<button type="button" data-toggle="popover" title="标题" data-content="and here is some amazing content,it's very engaging,right?">点我弹出/隐藏弹出框</button>
点击button时，出现，再点击button，消失，如果想在空白处点击便可将其隐藏怎么办？
添加data-trigger="focus"即可，隐藏焦点，trigger表示触发的意思。
复制代码 代码如下:
<!-- 点击按钮弹出，点击任一点空白处隐藏 ，最好使用a标签，当然你也可以使用button-->
<a tabindex="0" role="button" data-toggle="popover"
data-trigger="focus" title="Dismissible popover" data-content="and this is a beautiful content">点我可消失</a>
七、警告框组件
注意：
1：使用data-dismiss="alert"
2：次插件可为警告信息添加点击并消失的功能
3：使用关闭按钮时，即close类时，它必须是alert的第一个子元素，且在它之前不许出现文本。
我们来看下代码：
<!-- 警告框 --> <div> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>欢迎你</span> <button type="button">详情</button> </div> <div> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>欢迎你</span> <button type="button">详情</button> </div>
如果在javascript中存在多个警告框，并且你想将某个警告框关闭时，在javascript里添加下面代码即可，如下：