VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 提醒框

Foundation 可以很简单的创建一个提醒框:

提醒框可以使用 .alert-box 类创建, 可以添加可选的类: .secondary.success.info.warning 或 .alert:

实例


	
  1.  <div data-alert class="alert-box">
  2.   This is a default alert box.
  3. </div>
  4.  
  5. <div data-alert class="alert-box secondary">
  6.   This is a secondary alert box.
  7. </div>
  8.  
  9. <div data-alert class="alert-box success">
  10.   <strong>Success!</strong> This alert box indicates a successful or positive action.
  11. </div>
  12.  
  13. <div data-alert class="alert-box info">
  14.   <strong>Info!</strong> This alert box indicates a neutral informative change or action.
  15. </div>
  16.  
  17. <div data-alert class="alert-box warning">
  18.   <strong>Warning!</strong> This alert box indicates a warning that might need attention.
  19. </div>
  20.  
  21. <div data-alert class="alert-box alert">
  22.   <strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
  23. </div>
复制
实例预览 »
提醒框的宽度为容器的 100%。

圆角提醒框

.radius 和 .round 类用于为提醒框添加圆角:

实例


	
  1. <div data-alert class="alert-box success radius">
  2.   <strong>Success!</strong> Alert box with a radius. 
  3. </div>
  4.  
  5. <div data-alert class="alert-box info round">
  6.   <strong>Info!</strong> Alert box that is rounded.
  7. </div>
复制
实例预览 »

关闭提醒框

要关闭提醒框,可以在连接或按钮元素上添加 class="close" 类,并初始化 Foundation JS:

实例


	
  1. <div data-alert class="alert-box">
  2.   This is a default alert box with closing functionality.
  3.   <a href="#" class="close">&times;</a>
  4. </div>
  5.  
  6. <script>
  7. // Initialize Foundation JS For Functionality
  8. $(document).ready(function() {
  9.     $(document).foundation();
  10. })
  11. </script>
复制
实例预览 »
&times; (×) 是一个 HTML 字符实体表示一个关闭按钮的图标,而不是字母  "x"。 


相关教程