Foundation5(九)
来源:互联网 发布:seo管家 编辑:程序博客网 时间:2024/04/30 09:41
Foundation 提醒框
Foundation 可以很简单的创建一个提醒框:
提醒框可以使用 .alert-box
类创建, 可以添加可选的类: .secondary
, .success
, .info
, .warning
或 .alert
:
实例
<div data-alert class="alert-box">
This is a default alert box.
</div>
<div data-alert class="alert-box secondary">
This is a secondary alert box.
</div>
<div data-alert class="alert-box success">
<strong>Success!</strong> This alert box indicates a successful or positive action.
</div>
<div data-alert class="alert-box info">
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div data-alert class="alert-box warning">
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div data-alert class="alert-box alert">
<strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
</div>
This is a default alert box.
</div>
<div data-alert class="alert-box secondary">
This is a secondary alert box.
</div>
<div data-alert class="alert-box success">
<strong>Success!</strong> This alert box indicates a successful or positive action.
</div>
<div data-alert class="alert-box info">
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div data-alert class="alert-box warning">
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div data-alert class="alert-box alert">
<strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
</div>
尝试一下 »
圆角提醒框
.radius
和 .round
类用于为提醒框添加圆角:
实例
<div data-alert class="alert-box success radius">
<strong>Success!</strong> Alert box with a radius.
</div>
<div data-alert class="alert-box info round">
<strong>Info!</strong> Alert box that is rounded.
</div>
<strong>Success!</strong> Alert box with a radius.
</div>
<div data-alert class="alert-box info round">
<strong>Info!</strong> Alert box that is rounded.
</div>
尝试一下 »
关闭提醒框
要关闭提醒框,可以在连接或按钮元素上添加 class="close"
类,并初始化 Foundation JS:
实例
<div data-alert class="alert-box">
This is a default alert box with closing functionality.
<a href="#" class="close">×</a>
</div>
<script>
// Initialize Foundation JS For Functionality
$(document).ready(function() {
$(document).foundation();
})
</script>
This is a default alert box with closing functionality.
<a href="#" class="close">×</a>
</div>
<script>
// Initialize Foundation JS For Functionality
$(document).ready(function() {
$(document).foundation();
})
</script>
尝试一下 »
阅读全文
0 0
- Foundation5(九)
- Foundation5(一)
- Foundation5(二)
- Foundation5(三)
- Foundation5(四)
- Foundation5(五)
- Foundation5(六)
- Foundation5(七)
- Foundation5(八)
- Foundation5(十)
- Foundation5(十一)
- Foundation5(十二)
- Foundation5(十三)
- Foundation5(十四)
- Foundation5(十五)
- Foundation5(十六)
- Foundation5(十七)
- Foundation5(十八)
- 2017年湖湘杯复赛 pwn100-writeup
- yarn作业调度过程
- 习题8-2 聚会游戏(Party Games, Mid-Atlantic 2012, UVa1610)
- 1:基于深度学习的目标检测技术:RCNN、Fast R-CNN、Faster R-CNN
- 目标追踪——相关滤波追踪论文翻译:Visual Object Tracking using Adaptive Correlation Filters
- Foundation5(九)
- Struts2中获取|session|application|request|对象(七)
- 关于STM32F103x系列ISP烧写出现“程序文件不是0x8000000和0x20000000区域的”解决办法。
- Nodejs-8.9.3 压缩包版本安装配置
- Hive
- 领域驱动设计part3
- 线性代数 04.03 线性相关性的判定
- Java class文件中 StackMapTable Attribute如何解析?
- Foundation5(十)