bootstrap小试牛刀
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
作者：459756123@qq.com
时间：2016-08-06
描述：当前网页在 移动设备上，不可以 缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 基础 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!--需要一个头，导航-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container" id="divHeader">
<div class="navbar-header">
<a class="navbar-brand" style='margin: 10px 30px 0px 0px; width: 109px; height: 39px; ' href="index.html">
<span class="glyphicon glyphicon-home"></span>首页
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="showInfo.html" style=" font-weight: bold; margin-top: 5px;"> 查看已经登记信息</a>
</li>
<li>
<a href="#"><input type="button" class="btn btn-sm btn-danger" value="登陆" id="indexALogin" /></a>
</li>
<li>
<a href="#"><input type="button" class="btn btn-sm btn-danger" value="注册" /></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 100px;">
<!--
描述：当编写了class=row的时候，会将行分割为12列。
这是bootstrap的核心思想，叫做 栅格系统
-->
<div class="row">
<div class="col-lg-6 col-sm-12">
<img src="images/banner-wjb-1500_762e185.jpg" class="img-thumbnail"/>
</div>
<div class="col-lg-6 col-lg-12">
<form action="inputSuccess.html">
<table class="table table-bordered table-striped table-hover">
<tr>
<td>姓名：</td>
<td><input class="form-control" type="text"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" checked="checked"/>男
<input type="radio" />女
</td>
</tr>
<tr>
<td>联系方式：</td>
<td><input class="form-control" type="text"/></td>
</tr>
<tr>
<td>出生日期：</td>
<td><input class="form-control" type="text"/></td>
</tr>
<tr>
<td>家庭住址：</td>
<td><input class="form-control" type="text"/></td>
</tr>
<tr>
<td>学历：</td>
<td><input class="form-control" type="text"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input class="btn btn-block btn-success" type="submit" value="提交"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
