Box 盒子
使用方法
使用ax-box表示使用盒子，盒子既可以当做panel面板使用也可以当做widget挂件使用。通过追加ax-border类给盒子添加边框；通过追加ax-radius类给盒子添加圆角；通过追加ax-shadow类给盒子添加阴影。ax-box-header表示盒子的抬头，盒子的组合方式较多，可参见演示效果。
<div class="ax-box">
<div class="ax-box-header">盒子头部</div>
<div class="ax-box-body">盒子内容</div>
<div class="ax-box-footer">盒子尾部</div>
</div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header">关于中国(简单结构)</div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
基本变化
可以借助Layout弹性布局对盒子标题结构做基本的变化，
伟大的中国(辅助标题)
The Great China
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
伟大的中国
The Great China
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
伟大的中国
The Great China
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">(辅助标题)</span></div></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-row"><div class="ax-col"><span class="ax-title">关于中国(自适应布局)</span></div><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-close"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-edit"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont
ax-icon-up"></i></a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-row"><i class="ax-adorn ax-iconfont ax-icon-star"></i><div class="ax-col"><span class="ax-title">关于中国(带更多)</span></div><a href="###" class="ax-operate">查看更多<i class="ax-iconfont ax-icon-right"></i></a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
组合tab
盒子头部增加tab页签切换。
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
关于中国
About China
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
<div class="ax-box ax-border ax-radius ax-tab">
<div class="ax-box-header ax-row">
<div class="ax-col">
<div class="ax-title">关于中国</div>
<div class="ax-des">About China</div>
</div>
<span class="ax-btn-group ax-tab-nav"><a href="###" class="ax-btn ax-xs ax-active">唐朝</a><a href="###" class="ax-btn ax-xs">宋朝</a><a href="###" class="ax-btn ax-xs">元朝</a></span>
</div>
<ul class="ax-box-body ax-article ax-tab-content">
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius ax-tab">
<div class="ax-box-header ax-row">
<div class="ax-col">
<div class="ax-title">关于中国</div>
<div class="ax-des">About China</div>
</div>
<div class="ax-tab-nav ax-menu-tab">
<a href="###" class="ax-item ax-active"><span class="tab_title">唐朝</span></a>
<a href="###" class="ax-item"><span class="tab_title">宋朝</span></a>
<a href="###" class="ax-item"><span class="tab_title">元朝</span></a>
</div>
</div>
<ul class="ax-box-body ax-article ax-tab-content">
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
加图标 JS
通过给ax-box-header追加ax-bar、ax-bar-bottom或ax-bar-top以实现标题指示效果。结合标题指示制作更多盒子标题的布局。写了点js：当没有ax-des的时候给ax-box-header追加ax-simple以控制底部图标的大小。
伟大的中国
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-bar ax-row"><div class="ax-col"><span class="ax-title">关于中国(带图标按钮)</span></div><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-bar-top ax-row"><div class="ax-col"><span class="ax-title">关于中国(带小实体按钮)</span></div><a href="###" class="ax-btn ax-primary ax-sm">导入</a><a href="###" class="ax-btn ax-primary ax-sm">导出EXCEL</a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-shadow ax-radius">
<div class="ax-box-header ax-bar-bottom ax-row"><div class="ax-col"><span class="ax-title">关于中国(带Svg图标)</span></div>
<a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
</div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
标题指示 JS
通过给ax-box-header追加ax-bar、ax-bar-bottom或ax-bar-top以实现标题指示效果。结合标题指示制作更多盒子标题的布局。写了点js：当没有ax-des的时候给ax-box-header追加ax-simple以控制底部指示的位置。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-bar ax-row"><div class="ax-col"><span class="ax-title">关于中国(带图标按钮)</span></div><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-bar-top ax-row"><div class="ax-col"><span class="ax-title">关于中国(带小实体按钮)</span></div><a href="###" class="ax-btn ax-primary ax-sm">导入</a><a href="###" class="ax-btn ax-primary ax-sm">导出EXCEL</a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-shadow ax-radius">
<div class="ax-box-header ax-bar-bottom ax-row"><div class="ax-col"><span class="ax-title">关于中国(带Svg图标)</span></div>
<a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
</div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
关闭盒子 JS
该功能需要写一点简单的Jquery/JS，已经集成到ax.js当中。ax-box-close是盒子关闭按钮，按钮可以使用iconfont图标也可以使用svg矢量图片，结构如下：
<div class="ax-box">
<div class="ax-box-header ax-row">
<div class="ax-col">盒子标题</div>
<a class="ax-box-close"></a>
</div>
<div class="ax-box-body">盒子内容</div>
</div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">按钮使用iconfont图标</span></div><a href="###" class="ax-operate ax-box-close"><i class="ax-iconfont
ax-icon-up"></i></a></div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
<div class="ax-break"></div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header ax-row"><div class="ax-col"><span class="ax-title">关于中国</span><span class="ax-color-ignore">按钮使用svg图片</span></div>
<a href="###" class="ax-operate ax-box-close"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
</div>
<div class="ax-break-line"></div>
<div class="ax-box-body ax-article">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
嵌套使用
在ax-panel-body中可重复使用ax-box以实现嵌套。
<div class="ax-box">
<div class="ax-box-header ax-row">
<div class="ax-col">盒子标题</div>
</div>
<div class="ax-box-body">
盒子内容
<div class="ax-box">
<div class="ax-box-header ax-row">
<div class="ax-col">盒子标题</div>
</div>
<div class="ax-box-body">盒子内容</div>
</div>
</div>
</div>
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><b>伟大的中国</b></div>
<div class="ax-des">The Great China</div>
</div>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-box ax-border ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><b>人口规模</b></div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate ax-box-close"><i class="ax-iconfont
ax-icon-up"></i></a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
</div>
</div>
</div>
</div>
与Swiper轮播整合 Plugin
按要求引入swiper的js和css文件，使用js代码调用；将指示小点用ax-bullet-outer标签包裹，装入ax-box-header中即可。Swiper的更多用法请点击这里。
伟大的中国
The Great China
-
<script src="src/plugins/swiper/swiper.min.js" type="text/javascript"></script> <link href="src/plugins/swiper/swiper.min.css" rel="stylesheet" > <script type='text/javascript'> var swiper01 = new Swiper('#swiper01', {pagination: {el: '.outpag01',clickable :true,},}); </script> -
<style> .swiper-container{ height:200px; } .swiper-slide{ width:100%; height:100%; background-color: #f5f5f5; } </style> -
<div class="ax-box ax-border ax-radius"> <div class="ax-box-header"> <div class="ax-row"> <div class="ax-col"> <div class="ax-title">伟大的中国</div> <div class="ax-des">The Great China</div> </div> <div class="ax-bullet-outer"><div class="outpage01"></div></div> </div> </div> <div class="ax-box-body ax-padding-lr ax-xl"> <div class="swiper-container" id="swiper01"> <div class="swiper-wrapper"> <div class="swiper-slide ax-align-origin">Slide 1</div> <div class="swiper-slide ax-align-origin">Slide 2</div> <div class="swiper-slide ax-align-origin">Slide 3</div> <div class="swiper-slide ax-align-origin">Slide 4</div> </div> </div> </div> <div class="ax-break-xl"></div> </div>
颜色
通过给ax-box追加ax-bg-*类以实现深色多彩盒子。另外可继续追加ax-radius和ax-shadow（ax-border已不适合追加）。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
导出EXCEL伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-grid ax-space-md">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-primary ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-secondary ax-radius">
<div class="ax-box-header ax-bar">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-close"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-edit"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont
ax-icon-up"></i></a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-success ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<i class="ax-adorn ax-iconfont ax-icon-star"></i>
<div class="ax-col">
<div class="ax-title">伟大的中国(svg)</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-danger ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-info ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-warning ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-ad ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bg-title ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-btn ax-reverse ax-xs">导出EXCEL</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
</ul>
</div>
同理，通过给ax-box追加ax-bglit-*类以实现浅色多彩盒子。另外可继续追加ax-radius、ax-border和ax-shadow。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
刷新伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
导出EXCEL伟大的中国The Great China中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-grid ax-space-md">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-primary ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-secondary ax-radius">
<div class="ax-box-header ax-bar">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-close"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-edit"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont
ax-icon-up"></i></a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-success ax-radius ax-border">
<div class="ax-box-header">
<div class="ax-row">
<i class="ax-adorn ax-iconfont ax-icon-star"></i>
<div class="ax-col">
<div class="ax-title">伟大的中国(svg)</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-danger ax-radius ax-border">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-info ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-warning ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-ad ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-box ax-bglit-title ax-radius">
<div class="ax-box-header">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title">伟大的中国</div>
<div class="ax-des">The Great China</div>
</div>
<a href="###" class="ax-btn ax-xs">导出EXCEL</a>
</div>
</div>
<div class="ax-box-body ax-padding ax-xl">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</li>
</ul>
</div>
应用举例
伟大的中国
The Great China