Bootstrap data-toggle data-target modal实现弹窗可用于编辑,添加数据用,popover实现告警信息或者按钮事件后状态的提示,tooltips提示

前提是要引入bootstrap.min.js
1.先定义一个按钮  data-toggle:以什么事件触发,如modal,popover,tooltips等; data-target:事件的目标;
<button type="button" data-toggle="modal" data-target="#modal">
<i class="fa fa-user-plus m-r-sm text-md"></i>添加 </button>

2.定义事件的目标 即data-target的属性值 这个是#modal 那就是id="modal"的元素

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  .......内容
</div>

data-toggle="modal"的弹框效果

 

data-toggle="popover"通常应用点击事件后,好比请求后返回的状态在该点击事件冒泡显示其状态是否成功的提示,具体参考如下连接----菜鸟教程php

http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-popoverbootstrap

data-toggle="tooltips" 是鼠标悬停在对应目标上能够作提示   这样咱们能够对页面显示文字当鼠标悬停在上面时作详细的解释。spa

例子:   http://www.runoob.com/try/try2.php?filename=bootstrap3-plugin-tooltipblog

 

相关文章
相关标签/搜索