3-10 提示框--其他的自定义属性
本节编程练习不计算学习进度,请电脑登录imooc.com操作

提示框--其他的自定义属性

除此之外,提示框还有其他的自定义属性,每个自定义属性都具自身存在的意义,如下表所示:

(单击可放大)

上面的都是有关于提示框的结构,在样式上也是非常的简单:具体代码见右侧的 bootstrap.css。

任务

我来试试:使用本小节所讲解内容制作一个“延时500毫秒出现提示框”的提示框

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JS Bin</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7.  
  8. <style id="jsbin-css">
  9. body {
  10. padding: 100px;
  11. }
  12. .btn {
  13. margin: 20px 10px 20px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h4>data-animation="true"</h4>
  19. <button type="button"
  20. class="btn btn-default"
  21. data-toggle="tooltip"
  22. data-placement="left"
  23. data-original-title="data-animation='true'"
  24. data-animation
  25. data-animation="true">data-animation="true"</button>
  26.  
  27. <h4>data-html="true"</h4>
  28. <button type="button"
  29. class="btn btn-default"
  30. data-toggle="tooltip"
  31. data-placement="top"
  32. data-original-title="<h1>data-html='true'</h1>"
  33. data-html="true">data-html="true"</button>
  34.  
  35. <h4>data-trigger="click"</h4>
  36. <button type="button"
  37. class="btn btn-default"
  38. data-toggle="tooltip"
  39. data-placement="bottom"
  40. data-original-title="data-trigger='click'"
  41. data-trigger="click">data-trigger="click"</button>
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  50. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  51. <script>
  52. $(function(){
  53. $('[data-toggle="tooltip"]').tooltip();
  54.  
  55. });
  56. </script>
  57.  
  58. </body>
  59.  
  60.  
  61. </html>
下一节