<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale" content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
<link href="http://src.axui.cn/src/css/ax.css" rel="stylesheet" type="text/css">
<link href="http://at.alicdn.com/t/font_1551254_sk7y2quxfyq.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="http://src.axui.cn/src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://src.axui.cn/src/js/ax.min.js" type="text/javascript"></script>
<script src="http://src.axui.cn/src/plugins/input-spinner/input-spinner.min.js" type="text/javascript"></script>
<script src="http://src.axui.cn/src/plugins/rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
<link href="http://src.axui.cn/src/plugins/rangeSlider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw">
</script>
<title>AXUI</title>
</head>
<body>
<div id="exp">
<h2>文字颜色</h2>
<p class="ax-color-primary">ax-color-primary首要主色</p>
<p class="ax-color-secondary">ax-color-secondary辅助色</p>
<p class="ax-color-success">ax-color-success操作成功</p>
<p class="ax-color-danger">ax-color-danger危险警告</p>
<p class="ax-color-warning">ax-color-warning注意安全</p>
<p class="ax-color-info">ax-color-info您有新消息</p>
<p class="ax-color-ad">ax-color-ad这是一条广告</p>
<p class="ax-color-title">ax-color-title文章标题</p>
<p class="ax-color-des">ax-color-des文章简介或者描述</p>
<p class="ax-color-ignore">ax-color-ignore可忽略的无关紧要的</p>
<p class="ax-color-white">ax-color-white黑底白字</p>
<h2>背景颜色</h2>
<p class="ax-bg-primary">ax-bg-primary首要主色</p>
<p class="ax-bg-secondary">ax-bg-secondary辅助色</p>
<p class="ax-bg-success">ax-bg-success操作成功</p>
<p class="ax-bg-danger">ax-bg-danger危险警告</p>
<p class="ax-bg-warning">ax-bg-warning注意安全</p>
<p class="ax-bg-info">ax-bg-info您有新消息</p>
<p class="ax-bg-ad">ax-bg-ad这是一条广告</p>
<p class="ax-bg-title">ax-bg-title文章标题</p>
<p class="ax-bg-des">ax-bg-des文章简介或者描述</p>
<p class="ax-bg-ignore">ax-bg-ignore可忽略的无关紧要的</p>
<p class="ax-bg-white">ax-bg-white黑底白字</p>
<br />
<h2>纵向分隔线</h2>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-xxs"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-xs"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-sm"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-md"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-lg"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-xl"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<div class="ax-break-xxl"></div>
<div class="ax-bglit-title" style="height:50px;"></div>
<br />
<h2>横向分隔线</h2>
<div class="ax-row">
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-xs"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-sm"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-md"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-lg"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-xl"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
<span class="ax-gutter-xxl"></span>
<div class="ax-col" style="border:1px solid #d8d8d8;">
<section class="demo-section-border">1</section>
</div>
</div>
<br />
<h2>纵向线条间隔</h2>
<div class="ax-article ax-padding">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<div class="ax-break-line"></div>
<p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
</p>
<div class="ax-break-line"></div>
<p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
</p>
</div>
<br />
<h2>横向线条间隔</h2>
<div class="ax-row ax-bg-ignore">
<div class="ax-col">
<section class="demo-section">1</section>
</div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col">
<section class="demo-section">1</section>
</div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col">
<section class="demo-section">1</section>
</div>
</div>
<br />
<h2>文字间隔</h2>
<div class="ax-article ax-padding">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<div class="ax-break-text">
<div class="ax-left"></div><span>伟大的中国</span>
<div class="ax-right"></div>
</div>
<p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
</p>
<div class="ax-break-text ax-align-left">
<div class="ax-left"></div><span>伟大的中国</span>
<div class="ax-right"></div>
</div>
<p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
</p>
<div class="ax-break-text ax-align-right">
<div class="ax-left"></div><span>伟大的中国</span>
<div class="ax-right"></div>
</div>
<p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
</p>
</div>
<br />
<h2>阴影</h2>
<section class="demo-section ax-shadow">常规阴影</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow ax-border">带实边的常规阴影</section>
<br />
<h2>阴影风格</h2>
<section class="demo-section ax-shadow">ax-shadow</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-border">ax-shadow-border</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-light">ax-shadow-light</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-dark">ax-shadow-dark</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-cloud">ax-shadow-cloud</section>
<br />
<h2>阴影色彩</h2>
<section class="demo-section ax-shadow-primary">ax-shadow-primary</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-secondary">ax-shadow-secondary</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-success">ax-shadow-success</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-danger">ax-shadow-danger</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-info">ax-shadow-info</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-warning">ax-shadow-warning</section>
<div class="ax-break"></div>
<section class="demo-section ax-shadow-ad">ax-shadow-ad</section>
<br />
<h2>背景颜色渐变</h2>
<div class="ax-bg-info ax-gradient" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-0" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-45" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-90" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-135" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-180" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-225" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-270" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-315" style="width: 50px;height: 50px;float: left;">文字</div>
<div class="ax-bg-info ax-gradient-360" style="width: 50px;height: 50px;float: left;">文字</div>
<div style="clear: both;"></div>
<br />
<h2>alert提示框</h2>
<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>
<br />
<h2>alert无边框提示框</h2>
<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>
<br />
<h2>alert方边提示框</h2>
<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>
<br />
<h2>带有关闭按钮的提示框</h2>
<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>
<br />
<h2>标题+简介提示框</h2>
<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>
<br />
<h2>带有其他小图标的提示框</h2>
<div class="ax-alert ax-danger ax-sm">
<i class="ax-iconfont ax-icon-close-o-fill"></i>
<div>
<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-fill"></i>
<div>
<div class="ax-title">奴隶社会</div>
<div class="ax-des">
公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。
</div>
</div>
</div>
<br />
<h2>带有其他大图标的提示框</h2>
<div class="ax-alert ax-success ax-lg">
<i class="ax-iconfont ax-icon-check-o-fill"></i>
<div>
<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-fill"></i>
<div>
<div class="ax-title">奴隶社会</div>
<div class="ax-des">
公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。
</div>
</div>
</div>
<br />
<h2>实体徽章</h2>
<span class="ax-badge">2</span>
<span class="ax-badge ax-primary">New</span>
<span class="ax-badge ax-danger">Hot</span>
<span class="ax-badge ax-success">推荐</span>
<span class="ax-badge ax-primary">2</span>
<span class="ax-badge ax-secondary">8</span>
<span class="ax-badge ax-success">1</span>
<span class="ax-badge ax-danger">21</span>
<span class="ax-badge ax-warning">65</span>
<span class="ax-badge ax-info">10+</span>
<span class="ax-badge ax-ad">10+</span>
<span class="ax-badge ax-light">11</span>
<span class="ax-badge ax-dark">4</span>
<span class="ax-badge ax-ignore">7</span>
<span class="ax-badge ax-white">32</span>
<br />
<h2>线体徽章</h2>
<span class="ax-badge ax-border">2</span>
<span class="ax-badge ax-primary ax-border">New</span>
<span class="ax-badge ax-danger ax-border">Hot</span>
<span class="ax-badge ax-success ax-border">推荐</span>
<span class="ax-badge ax-primary ax-border">2</span>
<span class="ax-badge ax-secondary ax-border">8</span>
<span class="ax-badge ax-success ax-border">1</span>
<span class="ax-badge ax-danger ax-border">21</span>
<span class="ax-badge ax-warning ax-border">65</span>
<span class="ax-badge ax-info ax-border">10+</span>
<span class="ax-badge ax-ad ax-border">10+</span>
<span class="ax-badge ax-light ax-border">11</span>
<span class="ax-badge ax-dark ax-border">4</span>
<span class="ax-badge ax-ignore ax-border">7</span>
<span class="ax-badge ax-white ax-border">32</span>
<br />
<h2>圆角徽章</h2>
<span class="ax-badge ax-radius">推荐</span>
<span class="ax-badge ax-border ax-radius">New</span>
<br />
<h2>水滴形徽章</h2>
<span class="ax-badge ax-drop">推荐</span>
<span class="ax-badge ax-border ax-drop">New</span>
<br />
<h2>小圆点</h2>
<span class="ax-dot"></span>
<span class="ax-dot ax-primary"></span>
<span class="ax-dot ax-secondary"></span>
<span class="ax-dot ax-success"></span>
<span class="ax-dot ax-danger"></span>
<span class="ax-dot ax-warning"></span>
<span class="ax-dot ax-info"></span>
<span class="ax-dot ax-ad"></span>
<span class="ax-dot ax-light"></span>
<span class="ax-dot ax-dark"></span>
<span class="ax-dot ax-ignore"></span>
<span class="ax-dot ax-white"></span>
<br />
<h2>Flag角标</h2>
<div style="position: relative;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
<span class="ax-flag ax-right" style="position: absolute;"><i>New</i></span>
<span class="ax-flag ax-left ax-danger" style="position: absolute;"><i>HOT</i></span>
</div>
<br />
<div style="position: relative;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
<span class="ax-flag ax-right ax-success"><i>完成</i></span>
<span class="ax-flag ax-left ax-secondary"><i>次要</i></span>
</div>
<br />
<div style="position: relative;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
<span class="ax-flag ax-right ax-warning"><i>推荐</i></span>
<span class="ax-flag ax-left ax-ad"><i>广告</i></span>
</div>
<br />
<div style="position: relative;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
<span class="ax-flag ax-right ax-info"><i>消息</i></span>
<span class="ax-flag ax-left ax-light"><i>浅色</i></span>
</div>
<br />
<div style="position: relative;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
<span class="ax-flag ax-right ax-dark"><i>深色</i></span>
<span class="ax-flag ax-left ax-ignore"><i>禁止</i></span>
</div>
<br />
<h2>a标签和span标签的按钮</h2>
<a href="###" class="ax-btn">a按钮</a>
<span class="ax-btn">span按钮</span>
<br />
<br />
<h2>input标签和button标签的按钮</h2>
<input type="submit" value="提交submit" class="ax-btn">
<button type="button" class="ax-btn">提交button</button>
<br />
<br />
<h2>a标签文字按钮</h2>
<a href="###" class="ax-color-primary">primary首要</a>
<a href="###" class="ax-color-ignore">ignore忽略</a>
<a href="###" class="ax-cancel">cancel无效或者取消a</a>
<a href="###" class="ax-color-secondary">secondary次要</a>
<a href="###" class="ax-color-danger">danger危险</a>
<a href="###" class="ax-color-success">success成功</a>
<a href="###" class="ax-color-warning">warning警告</a>
<a href="###" class="ax-color-info">info信息</a>
<a href="###" class="ax-color-ad">ad广告</a><br />
<br />
<h2>非a标签文字按钮</h2>
<span class="ax-color-primary">primary首要</span>
<span class="ax-color-ignore">ignore忽略</span>
<span class="ax-cancel">cancel无效或者取消</span>
<span class="ax-color-secondary">secondary次要</span>
<span class="ax-color-danger">danger危险</span>
<span class="ax-color-success">success成功</span>
<span class="ax-color-warning">warning警告</span>
<span class="ax-color-info">info信息</span>
<span class="ax-color-ad">ad广告</span><br />
<br />
<h2>嵌套在其他元素内的a标签按钮</h2>
<span class="ax-color-primary"><a href="###">primary首要</a></span>
<span class="ax-color-ignore"><a href="###">ignore忽略</a></span>
<span class="ax-cancel"><a href="###">cancel无效或者取消</a></span>
<span class="ax-color-secondary"><a href="###">secondary次要</a></span>
<span class="ax-color-danger"><a href="###">danger危险</a></span>
<span class="ax-color-success"><a href="###">success成功</a></span>
<span class="ax-color-warning"><a href="###">warning警告</a></span>
<span class="ax-color-info"><a href="###">info信息</a></span>
<span class="ax-color-ad"><a href="###">ad广告</a></span>
<br />
<br />
<h2>带图标按钮</h2>
<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>a按钮</a>
<span class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>span按钮</span>
<button type="button" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>提交button</button>
<br />
<br />
<h2>右侧带图标按钮</h2>
<a href="###" class="ax-btn">a按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></a>
<span class="ax-btn">span按钮<span class="ax-iconfont ax-icon-star ax-at-right"></span></span>
<button type="button" class="ax-btn">提交button<span
class="ax-iconfont ax-icon-star ax-at-right"></span></button>
<br />
<br />
<h2>固定宽度的按钮</h2>
<a href="###" class="ax-btn ax-long">120px-a</a>
<span class="ax-btn ax-long">120px-span </span>
<input type="submit" value="120px-input" class="ax-btn ax-long">
<button type="button" class="ax-btn ax-long">120px-button</button>
<a href="###" class="ax-btn ax-longer">200px-a</a>
<span class="ax-btn ax-longer">200px-span</span>
<input type="submit" value="200px-input" class="ax-btn ax-longer">
<button type="button" class="ax-btn ax-longer">200px-button</button>
<a href="###" class="ax-btn ax-longest">240px-a</a>
<span class="ax-btn ax-longest">240px-span</span>
<input type="submit" value="240px-input" class="ax-btn ax-longest">
<button type="button" class="ax-btn ax-longest">240px-button</button>
<br />
<br />
<h2>固定宽度小按钮</h2>
<a href="###" class="ax-btn ax-sm ax-long">80px-a</a>
<span class="ax-btn ax-sm ax-long">80px-span</span>
<input type="submit" value="80px-input" class="ax-btn ax-sm ax-long">
<button type="button" class="ax-btn ax-sm ax-long">80px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm ax-longer">120px-a</a>
<span class="ax-btn ax-sm ax-longer">120px-span</span>
<input type="submit" value="120px-input" class="ax-btn ax-sm ax-longer">
<button type="button" class="ax-btn ax-sm ax-longer">120px-button</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm ax-longest">180px-a</a>
<span class="ax-btn ax-sm ax-longest">180px-span</span>
<input type="submit" value="180px-input" class="ax-btn ax-sm ax-longest">
<div class="ax-break-md"></div>
<button type="button" class="ax-btn ax-sm ax-longest">180px-button</button>
<br />
<br />
<h2>其他按钮尺寸</h2>
<a href="###" class="ax-btn ax-xxs">极小按钮</a>
<a href="###" class="ax-btn ax-xxs"><span class="ax-iconfont ax-icon-star"></span>极小按钮</a>
<span class="ax-btn ax-xxs">极小按钮</span>
<input type="submit" value="特小按钮" class="ax-btn ax-xxs">
<button type="button" class="ax-btn ax-xxs">极小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-xs">特小按钮</a>
<a href="###" class="ax-btn ax-xs"><span class="ax-iconfont ax-icon-star"></span>特小按钮</a>
<span class="ax-btn ax-xs">特小按钮</span>
<input type="submit" value="特小按钮" class="ax-btn ax-xs">
<button type="button" class="ax-btn ax-xs">特小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-sm">小按钮</a>
<a href="###" class="ax-btn ax-sm"><span class="ax-iconfont ax-icon-star"></span>小按钮</a>
<span class="ax-btn ax-sm">小按钮</span>
<input type="submit" value="小按钮" class="ax-btn ax-sm">
<button type="button" class="ax-btn ax-sm">小按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn">常规按钮</a>
<a href="###" class="ax-btn"><span class="ax-iconfont ax-icon-star"></span>常规按钮</a>
<span class="ax-btn">常规按钮</span>
<input type="submit" value="常规按钮" class="ax-btn">
<button type="button" class="ax-btn">常规按钮</button>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-lg">大按钮</a>
<a href="###" class="ax-btn ax-lg"><span class="ax-iconfont ax-icon-star"></span>大按钮</a>
<span class="ax-btn ax-lg">大按钮</span>
<input type="submit" value="大按钮" class="ax-btn ax-lg">
<button type="button" class="ax-btn ax-lg">大按钮</button>
<br />
<br />
<h2>实体颜色按钮</h2>
<a href="###" class="ax-btn ">默认按钮</a>
<a href="###" class="ax-btn ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-success">success</a>
<a href="###" class="ax-btn ax-danger">danger</a>
<a href="###" class="ax-btn ax-warning">warning</a>
<a href="###" class="ax-btn ax-info">info</a>
<a href="###" class="ax-btn ax-ad">ad</a>
<a href="###" class="ax-btn ax-ignore">ignore</a>
<a href="###" class="ax-btn ax-black">black</a>
<input type="submit" value="input" class="ax-btn ax-primary">
<button type="button" class="ax-btn ax-primary">button</button>
<br />
<br />
<h2>禁用状态实体的按钮</h2>
<a href="###" class="ax-btn ax-disabled">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-disabled">主色按钮</a>
<a href="###" class="ax-btn ax-secondary ax-disabled">secondary</a>
<a href="###" class="ax-btn ax-success ax-disabled">success</a>
<a href="###" class="ax-btn ax-danger ax-disabled">danger</a>
<a href="###" class="ax-btn ax-warning ax-disabled">warning</a>
<a href="###" class="ax-btn ax-info ax-disabled">info</a>
<a href="###" class="ax-btn ax-ad ax-disabled">ad</a>
<a href="###" class="ax-btn ax-ignore ax-disabled">ignore</a>
<a href="###" class="ax-btn ax-black ax-disabled">black</a>
<input type="submit" value="input" class="ax-btn ax-primary ax-disabled">
<button type="button" class="ax-btn ax-primary ax-disabled">button</button>
<br />
<br />
<h2>边框线按钮</h2>
<a href="###" class="ax-btn ax-line">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-line ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-line ax-success">success</a>
<a href="###" class="ax-btn ax-line ax-danger">danger</a>
<a href="###" class="ax-btn ax-line ax-warning">warning</a>
<a href="###" class="ax-btn ax-line ax-info">info</a>
<a href="###" class="ax-btn ax-line ax-ad">ad</a>
<a href="###" class="ax-btn ax-line ax-ignore">ignore</a>
<a href="###" class="ax-btn ax-line ax-black">black</a>
<input type="submit" value="input" class="ax-btn ax-line ax-primary">
<button type="button" class="ax-btn ax-line ax-primary">button</button>
<br />
<br />
<h2>禁用状态边框线按钮</h2>
<a href="###" class="ax-btn ax-line ax-disabled">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-disabled">主色按钮</a>
<a href="###" class="ax-btn ax-line ax-secondary ax-disabled">secondary</a>
<a href="###" class="ax-btn ax-line ax-success ax-disabled">success</a>
<a href="###" class="ax-btn ax-line ax-danger ax-disabled">danger</a>
<a href="###" class="ax-btn ax-line ax-warning ax-disabled">warning</a>
<a href="###" class="ax-btn ax-line ax-info ax-disabled">info</a>
<a href="###" class="ax-btn ax-line ax-ad ax-disabled">ad</a>
<a href="###" class="ax-btn ax-line ax-ignore ax-disabled">ignore</a>
<a href="###" class="ax-btn ax-line ax-black ax-disabled">black</a>
<input type="submit" value="input" class="ax-btn ax-line ax-primary ax-disabled">
<button type="button" class="ax-btn ax-line ax-primary ax-disabled">button</button>
<br />
<br />
<h2>深色背景按钮</h2>
<div style="background-color: black;padding: 10px;">
<a href="###" class="ax-btn ax-reverse">常规按钮</a>
<button class="ax-btn ax-reverse">button</button>
<input type="submit" value="input" class="ax-btn ax-reverse">
<button class="ax-btn ax-info ax-reverse">button</button>
<input type="submit" value="input" class="ax-btn ax-ignore ax-reverse">
<a href="###" class="ax-btn ax-primary ax-reverse">主色按钮</a>
<a href="###" class="ax-btn ax-reverse ax-disabled">disabled</a>
<a href="###" class="ax-btn ax-primary ax-reverse ax-disabled">disabled</a>
<a href="###" class="ax-btn ax-secondary ax-reverse">secondary</a>
<a href="###" class="ax-btn ax-success ax-reverse">success</a>
<a href="###" class="ax-btn ax-danger ax-reverse">danger</a>
<a href="###" class="ax-btn ax-warning ax-reverse">warning</a>
<a href="###" class="ax-btn ax-info ax-reverse">info</a>
<a href="###" class="ax-btn ax-ad ax-reverse">ad</a>
<a href="###" class="ax-btn ax-ignore ax-reverse">ignore</a>
<a href="###" class="ax-btn ax-black ax-reverse">black</a>
<a href="###" class="ax-btn ax-line ax-line ax-reverse">line常规按钮</a>
<button class="ax-btn ax-line ax-reverse">line-button</button>
<input type="submit" value="line-input" class="ax-btn ax-line ax-reverse">
<button class="ax-btn ax-line ax-info ax-reverse">line-button</button>
<input type="submit" value="line-input" class="ax-btn ax-line ax-ignore ax-reverse">
<a href="###" class="ax-btn ax-line ax-primary ax-reverse">line主色按钮</a>
<a href="###" class="ax-btn ax-line ax-reverse ax-disabled">line-disabled</a>
<a href="###" class="ax-btn ax-line ax-primary ax-reverse ax-disabled">line-disabled</a>
<a href="###" class="ax-btn ax-line ax-secondary ax-reverse">line-secondary</a>
<a href="###" class="ax-btn ax-line ax-success ax-reverse">line-success</a>
<a href="###" class="ax-btn ax-line ax-danger ax-reverse">line-danger</a>
<a href="###" class="ax-btn ax-line ax-warning ax-reverse">line-warning</a>
<a href="###" class="ax-btn ax-line ax-info ax-reverse">line-info</a>
<a href="###" class="ax-btn ax-line ax-ad ax-reverse">line-ad</a>
<a href="###" class="ax-btn ax-line ax-ignore ax-reverse">line-ignore</a>
<a href="###" class="ax-btn ax-line ax-black ax-reverse">line-black</a>
</div>
<br />
<h2>渐变按钮</h2>
<a href="###" class="ax-btn ax-primary ax-gradient">primary</a>
<a href="###" class="ax-btn ax-secondary ax-gradient">secondary</a>
<a href="###" class="ax-btn ax-danger ax-gradient">danger</a>
<a href="###" class="ax-btn ax-success ax-gradient">success</a>
<a href="###" class="ax-btn ax-warning ax-gradient">warning</a>
<a href="###" class="ax-btn ax-info ax-gradient">info</a>
<a href="###" class="ax-btn ax-ad ax-gradient">ad</a>
<br />
<br />
<h2>波纹按钮(效果与官网上的有点差距)</h2>
<a href="###" class="ax-btn ax-ripple">默认</a>
<a href="###" class="ax-btn ax-primary ax-ripple">primary</a>
<a href="###" class="ax-btn ax-secondary ax-ripple">secondary</a>
<a href="###" class="ax-btn ax-danger ax-ripple">danger</a>
<a href="###" class="ax-btn ax-success ax-ripple">success</a>
<a href="###" class="ax-btn ax-warning ax-ripple">warning</a>
<a href="###" class="ax-btn ax-info ax-ripple">info</a>
<a href="###" class="ax-btn ax-ad ax-ripple">ad</a>
<br />
<br />
<h2>阴影按钮</h2>
<div class="ax-break-xxl"></div>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-shadow">default</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-primary ax-shadow">primary</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-secondary ax-shadow">secondary</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-danger ax-shadow">danger</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-success ax-shadow">success</a>
<div class="ax-break-xxl"></div>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-warning ax-shadow">warning</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-info ax-shadow">info</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-ad ax-shadow">ad</a>
<span class="ax-gutter-xxl"></span>
<a href="###" class="ax-btn ax-black ax-shadow">ad</a>
<div class="ax-break-xxl"></div>
<br />
<br />
<h2>加载按钮</h2>
<i class="ax-btn-loading"></i><i class="ax-btn-loading ax-white"></i>
<a href="###" class="ax-btn"><i class="ax-btn-loading"></i>加载中...</a>
<a href="###" class="ax-btn"><i class="ax-btn-loading ax-gif"></i>加载中...</a>
<a href="###" class="ax-btn ax-primary"><i class="ax-btn-loading ax-white"></i>加载中...</a>
<br />
<br />
<h2>图标按钮</h2>
<a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-disabled"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-danger ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-disabled"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-success ax-icon"><span
class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-danger ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-danger ax-icon"><span
class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-sm ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-sm ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-sm ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-sm ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-primary ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-success ax-icon"><span
class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-danger ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-warning ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-sm ax-info ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-sm ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-danger ax-icon"><span
class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-lg ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-lg ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<a href="###" class="ax-btn ax-line ax-lg ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-primary ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-success ax-icon"><span
class="ax-iconfont ax-icon-email-fill"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-danger ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-warning ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-line ax-lg ax-info ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a>
<button class="ax-btn ax-line ax-lg ax-ad ax-icon"><span class="ax-iconfont ax-icon-star"></span></button>
<br />
<br />
<h2>圆形按钮</h2>
<a href="###" class="ax-btn ax-primary ax-sm ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-lg ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-sm ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary ax-lg ax-round">默认按钮</a>
<a href="###" class="ax-btn ax-sm ax-icon ax-circled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-lg ax-icon ax-circle"><span class="ax-iconfont ax-icon-star"></span></a>
<br />
<br />
<h2>文字无边按钮</h2>
<a href="###" class="ax-btn ax-text ">默认按钮</a>
<a href="###" class="ax-btn ax-text ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-text ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-text ax-success">success</a>
<a href="###" class="ax-btn ax-text ax-danger">danger</a>
<a href="###" class="ax-btn ax-text ax-warning">warning</a>
<a href="###" class="ax-btn ax-text ax-info">info</a>
<a href="###" class="ax-btn ax-text ax-ad">ad</a>
<a href="###" class="ax-btn ax-text ax-ignore">ignore</a>
<div class="ax-break-md"></div>
<a href="###" class="ax-btn ax-text ax-black">black</a>
<a href="###" class="ax-btn ax-text ax-disabled">禁止</a>
<a href="###" class="ax-btn ax-text ax-primary ax-disabled">主色禁止</a>
<a href="###" class="ax-btn">默认按钮</a>
<a href="###" class="ax-btn ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-line">默认按钮</a>
<a href="###" class="ax-btn ax-line ax-primary">主色按钮</a>
<br />
<br />
<h2>组合按钮</h2>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-sm">读书</a><a href="###"
class="ax-btn ax-sm">看报</a><a href="###" class="ax-btn ax-sm">玩手机</a><a href="###"
class="ax-btn ax-sm">旅行</a></span>
<span class="ax-btn-group"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn">看报</a></span>
<span class="ax-btn-group"><a href="###" class="ax-btn">读书</a><a href="###"
class="ax-btn ax-active">看报</a><a href="###" class="ax-btn">玩手机</a><a href="###"
class="ax-btn">旅行</a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-primary">读书</a><a href="###"
class="ax-btn ax-primary">看报</a><a href="###" class="ax-btn ax-primary">玩手机</a><a href="###"
class="ax-btn ax-primary">旅行</a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-lg">读书</a><a href="###"
class="ax-btn ax-lg">看报</a><a href="###" class="ax-btn ax-lg">玩手机</a><a href="###"
class="ax-btn ax-lg">旅行</a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-icon ax-active"><span
class="ax-iconfont ax-icon-star"></span></a><a href="###" class="ax-btn ax-icon"><span
class="ax-iconfont ax-icon-email-fill"></span></a><a href="###" class="ax-btn ax-icon"><span
class="ax-iconfont ax-icon-shield-fill"></span></a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-icon ax-active"><svg class="ax-svg">
<use xlink:href="#ax-icon-backspace-fill"></use>
</svg></a><a href="###" class="ax-btn ax-icon"><svg class="ax-svg">
<use xlink:href="#ax-icon-close"></use>
</svg></a><a href="###" class="ax-btn ax-icon"><svg class="ax-svg">
<use xlink:href="#ax-icon-link"></use>
</svg></a></span>
<div class="ax-break-md"></div>
<span class="ax-btn-group"><a href="###" class="ax-btn ax-primary">读书</a><a href="###"
class="ax-btn ax-danger">旅行</a><a href="###" class="ax-btn ax-ad ax-icon"><span
class="ax-iconfont ax-icon-star"></span></a></span>
<br />
<br />
<h2>icon图标</h2>
<span class="ax-iconfont ax-icon-arrow-down-o"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span class="ax-iconfont"></span>
<span>......</span>
<br />
<br />
<h2>省略</h2>
<div class="ax-ell">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的
</div>
<br />
<h2>Layout基础布局</h2>
<div class="ax-row" style="border:1px solid gray;">
<div class="ax-col" style="border-right:1px solid gray;">撑满的部分</div>
自由的部分
</div>
<br />
<h2>Layout弹性布局1</h2>
<div class="ax-flex-row" style="border:1px solid gray;">
<div class="ax-flex-block" style="border-right:1px solid gray;">撑满的部分</div>
自由的部分
</div>
<br />
<h2>Layout弹性布局2</h2>
<div class="ax-flex-row ax-split" style="border:1px solid gray;">
<div class="ax-flex-block-1" style="border-right:1px solid gray;">
<section class="demo-section-border">1份</section>
</div>
<div class="ax-flex-block-2" style="border-right:1px solid gray;">
<section class="demo-section-border">2份</section>
</div>
<div class="ax-flex-block-3" style="border-right:1px solid gray;">
<section class="demo-section-border">3份</section>
</div>
<div class="ax-flex-block-1" style="border-right:1px solid gray;">
<section class="demo-section-border">1份</section>
</div>
</div>
<br />
<h2>Layout没有间隙的布局</h2>
<div class="ax-row ax-split" style="border:1px solid gray;">
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
</div>
<div class="ax-row ax-split" style="border:1px solid gray;">
<div class="ax-col ax-col-8" style="border-right:1px solid gray;">
<section class="demo-section-border">8</section>
</div>
<div class="ax-col ax-col-4" style="border-right:1px solid gray;">
<section class="demo-section-border">4</section>
</div>
<div class="ax-col ax-col-10" style="border-right:1px solid gray;">
<section class="demo-section-border">10</section>
</div>
<div class="ax-col ax-col-2" style="border-right:1px solid gray;">
<section class="demo-section-border">2</section>
</div>
</div>
<br />
<h2>Layout有间隙的布局</h2>
<div class="ax-row" style="border:1px solid gray;">
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-12" style="border-right:1px solid gray;">
<section class="demo-section-border">12</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-6" style="border-right:1px solid gray;">
<section class="demo-section-border">6</section>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-row" style="border:1px solid gray;">
<div class="ax-col ax-col-8" style="border-right:1px solid gray;">
<section class="demo-section-border">8</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-4" style="border-right:1px solid gray;">
<section class="demo-section-border">4</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-10" style="border-right:1px solid gray;">
<section class="demo-section-border">10</section>
</div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-2" style="border-right:1px solid gray;">
<section class="demo-section-border">2</section>
</div>
</div>
<br />
<h2>Grid 栅格</h2>
<div class="ax-grid ax-split-3">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
<li class="ax-grid-block ax-col-6" style="border:1px solid gray;">6</li>
</ul>
</div>
<br />
<h2>Grid 自由组合列表</h2>
<div class="ax-grid">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-grid-block ax-col-1">
<section class="demo-section-border" style="border:1px solid gray;">1</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-grid-block ax-col-2">
<section class="demo-section-border" style="border:1px solid gray;">2</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-12">
<section class="demo-section-border" style="border:1px solid gray;">12</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12">
<section class="demo-section-border" style="border:1px solid gray;">12</section>
</li>
<li class="ax-grid-block ax-col-8">
<section class="demo-section-border" style="border:1px solid gray;">8</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-8">
<section class="demo-section-border" style="border:1px solid gray;">8</section>
</li>
<li class="ax-grid-block ax-col-8">
<section class="demo-section-border" style="border:1px solid gray;">8</section>
</li>
<li class="ax-grid-block ax-col-8">
<section class="demo-section-border" style="border:1px solid gray;">8</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-8">
<section class="demo-section-border" style="border:1px solid gray;">8</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-grid-block ax-col-4">
<section class="demo-section-border" style="border:1px solid gray;">4</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12">
<section class="demo-section-border" style="border:1px solid gray;">12</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-3">
<section class="demo-section-border" style="border:1px solid gray;">3</section>
</li>
<li class="ax-grid-block ax-col-6">
<section class="demo-section-border" style="border:1px solid gray;">6</section>
</li>
</ul>
</div>
<br />
<h2>input 表单</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名: </div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text"></div>
</div>
</div>
</div>
<br />
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
</div>
</div>
</div>
<br />
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a><a href="###"
class="ax-iconfont"></a><a href="###"
class="ax-iconfont"></a></span></div>
</div>
</div>
</div>
<br />
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">手机号码</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text"></div>
</div>
<a href="###" class="ax-form-btn ax-btn">获取验证码</a>
</div>
</div>
<br />
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">房屋选择</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input type="text"></div>
<span class="ax-bunch-txt">室</span>
<div class="ax-col ax-col-8"><input type="text"></div>
<span class="ax-bunch-txt">厅</span>
<div class="ax-col ax-col-8"><input type="text"></div>
<span class="ax-bunch-txt">阳台</span>
</div>
</div>
</div>
</div>
</div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">商品选择</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">件衣服</span>
</div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">条裤子</span>
</div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">双鞋子</span>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单价：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text">
</div>
</div>
<span class="ax-form-txt ax-color-ignore">单位(元)</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">带头像：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-head"
style="background-image:url(img/td.png),url(src/images/loading.gif);"></a><span
class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">带图片：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-img"><img src="img/github.png"></a><span
class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text">
</div>
</div>
<span class="ax-form-img"><a href="###">显示验证码</a></span>
</div>
</div>
<br />
<h2>input基础效果预览</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-danger ax-iconfont ax-icon-close-o-fill"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 你错了
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="只读的input" readonly
type="text"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李畅"
type="text"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">您十年前在深圳的曾用名是什么：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="几室" value=""
type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value=""
type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value=""
type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span
class="ax-iconfont ax-icon-trash-alt-fill"></span></a><a href="###"
class="ax-form-btn ax-btn ax-icon ax-round"><span
class="ax-iconfont ax-icon-trash-alt-fill"></span></a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="username" placeholder="几室" value=""
type="text"></div>
<span class="ax-bunch-txt">室</span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value=""
type="text"></div>
<span class="ax-bunch-txt">厅</span>
<div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value=""
type="text"></div>
<span class="ax-bunch-txt">卫</span>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">手机验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">手机验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-btn ax-btn">获取验证码</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">手机验证码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text">
</div>
</div>
<span class="ax-form-btn ax-btn ax-forbid">52s后重新获取</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单价：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text">
</div>
</div>
<span class="ax-form-txt ax-color-ignore">单位(元)</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称(头像)：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value=""
type="text"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a><span
class="ax-iconfont ax-icon-me"></span></span></div>
</div>
<a href="###" class="ax-form-head"
style="background-image:url(img/github.png),url(src/images/loading.gif);"></a><span
class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称(图片)：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-img"><img src="img/td.png"></a><span
class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择文件：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input onchange="document.getElementById('file-view').value=this.value;" id="file-upload"
class="ax-input-file" type="file">
<input name="username" placeholder="点击选择头像"
onmouseout="document.getElementById('file-upload').style.display='none';" id="file-view"
type="text">
<span onmouseover="document.getElementById('file-upload').style.display='block';"
class="ax-file-btn">选择图片</span>
</div>
</div>
<a href="###" class="ax-form-head"
style="background-image:url(img/github.png),url(src/images/loading.gif);"></a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span
class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论(只读)：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"
readonly=""></textarea></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-form-input"><button type="button"
class="ax-btn ax-primary ax-full">提交button</button></div>
</div>
</div>
</div>
<br />
<h2>标题避让(标题避让这段代码不起作用)</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input ax-dodge"><input name="username" placeholder="请输入姓名" type="text">
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-form-input ax-dodge"><textarea name="" cols="" rows=""
placeholder="请写下你的评论"></textarea></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input ax-dodge"><input name="username" placeholder="请输入姓名" type="text"
class="ax-lg"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-form-input ax-dodge"><textarea name="" cols="" rows="" placeholder="请写下你的评论"
class="ax-lg"></textarea></div>
</div>
</div>
</div>
<br />
<h2>Radio单选 圆点形状</h2>
<label class="ax-radio"><input name="name1" value="0" type="radio"><span>是</span></label>
<label class="ax-radio"><input name="name1" value="1" type="radio"><span>否</span></label>
<br />
<br />
<h2>Radio单选 块布局</h2>
<label class="ax-chera"><input name="name2" value="0" type="radio"><span>深圳市宝安区</span></label>
<label class="ax-chera"><input name="name2" value="1" type="radio"><span>永州市零陵区</span></label>
<br />
<br />
<h2>Radio单选 占满均分布局</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="1"
type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1"
type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1"
type="radio"><span>文学类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1"
type="radio"><span>小说类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1"
type="radio"><span>教材类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1"
type="radio"><span>动漫类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1"
type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0"
checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0"
disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
<br />
<h2>Radio单选 自定义宽度均分布局</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选(定宽400px)：</div>
<div style="width:400px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="1"
type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选(定宽600px)：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="1"
type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="1"
type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0"
checked="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0"
disabled="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
</div>
</div>
</div>
</div>
<br />
<h2>Radio单选 表单定宽均分布局</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1"
type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="0"
checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="1"
type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="2"
disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man-x" value="3"
checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论内容：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0"
checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0"
disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
</div>
<br />
<h2>Radio单选 自由布局</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-radio"><input name="free-apple" value="0" checked=""
type="radio"><span>军事类</span></label>
<label class="ax-radio"><input name="free-apple" value="1"
type="radio"><span>人物志类</span></label>
<label class="ax-radio"><input name="free-apple" value="2" disabled=""
type="radio"><span>娱乐类</span></label>
<label class="ax-radio"><input name="free-apple-x" value="3" checked="" disabled=""
type="radio"><span>其他</span></label>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block"><label class="ax-radio"><input name="free-orange" value="0" checked=""
type="radio"><span>军事类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>文学类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>人物志类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>小说类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>教材类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>动漫类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>历史类</span></label>
<label class="ax-radio"><input name="free-orange" value="1"
type="radio"><span>人文类</span></label>
<label class="ax-radio"><input name="free-orange" value="2" disabled=""
type="radio"><span>娱乐类</span></label>
<label class="ax-radio"><input name="free-orange-x" value="3" checked="" disabled=""
type="radio"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-flex-block">
<label class="ax-chera"><input name="free-girl" value="0" checked=""
type="radio"><span>军事类</span></label>
<label class="ax-chera"><input name="free-girl" value="1" type="radio"><span>人物志类</span></label>
<label class="ax-chera"><input name="free-girl" value="2" disabled=""
type="radio"><span>娱乐类</span></label>
<label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled=""
type="radio"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-radio"><input name="free-agree" value="0" checked=""
type="radio"><span>阅读《XXX使用协议》</span></label><label class="ax-radio"><input
name="free-agree" value="0" type="radio"><span>阅读《XXX使用协议》</span></label>
</div>
</div>
</div>
</div>
<br />
<h2>CheckBox复选 默认方形</h2>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>打篮球⛹</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>打乒乓球🏓</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>踢足球⚽</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>打羽毛球🏸</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>看电视📺</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>听歌🎵</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>打橄榄球🏈</span></label>
<label class="ax-checkbox"><input name="" value="" type="checkbox"><span>推保龄球🎳</span></label>
<br />
<br />
<h2>CheckBox复选 块分布</h2>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>打篮球⛹</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>打乒乓球🏓</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>踢足球⚽</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>打羽毛球🏸</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>看电视📺</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>听歌🎵</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>打橄榄球🏈</span></label>
<label class="ax-chera"><input name="" value="" type="checkbox"><span>推保龄球🎳</span></label>
<br />
<h2>CheckBox复选 复选开关</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关已开：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" type="checkbox"
checked=""><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关未开：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0"
type="checkbox"><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关禁止：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" disabled=""
type="checkbox"><span></span></label></div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">开关禁止(已选择)：</div>
<div class="ax-flex-block"><label class="ax-switch"><input name="check-s" value="0" checked=""
disabled="" type="checkbox"><span></span></label></div>
</div>
</div>
<br />
<h2>Select下拉菜单 默认样式</h2>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
<div class="ax-break"></div>
<select style="width:120px;">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
<br />
<h2>Select下拉菜单 美化样式(没有效果)</h2>
<select class="ax-select">
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<optgroup label="广东省">
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="珠海">珠海</option>
<option value="惠州">惠州</option>
</optgroup>
<optgroup label="湖南省">
<option value="长沙">长沙</option>
<option value="株洲">株洲</option>
<option value="岳阳">岳阳</option>
<option value="张家界">张家界</option>
</optgroup>
<optgroup label="江西省">
<option value="南昌">南昌</option>
<option value="赣州">赣州</option>
<option value="宜春">宜春</option>
<option value="九江">九江</option>
</optgroup>
</select>
<br />
<br />
<h2>Select下拉菜单 不可选</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select class="ax-select" disabled>
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select class="ax-select">
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" disabled>重庆</option>
</select>
</div>
</div>
</div>
</div>
<br />
<h2>Select下拉框 多选</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select class="ax-select" id="select-multiple" multiple data-placeholder="请选择...">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<optgroup label="广东省">
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="珠海">珠海</option>
<option value="惠州">惠州</option>
</optgroup>
<optgroup label="湖南省">
<option value="长沙">长沙</option>
<option value="株洲">株洲</option>
<option value="岳阳">岳阳</option>
<option value="张家界">张家界</option>
</optgroup>
<optgroup label="江西省">
<option value="南昌">南昌</option>
<option value="赣州">赣州</option>
<option value="宜春">宜春</option>
<option value="九江">九江</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<br />
<h2>Select下拉框 默认选中</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select class="ax-select">
<option value="">请选择..</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" selected>重庆</option>
</select>
</div>
</div>
</div>
</div>
<br />
<h2>Select下拉框 数据回调</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择城市：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select class="ax-select" id="select-fun">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
<div class="ax-valid ax-color-primary" class="ax-select" id="select-result"></div>
</div>
</div>
</div>
<br />
<h2>input-spinner 插件</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input" data-trigger="spinner">
<div class="ax-increase"><input name="username" placeholder="数量" value="1" type="text"><a
href="###" class="ax-minus" data-spin="down"><i
class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus"
data-spin="up"><i class="ax-iconfont ax-icon-plus"></i></a></div>
</div>
</div>
<span class="ax-form-txt ax-color-ignore"></span>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input" data-trigger="spinner">
<div class="ax-increase ax-array-right"><input name="username" placeholder="数量" value="1"
type="text"><a href="###" class="ax-minus" data-spin="down"><i
class="ax-iconfont ax-icon-down"></i></a><a href="###" class="ax-plus"
data-spin="up"><i class="ax-iconfont ax-icon-up"></i></a></div>
</div>
</div>
<span class="ax-form-txt ax-color-ignore"></span>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">禁止：</div>
<div class="ax-form-con">
<div class="ax-form-input" data-trigger="spinner">
<div class="ax-increase"><input name="username" placeholder="数量" value="1" type="text"
disabled><a href="###" class="ax-minus" data-spin="down"><i
class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus"
data-spin="up"><i class="ax-iconfont ax-icon-plus"></i></a></div>
</div>
</div>
<span class="ax-form-txt ax-color-ignore"></span>
</div>
</div>
<br />
<h2>Range滑块(插件:ion.rangeSlider 官网:http://ionden.com/a/plugins/ion.rangeSlider/index.html)</h2>
<input type="text" id="slider01" name="my_range" value="" /><br />
<input type="text" id="slider02" name="my_range" value="" /><br />
<input type="text" id="slider03" name="my_range" value="" /><br />
<input type="text" id="slider04" name="my_range" value="" /><br />
<br />
<h2>Upload上传 原生上传</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择文件：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="file">
</div>
</div>
<a href="###" class="ax-form-head"
style="background-image:url(<?=$urldemo?>images/head01.jpg),url(src/images/loading.gif);"></a>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">禁止使用：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="file" disabled>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">只读文件：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="file" readonly>
</div>
</div>
</div>
</div>
<br />
<h2>Upload 美化上传</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择文件：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input onmouseout="document.getElementById('file-upload').style.display='none';"
id="file-view" type="text">
<span onmouseover="document.getElementById('file-upload').style.display='block';"
class="ax-file-btn">选择</span>
<input onchange="document.getElementById('file-view').value=this.value;" id="file-upload"
class="ax-input-file" type="file">
</div>
</div>
<a href="###" class="ax-form-head"
style="background-image:url(img/github.png),url(src/images/loading.gif);"></a>
</div>
</div>
<br />
<h2>Valid 验证提示</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>
填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span>
请正确填写用户名</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-ignore">比如：李四</div>
</div>
</div>
</div>
<br />
<h2>Valid 验证提示 加强</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文"
class="ax-check-primary" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>
填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋"
class="ax-check-danger" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span>
请正确填写用户名</div>
</div>
</div>
</div>
<br />
<h2>Valid 验证提示 5种</h2>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">完成：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文"
class="ax-check-primary" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>
填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">错误：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋"
class="ax-check-danger" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span>
请正确填写用户名</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">成功：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="侯正宇"
class="ax-check-success" type="text"></div>
<div class="ax-valid ax-color-success"><span class="ax-iconfont ax-icon-check-o-fill"></span>
填写正确</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">警告：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="方国胜"
class="ax-check-warning" type="text"></div>
<div class="ax-valid ax-color-warning"><span class="ax-iconfont ax-icon-alert-fill"></span>注意消息
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">信息：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强"
class="ax-check-info" type="text"></div>
<div class="ax-valid ax-color-info"><span class="ax-iconfont ax-icon-question-o"></span> 信息通知
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">广告：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强"
class="ax-check-ad" type="text"></div>
<div class="ax-valid ax-color-ad"><span class="ax-iconfont ax-icon-question-o"></span> 广告疑问
</div>
</div>
</div>
</div>
<br />
<h2>Glitter 波浪闪烁</h2>
<div class="ax-row">
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-primary"></span></section>
</div>
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-success"></span></section>
</div>
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-secondary"></span></section>
</div>
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-warning"></span></section>
</div>
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-info"></span></section>
</div>
<div class="ax-col ax-col-4">
<section class="demo-section"><span class="ax-glitter ax-ad"></span></section>
</div>
</div>
<br />
<h2>Glitter 波浪闪烁 尺寸</h2>
<div class="ax-row" style="width: 50%;">
<div class="ax-col ax-col-8">
<section class="demo-section"><span class="ax-glitter ax-sm"></span></section>
</div>
<div class="ax-col ax-col-8">
<section class="demo-section"><span class="ax-glitter ax-md"></span></section>
</div>
<div class="ax-col ax-col-8">
<section class="demo-section"><span class="ax-glitter ax-lg"></span></section>
</div>
</div>
<br />
<h2>Glitter 波浪闪烁 添加文字、图标</h2>
<div class="ax-row" style="width: 20%;">
<div class="ax-col ax-col-12">
<section class="demo-section"><a href="##" class="ax-glitter ax-sm"
style="width:28px;height:28px"><i>1</i></a></section>
</div>
<div class="ax-col ax-col-12">
<section class="demo-section"><a href="##" class="ax-glitter ax-sm"
style="width:28px;height:28px"><i class="ax-iconfont ax-icon-good-fill"></i></a></section>
</div>
</div>
<br />
<h2>地图热点</h2>
<div id="map-add" style="height:400px;"></div>
<br />
<h2>Echarts图表</h2>
<div id="line" style="height:200px;width: 70%;"></div>
</div>
</body>
</html>
<script type='text/javascript'>
optionLine = {
title: {
text: ''
},
legend: {
data: ['本周客流', '上周客流'],
align: 'left',
top: '4'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
name: '单位(万)',
type: 'value',
},
series: [{
name: '本周客流',
data: [2.2, 2.5, 3.5, 2.8, 2.0, 4.5, 5.2],
type: 'line'
}, {
name: '上周客流',
data: [1.2, 2.1, 2.9, 3.5, 2.4, 5.6, 4.8],
type: 'line'
}],
tooltip: {
trigger: 'axis'
},
grid: {
show: false,
borderColor: '#ebebeb',
x: 22,
x2: 0,
y: 36,
y2: 0,
height: 128
},
};
var domLine = document.getElementById("line");
var chartLine = echarts.init(domLine, 'theme-ax');
chartLine.setOption(optionLine, true);
$("#select-multiple").select2({
maximumSelectionLength: 10,
allowClear: true,
});
$('#select-fun').change(function(e, v) {
$('#select-result').html('你选择了第' + e.target.selectedIndex + '项，值是' + e.target.value);
});
$(document).ready(function() {
$('[data-trigger="spinner"]').spinner('changing', function(event, newVal, oldVal) {
$(event.currentTarget).closest('.ax-form-group').find('.ax-form-txt').text('原来 = ' + oldVal +
', 现在 = ' + newVal);
});
});
$("#slider01").ionRangeSlider({
skin: "ax"
});
$("#slider02").ionRangeSlider({
skin: "ax",
grid: true,
});
$("#slider03").ionRangeSlider({
skin: "ax",
min: 0,
max: 1000,
from: 500,
grid: true,
from_min: 250,
from_max: 750,
from_shadow: true
});
$("#slider04").ionRangeSlider({
skin: "ax",
type: "double",
min: 0,
max: 1000,
from: 400,
to: 600,
drag_interval: true,
min_interval: null,
max_interval: null
});
var mapAdd = new BMap.Map("map-add", {
enableMapClick: false,
});
mapAdd.centerAndZoom(new BMap.Point(113.884582, 22.612286), 16);
mapAdd.addControl(new BMap.MapTypeControl({
mapTypes: []
}));
mapAdd.setCurrentCity("深圳");
mapAdd.enableScrollWheelZoom(true);
function ComplexCustomOverlay(point) {
this._point = point;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map) {
this._map = map;
var glitter = this._div = document.createElement("span");
glitter.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
glitter.className = "ax-glitter";
mapAdd.getPanes().labelPane.appendChild(glitter);
}
ComplexCustomOverlay.prototype.draw = function() {
var pixel = this._map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - 6 + "px";
this._div.style.top = pixel.y - 6 + "px";
}
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(113.881195, 22.613024), '', '');
mapAdd.addOverlay(myCompOverlay);
</script>
<style>
#exp {
width: 70%;
margin: 0px auto;
}
</style>
扫一扫
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
