Alert 提示

文字提示

使用ax-alert类表示提示,默认颜色是黄色(warning)。

这是一个告示。
提醒注意。
                              <div class="ax-alert">这是一个告示。<br />提醒注意。</div>
                         

颜色

本框架一共定义了7种颜色提示,分别是ax-primaryax-secondaryax-successax-dangerax-warning(默认),ax-infoax-light。详细说明和举例如下:

主色。
与系统颜色保持一致。
次要色
操作成功!
很危险!
提示注意!
这是一个广告!
名词解释
浅灰色文字提示
                                <div class="ax-alert ax-primary">主色。<br />与系统颜色保持一致。</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-secondary">次要色</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-success">操作成功!</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-danger">很危险!</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-warning">提示注意!</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-ad">这是一个广告!</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-info">名词解释</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-light">浅灰色文字提示</div>
                         

无边框

提示默认带有边框,使用ax-borderless可取消边框。

主色。
与系统颜色保持一致。
次要色
                                <div class="ax-alert ax-primary ax-borderless">主色。<br />与系统颜色保持一致。</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-secondary ax-borderless">次要色</div>
                         

方边

提示默认带有3px的圆角,使用ax-square可取消圆角。

主色。
与系统颜色保持一致。
次要色
                                <div class="ax-alert ax-primary ax-square">主色。<br />与系统颜色保持一致。</div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-secondary ax-square">次要色</div>
                         

使用关闭按钮 JS

ax-alert中加入ax-close的类标签即可。点击可关闭该提示。

主色。
与系统颜色保持一致。
次要色
操作成功!
很危险!
提示注意!
这是一个广告!
名词解释
浅灰色文字提示
                                <div class="ax-alert ax-primary">主色。<br />与系统颜色保持一致。<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-secondary">次要色<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-success">操作成功!<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-danger">很危险!<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-warning">提示注意!<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-ad">这是一个广告!<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-info">名词解释<a href="###" class="ax-close"></a></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-light">浅灰色文字提示<a href="###" class="ax-close"></a></div>
                         

使用标题+简介

使用ax-titleax-des即可,注意查看html结构。

原始社会
中国的原始社会,起自大约170万年前的元谋人
奴隶社会
公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。
                                 <div class="ax-alert ax-primary">
                                    <div class="ax-title">原始社会</div>
                                    <div class="ax-des">中国的原始社会,起自大约170万年前的元谋人</div>
                                </div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-secondary">
                                    <div class="ax-title">奴隶社会</div>
                                    <div class="ax-des">公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。</div>
                                </div>
                         

使用小图标

对ax-alert追加ax-sm类即可,注意查看html结构。

原始社会
中国的原始社会,起自大约170万年前的元谋人
奴隶社会
公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。
                                <div class="ax-alert ax-danger ax-sm">
                                        <i class="ax-iconfont ax-icon-close-o-f"></i>
                                        <div class="ax-text">
                                            <div class="ax-title">原始社会</div>
                                            <div class="ax-des">中国的原始社会,起自大约170万年前的元谋人</div>
                                        </div>
                                </div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-warning ax-sm">
                                        <i class="ax-iconfont ax-icon-warning-o-f"></i>
                                        <div class="ax-text">
                                            <div class="ax-title">奴隶社会</div>
                                            <div class="ax-des">公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。</div>
                                        </div>
                                </div>
                         

使用大图标

对ax-alert追加ax-lg类即可,注意查看html结构。

原始社会
中国的原始社会,起自大约170万年前的元谋人
奴隶社会
公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。
                                 <div class="ax-alert ax-success ax-lg">
                                        <i class="ax-iconfont ax-icon-check-o-f"></i>
                                        <div class="ax-text">
                                            <div class="ax-title">原始社会</div>
                                            <div class="ax-des">中国的原始社会,起自大约170万年前的元谋人</div>
                                        </div>
                                </div>
                                <div class="ax-break-md"></div>
                                <div class="ax-alert ax-ad ax-lg">
                                        <i class="ax-iconfont ax-icon-question-o-f"></i>
                                        <div class="ax-text">
                                            <div class="ax-title">奴隶社会</div>
                                            <div class="ax-des">公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。</div>
                                        </div>
                                </div>