2016年5月29日晚上（传智Bootstrap笔记五（表单2））
一、总表单实例
<body style="padding:50px;background-color:#ccc;">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 control-label">用户名：</label>
<div class="col-md-10">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">密 码：</label>
<div class="col-md-10">
<input type="text" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="inputfile">文件输入:</label>
<div class="col-md-10">
<input type="file" id="inputfile" >
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">兴趣爱好：</label>
<div class="col-md-10">
<label class="checkbox-inline"><input type="checkbox" >画画</label>
<label class="checkbox-inline"><input type="checkbox" >体育</label>
<label class="checkbox-inline"><input type="checkbox" >唱歌</label>
<label class="checkbox-inline"><input type="checkbox" >美术</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">学历：</label>
<div class="col-md-10">
<label class="radio-inline"><input type="radio" >初中</label>
<label class="radio-inline"><input type="radio" >高中</label>
<label class="radio-inline"><input type="radio" >大学</label>
<label class="radio-inline"><input type="radio" >硕士</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">个人简介：</label>
<div class="col-md-10">
<textarea class="form-control" rows="5" placeholder="请输入你的个人信息："></textarea>
</div>
</div>
<div class="col-md-10 col-md-offset-2">
<button type="submit" class="btn btn-danger ">提交</button>
</div>
</form>
</body>
效果图如下：
今天就到这里啦；明天的任务是：
任务1、把这一部分再系统性的过一遍；
任务2：把第三天的课程看完，看看还有没有第四天的；有的话找到，没有的话把下面的自己看完；
3、很重要的任务：师兄给的任务；
用Bootstrap UI框架先自己画一个小页面出来，看效果怎么样？
