标签：用户 value 学习 笔记 table 今日 普通用户 placeholder class
利用AdminLTE搭建框架，编写前段页面
登录页面
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="all-admin-index.html"><b></b>后台管理系统</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">登录系统</p>
<form action="all-admin-index.html" method="get">
<div class="form-group has-feedback">
<input type="userId" class="form-control" placeholder="用户名">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label><input type="checkbox"> 下次自动登录</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat" >登录</button>
</div>
<!-- /.col -->
</div>
</form>
<a href="#">忘记密码</a><br>
</div>
用户添加
<div class="panel panel-default">
<div class="panel-heading">用户信息</div>
<div class="row data-type">
<div class="col-md-2 title">用户名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="username"
placeholder="用户名称" value="">
</div>
<div class="col-md-2 title">密码</div>
<div class="col-md-4 data">
<input type="password" class="form-control" name="password"
placeholder="密码" value="">
</div>
<div class="col-md-2 title">邮箱</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="email"
placeholder="邮箱" value="">
</div>
<div class="col-md-2 title">联系电话</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="phoneNum"
placeholder="联系电话" value="">
</div>
<div class="col-md-2 title">用户状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="status">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
</div>
</div>
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索">
<section class="content-header">
<h1>
用户管理 <small>全部用户</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">全部用户</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm" placeholder="搜索">
</div>
</div>
角色添加
<section class="content"> <input type="hidden" name="userId"
value="1">
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">角色名称</th>
<th class="sorting">角色描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox" value="1">
</td>
<td>1</td>
<td>VV</td>
<div class="tab-pane" id="tab-select">
</div>
</div>
</tr>
<div class="row data-type">
<div class="col-md-2 title">角色设置</div>
<div class="col-md-4 data">
<select class="form-control">
<option>超级管理员</option>
<option>管理员</option>
<option>普通用户</option>
<option>只读用户</option>
</select>
</div>
<tr>
<td><input name="ids" type="checkbox" value="2">
</td>
<td>2</td>
<td>user1</td>
<td>普通用户</td>
</tr>
<tr>
<td><input name="ids" type="checkbox" value="3">
</td>
<td>3</td>
<td>user2</td>
<td>普通用户</td>
</tr>
<tr>
<td><input name="ids" type="checkbox" value="4">
</td>
<td>4</td>
<td>guest</td>
<td>测试帐号</td>
</tr>
</tbody>
</table>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
标签：用户,value,学习,笔记,table,今日,普通用户,placeholder,class 来源： https://www.cnblogs.com/weishui/p/14185026.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。