Skip to main content

警告框(Alert)

颜色#

Primary#


<div class="alert alert--primary" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is a <strong>primary</strong> alert. You should probably pay attention to  it.</div>

Secondary#


<div class="alert alert--secondary" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is a <strong>secondary</strong> alert. It&#x27;s not too important, you  may ignore it.</div>

Success#


<div class="alert alert--success" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is a <strong>success</strong> alert. Something good must have happened!</div>

Info#


<div class="alert alert--info" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is an <strong>info</strong> alert. For your information only.</div>

Warning#


<div class="alert alert--warning" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is a <strong>warning</strong> alert. Be warned, you should pay attention!</div>

Danger#


<div class="alert alert--danger" role="alert">  <button aria-label="Close" class="clean-btn close" type="button">    <span aria-hidden="true">×</span>  </button>  This is a <strong>danger</strong> alert. Something has gone wrong, please  investigate!</div>