W3.CSS 警告框
w3-panel 類是顯示所有型別警告框的完美類。
危險!
紅色通常表示危險或負面情況。
警告框通常使用醒目的顏色顯示。
危險!
紅色通常表示危險或負面情況。
顯示警告
警告!
黃色通常表示需要注意的警告。
警告!
黃色通常表示需要注意的警告。
顯示成功
成功!
綠色通常表示成功或積極的事物。
成功!
綠色通常表示成功或積極的事物。
顯示資訊
資訊!
藍色通常表示中性的資訊性更改或操作。
資訊!
藍色通常表示中性的資訊性更改或操作。
使用容器
w3-container 類也可以用來顯示警告框。
所有顏色的警告框
警告框通常以特殊顏色顯示,但任何顏色都可以使用。
危險!
紅色通常表示危險或負面情況。
危險!
紅色通常表示危險或負面情況。
危險!
紅色通常表示危險或負面情況。
危險!
紅色通常表示危險或負面情況。
危險!
紅色通常表示危險或負面情況。
關閉警報
要關閉警告框,請點選右上角的 X。
危險!
紅色通常表示危險或負面情況。
要建立關閉警告框的 X,請新增一個帶有 w3-button 類和 onclick 事件的 <span> 元素。
示例
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">×</span>
自己試試 »
提示: HTML 實體 × 是關閉按鈕的首選圖示(而不是字母“X”)。
圓角警告框
如果您想要圓角,請使用 w3-round 類。
成功!
這裡使用了 w3-round。
成功!
這裡使用了 w3-round-large。
成功!
這裡使用了 w3-round-xxlarge。
作為卡片的警告框
如果您想讓警告框顯示為卡片,請使用 w3-card 類。
警告!
黃色通常表示需要注意的事情。