1.效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--日历控件的去掉了好像也可以-->
<title>注册页面</title>
<!--1.入门meta部分 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。-->
<!--initial-scale=1 是为了保证页面是流动式页面 user-scalable=no 禁止页面缩放功能-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap入门</title>
<!--2.引入 bootstrap.min.css-->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<!--3.引入jQuery库 必须在bootstrap库之前 建议使用1.x版本的-->
<script src="../js/jquery-1.11.3.min.js"></script>
<!--4.引入bootstrap库-->
<script src="../js/bootstrap.min.js"></script>
<!--日历控件的-->
<link rel="stylesheet" href="../css/bootstrapDatepickr-1.0.0.css">
<script src="../js/bootstrapDatepickr-1.0.0.js"></script>
<script>
$(document).ready(function() {
$("#calendar1").bootstrapDatepickr({date_format: "Y-m-d"});
});
</script>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<h2 align="center">注册页面</h2>
<form action="#" method="post" class="form-horizontal">
<!--1.账号-->
<div class="form-group">
<label class="col-md-3 control-label">账号：</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="请输入账号" />
</div>
<!--2.email-->
<label class="col-md-2 control-label">Email：</label>
<div class="col-md-2">
<input type="email" class="form-control" placeholder="请输入email" />
</div>
</div>
<div class="form-group">
<!--3.密码-->
<label class="col-md-3 control-label">密码：</label>
<div class="col-md-2">
<input type="password" class="form-control" placeholder="请输入密码"/>
</div>
<!--4.确认密码-->
<label class="col-md-2 control-label">确认密码：</label>
<div class="col-md-2">
<input type="password" class="form-control" placeholder="请再次输入密码"/>
</div>
</div>
<div class="form-group">
<!--4.姓名-->
<label class="col-md-3 control-label">姓名：</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="请输入姓名"/>
</div>
<!--5.年龄-->
<label class="col-md-2 control-label">年龄：</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="请输入年龄"/>
</div>
</div>
<div class="form-group">
<!--6.性别-->
<label class="col-md-3 control-label">性别：</label>
<div class="col-md-2">
<div class="radio">
<label>
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</label>
</div>
</div>
<!--7.爱好-->
<label class="col-md-2 control-label">爱好：</label>
<div class="col-md-2">
<div class="checkbox">
<label>
<input type="checkbox" name="habby" value="1" checked="checked"/>散步
<input type="checkbox" name="habby" value="2"/>爬山
<input type="checkbox" name="habby" value="3"/>读书
</label>
</div>
</div>
</div>
<div class="form-group">
<!--8. 下拉框-->
<label class="col-md-3 control-label">工作年限：</label>
<div class="col-md-2">
<select id="time" name="time" class="selectpicker show-tick form-control" data-live-search="false">
<option value="0">1年以下</option>
<option value="1">1--3年</option>
<option value="2">3--5年</option>
<option value="3">5年以上</option>
</select>
</div>
<!--9. 日历-->
<label class="col-md-2 control-label">出生年月：</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
<input type="text" id="calendar1" placeholder="请现在出生日期" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<!--10.个人近照-->
<label class="col-md-3 control-label">个人近照：</label>
<div class="col-md-2">
<input type="file" name="photo"/>
</div>
<!--11.身份证号码：-->
<label class="col-md-2 control-label">身份证号码：</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="请输入身份证号码"/>
</div>
</div>
<div class="form-group">
<!--12.重置-->
<div class="col-sm-offset-3 col-md-2">
<button type="reset" class="btn btn-default">重置</button>
</div>
<!--13.登录-->
<div class="col-sm-offset-2 col-md-2">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<!--分页-->
<div class="container ">
<nav aria-label="Page navigation" class="col-md-7 col-md-offset-4">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
3.注意点
（1） 注意引入bootstrap需要的js 及 css 还有日历那个需要的css 及 js
1468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
