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">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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