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 >
嘗試一下»
 | 提醒框的寬度為容器的100%。 |
|---|
圓角提醒框
.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 >
嘗試一下»
| × (×) 是一個HTML 字符實體表示一個關閉按鈕的圖標，而不是字母"x"。 |
|---|