1、复习总结:全局CSS样式:
按钮 .btn .btn-default
图片 .img-rounded .img-circle .img-thumbnail .img-responsive
文本 .text-五种 .bg-五种 .text-left/right/center/justify
排版和代码 .list-unstyled .list-inline
表格 .table .table-bordered .table-responsive .table-striped .table-hover
栅格布局系统
.container .container-fluild
.row
.col-xs-* .col-sm-* .col-md-* .col-lg-*
.hidden-xs .hidden-sm .hidden-md .hidden-lg
2、列的偏移问题(offset)
.col-xs-offset-1~.col-xs-offset-12 在lg/md/sm/xs屏幕下偏移
.col-sm-offset-1~.col-sm-offset-12 在lg/md/sm屏幕下偏移
.col-md-offset-1~.col-md-offset-12 在lg/md屏幕下偏移
.col-lg-offset-1~.col-lg-offset-12 在lg屏幕下偏移
3、全局CSS样式——表单——次重点&难点
Bootstrap中的表单分为三种:
(1)默认表单
<form>
<div class="form-group"> 表单组(增加组之间距离)
<label class="control-label"></label> 控件标签
<input class="form-control"> 表单控件(渐变背景等等)
<span class="help-block"></span> 帮助块(字体颜色变淡字体变小)
</div>
</form>
例:<h2>1.默认表单</h2>
<form action="">
<div class="form-group">
<label class="control-label" for="uname">用户名:</label>
<input class="form-control" id="uname" type="text">
<span class="help-block">用户名长度在6~12位之间</span>
</div>
<div class="form-group">
<label class="control-label" for="upwd">密码:</label>
<input class="form-control" id="upwd" type="password">
<span class="help-block">密码中必须包含数字、字母</span>
</div>
<!--Bootstrap编码规范中指定:单选/复选按钮要放在label中-->
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用条款
</label>
</div>
<input class="btn btn-success" type="button" value="提交数据">
<input class="btn btn-danger" type="button" value="清空重填">
</form>
(2)行内表单
<form class="form-inline">
</form>
例:<h2>2.行内表单(inline)</h2>
<form class="form-inline" action="">
<div class="form-group">
<label class="control-label" for="uname2">用户名:</label>
<input class=