axui表单导航弹窗按钮卡片评论等示例代码
代码语言：html
所属分类：布局界面
代码描述：axui表单导航弹窗按钮卡片评论等示例代码，包括手风琴、正文、列表、步骤、表格、闪烁等
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<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" />
<title>AXUI前端框架|斧子框架，面向设计的自主国产前端框架</title>
<meta name="description" content="AXUI前端框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。AXUI前端框架原则是能用css写的不用js；能用js写的不用插件；能用插件的不重复引用插件。核心文件只有ax.css和ax.js，加载速度飞快。">
<meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师,">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax-response.css">
</head>
<body>
<main>
<div class="ax-tab">
<div class="ax-tab-nav ax-menu-tab">
<a href="###" class="ax-item"><span class="tab_title">表单</span></a>
<a href="###" class="ax-item"><span class="tab_title">导航</span></a>
<a href="###" class="ax-item"><span class="tab_title">弹窗</span></a>
<a href="###" class="ax-item"><span class="tab_title">按钮</span></a>
<a href="###" class="ax-item"><span class="tab_title">卡片</span></a>
<a href="###" class="ax-item"><span class="tab_title">列表</span></a>
<a href="###" class="ax-item"><span class="tab_title">手风琴</span></a>
<a href="###" class="ax-item"><span class="tab_title">评论</span></a>
<a href="###" class="ax-item"><span class="tab_title">正文</span></a>
<a href="###" class="ax-item"><span class="tab_title">步骤</span></a>
<a href="###" class="ax-item"><span class="tab_title">闪烁</span></a>
<a href="###" class="ax-item"><span class="tab_title">表格</span></a>
<a href="###" class="ax-item"><span class="tab_title">更多实例...</span></a>
</div>
<div class="ax-break-line"></div>
<ul class="ax-tab-content">
<li>
<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-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-6">
<label class="ax-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><span>军事类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><span>人物志类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><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-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">
</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>
<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(https://www.jq22.com/img/cs/500x500-1.png),url(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="https://www.jq22.com/img/cs/500x500-3.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">
<div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
<input type="file">
</div>
</div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(https://www.jq22.com/img/cs/500x500-2.png),url(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>
</li>
<li>
<ul class="ax-menu ax-menu-light " id="menu01">
<li>
<a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">长安区</span></a></li>
<li><a href="###"><span class="ax-name">桥西区</span></a></li>
<li><a href="###"><span class="ax-name">新华区</span></a></li>
<li><a href="###"><span class="ax-name">裕华区</span></a></li>
<li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
</ul>
</li>
<li><a href="###"><span class="ax-name">邢台</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">桥西区</span></a></li>
<li><a href="###"><span class="ax-name">桥东区</span></a></li>
<li><a href="###"><span class="ax-name">沙河市</span></a></li>
<li><a href="###"><span class="ax-name">南宫市</span></a></li>
<li><a href="###"><span class="ax-name">邢台县</span></a></li>
</ul>
</li>
<li><a href="###"><span class="ax-name">邯郸</span></a></li>
<li><a href="###"><span class="ax-name">保定</span></a></li>
<li><a href="###"><span class="ax-name">衡水</span></a></li>
</ul>
</li>
<li>
<a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">成都</span></a></li>
<li><a href="###"><span class="ax-name">南充</span></a></li>
<li><a href="###"><span class="ax-name">绵阳</span></a></li>
</ul>
</li>
<li>
<a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">南宁</span></a></li>
<li><a href="###"><span class="ax-name">柳州</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="popbr">bottom-right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popb">bottom</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="popbl">bottom-left</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poprt">right-top</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center"></div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poplt">left-top</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="popr">right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="pops">直接显示</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="popl">left</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poprb">right-bottom</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popc">center</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poplb">left-bottom</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poptr">top-right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popt">top</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poptl">top-left</a>
</div>
</div>
</li>
<li>
<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>
<div class="ax-break"></div>
<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>
<div class="ax-break"></div>
<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>
</li>
<li>
<div class="ax-padding">
<div class="ax-grid ax-space-xxl">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-12">
<div class="ax-card-block">
<div class="ax-img">
<a href="###" class="ax-figure" style="background-image:url(https://www.jq22.com/img/cs/500x500-3.png),url(images/loading.gif);"></a>
</div>
<div class="ax-title">
<a hr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0