3-15 弹出框--自定义结构属性
本节编程练习不计算学习进度,请电脑登录imooc.com操作

弹出框--自定义结构属性

同样在弹出框制作时,可以在HTML中定义下表所列的自定义属性:

举例:

 <button type="button"
          class="btn btn-default"
          data-toggle="popover"
          data-placement="bottom"
          title="提示框居左"
          data-content="我是弹出框的内容"
          data-trigger="hover"
          data-dalay="600">
          猛击我吧
  </button>

任务

我来试试:亲们,来右侧代码编辑器亲自试试本小节表中的参数吧!
 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>自定义结构属性</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>
  8. body{
  9. padding: 10px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <button type="button"
  15. class="btn btn-default"
  16. data-toggle="popover"
  17. title="提示框居左"
  18. data-content="我是弹出框的内容">
  19. 猛击我吧
  20. </button>
  21.  
  22. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  23. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  24. <script>
  25. $(function(){
  26. $('[data-toggle="popover"]').popover();
  27. });
  28. </script>
  29.  
  30. </body>
  31. </html>
下一节