4-2 警告框--结构与样式
本节编程练习不计算学习进度,请电脑登录imooc.com操作

警告框--结构与样式

在介绍警告框结构之前,我们先来看看警告框插件的效果与警告框的效果在样式风格展示上有何不同:

上图是“警示框”效果。

上图“警告框插件”效果。

相比之下,唯一不同的区别正如前面开头所言,警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮,外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可:

<div class="alert " role="alert">
    <buttonclass="close" type="button" >&times;</button>
    恭喜您操作成功!
</div>

除此差别之外,警告框插件与警示框没有其他的区别。所以样式部分,在此不做过多阐述,大家可以回头看看第3章中有关于警示框的内容。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>警告框--结构与样式</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h3>示例</h3>
  10. <div class="alert alert-success" role="alert">
  11. <button class="close" data-dismiss="alert" type="button" >&times;</button>
  12. <p>恭喜您操作成功!</p>
  13. </div>
  14.  
  15. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  16. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  17. </body>
  18. </html>
下一节