最新的Web開發教程
 

W3.CSS警報


顯示警報

×

危險!

紅色常常表示危險或潛在的負面作用。

×

警告!

黃色和橙色往往預示著可能需要注意的警告。

×

成功!

綠色常表示成功或積極的行動。

×

信息!

藍經常表示中立的信息進行變更或執行。

一個警告框僅僅是一個帶有顏色的W3容器

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or potentially negative action.</p>
</div> 
試一試»

W3.CSS顏色

警報通常具有強烈色彩顯示,但可以使用任何顏色:

危險!

紅色常常表示危險或潛在的負面作用。

警告!

黃往往預示著可能需要注意的警告。

成功!

綠色通常表示一些成功還是積極的。


危險!

警告!

成功!


截止警報

要關閉這些容器,請點擊右上角的X:

×

危險!

紅色常常表示危險或潛在的負面作用。

×

警告!

黃往往預示著可能需要注意的警告。

×

成功!

綠色常表示成功或積極的行動。

關閉警報可以通過在W3,為closeBtn onclick事件來完成:

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
試一試»

圓角警報

如果你想圓角使用W3輪類:

W3輪

W3-圓大

W3-圓xxlarge

<div class="w3-container w3-green w3-round">
試一試»

警報作為卡

W3卡-8

<div class="w3-container w3-red w3-card-8">
試一試»