Foundation 提醒框

Foundation 可以很簡單的創(chuàng)建一個(gè)提醒框：

提醒框可以使用 .alert-box 類創(chuàng)建, 可以添加可選的類： .secondary, .success, .info, .warning 或 .alert:

實(shí)例

<
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
>

嘗試一下 ?

	提醒框的寬度為容器的 100%。

---

圓角提醒框

.radius 和 .round 類用于為提醒框添加圓角：

實(shí)例

<
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
>

嘗試一下 ?

---

關(guān)閉提醒框

要關(guān)閉提醒框，可以在連接或按鈕元素上添加 class="close" 類，并初始化 Foundation JS:

實(shí)例

<
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
>

嘗試一下 ?

	× (×) 是一個(gè) HTML 字符實(shí)體表示一個(gè)關(guān)閉按鈕的圖標(biāo)，而不是字母 "x"。

文章名稱：創(chuàng)新互聯(lián)Foundation教程：Foundation提醒框
文章源于：http://m.5511xx.com/article/dhjcied.html