<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 页面标题</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;background-color: #ccc;">
<div class="container" style="padding:50px;background-color:#fff;">
<form class="form-horizontal"><!-- 表单中的栅格系统不用row 而是用form-horizontal:水平排列的表单 加到form元素中 -->
<div class="form-group"> <!-- form-group代表分组的意思 把label与input分成一组 -->
<label class="col-md-2 control-label" for="username">用户名:</label> <!--control-label控制label与input之间的距离 for的作用是将username与input中的username绑定在一起,你正在点击用户名的时候,input输入框获得焦点 -->
<div class="col-md-4"><!-- 加div进行设置input的栅格 -->
<input type="text" id="username" class="form-control" placeholder="请输入用户名" maxlength="30"> <!-- form-control 控制input输入框的显示 -->
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">密码:</label>
<div class="col-md-4">
<input type="password" id="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">上次图片:</label>
<div class="col-md-10">
<input type="file">
</div>
<p class="help-block">上传图片类型:xxxxx</p> <!-- help-block 帮助信息以块的方式显示 与file之间的距离发生变化 -->
</div>
<div class="form-group">
<label class="col-md-2 control-label">兴趣爱好:</label>
<div class="col-md-10"> <!-- class="checkbox"把一组的复选框放在一起 -->
<label class="checkbox-inline"><input type="checkbox" value="画画">画画</label><!--checkbox-inline分组显示 -->
<label class="checkbox-inline"><input type="checkbox" value="玩游戏">玩游戏</label>
<label class="checkbox-inline"><input type="checkbox" value="听歌">听歌</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">学历:</label>
<div class="col-md-10"> <!-- class="radio" checkbox把一组的复选框放在一起 -->
<label class="radio-inline"><input type="radio" value="画画">本科</label><!--checkbox-inline分组显示 -->
<label class="radio-inline"><input type="radio" value="玩游戏">研究生</label>
<label class="radio-inline"><input type="radio" value="听歌">博士</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="resume">个人简历:</label>
<div class="col-md-4">
<textarea rows="5" class="form-control" id="resume" placeholder="请输入您的信息"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-2 ">
<button class=" btn btn-success btn-block">提交表单</button>
</div>
<div class="col-md-2 col-md-offset-1 ">
<button class=" btn btn-success btn-block" >取消</button>
</div>
</div>
<!--<div class="col-md-offset-2 col-md-2">-->
<!--<button class=" btn btn-success ">提交表单</button>-->
<!--</div>-->
</form>
</div>
</body>
</html>