分享

警告框

 I_T_馆 2014-04-17
     ******************警告框*************************
      *
      *为典型的用户动作提供少数可用且灵活的反馈消息。要用关
      *闭功能,请使用jQuery警告框插件.
      *使用警告框的类样式alert
      *bootstrap提供四种有意义的警告框。分别是:成功,消息,警告或危险
      *其类样式分别是:alert-success,alert-info,alert-warning
      *alert-danger
      *
      *可关闭的警告框,实现方案:用一个可选的.alert-dismissable和关闭按钮
      *注意:一定要给data-dismiss="alert"属性用上<button>。
      *
      *警告框中的链接,样式为:class="alert-link"
      *
      *************************************************


 效果图:
 
源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">                                                                                                                         
<html lang="en">                                                                                                                                                                        
  <head>                                                                                                                                                                                
    <meta charset="utf-8">                                                                                                                                                              
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                                                                                                               
    <meta http-equiv="X-UA-Compatible" content="IE=edge">                                                                                                                               
    <meta name="viewport" content="width=device-width, initial-scale=1.0">                                                                                                              
    <meta name="description" content="">                                                                                                                                                
    <meta name="author" content="">                                                                                                                                                     
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">                                                                                                                 
                                                                                                                                                                                        
    <title>Navbar Template for Bootstrap</title>                                                                                                                                        
                                                                                                                                                                                        
    <link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"></link>                                                                                                   
  <link rel="stylesheet" href="../../js/bootstrap-theme.min.css" type="text/css"></link><body>                                                                                          
    <style>                                                                                                                                                                             
    body{padding-top:70px;}                                                                                                                                                         
    </style>                                                                                                                                                                            
                                                                                                                                                                                        
  <!--                                                                                                                                                                                  
  ******************警告框*************************                                                                                                                                 
      *                                                                                                                                                                              
      *为典型的用户动作提供少数可用且灵活的反馈消息。要用关                                                                                                                                                    
      *闭功能,请使用jQuery警告框插件.                                                                                                                                                           
      *使用警告框的类样式alert                                                                                                                                                                
      *bootstrap提供四种有意义的警告框。分别是:成功,消息,警告或危险                                                                                                                                          
      *其类样式分别是:alert-success,alert-info,alert-warning                                                                                                                                
      *alert-danger                                                                                                                                                                  
      *                                                                                                                                                                              
      *可关闭的警告框,实现方案:用一个可选的.alert-dismissable和关闭按钮                                                                                                                                    
      *注意:一定要给data-dismiss="alert"属性用上<button>。                                                                                                                                      
      *                                                                                                                                                                              
      *警告框中的链接,样式为:class="alert-link"                                                                                                                                                
      *                                                                                                                                                                              
      *************************************************                                                                                                                              
  -->                                                                                                                                                                                   
 <div class="container">                                                                                                                                                                
  <div class="alert alert-success">You successfully read<a href="#" class="alert-link"> this important alert message.</a></div>                                                       
<div class="alert alert-info">...</div>                                                                                                                                                 
<div class="alert alert-warning alert-dismissable">                                                                                                                                     
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>                                                                                          
  <strong>Warning!</strong> Best check yo self, you're not looking too good.                                                                                                            
<div class="alert alert-danger">...</div>                                                                                                                                               
</div>                                                                                                                                                                                  
  </body>                                                                                                                                                                               
  <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script>                                                                                                           
  <script type="text/javascript" src="../../js/bootstrap.min.js"></script>                                                                                                              
</html>                                                                                                                                                                                 
                                                                                                                                                                                        

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约