响应式布局: 根据浏览设备的(分辨率)不同来进行不同的布局和内容展现;通过媒体查询 Media Query实现,@media
Chrome调试器盒子模型的颜色:
content 浅蓝色
padding 浅绿色
border 浅黄色
margin 浅棕色
![](https://images0.cnblogs.com/blog2015/637387/201503/311050547178619.jpg)
布局容器: 所有元素的box-sizing均为border-box的盒子模型:宽度包括border、padding、content
container 固定宽度,左右padding为15px;
container-fluid 占据全部宽度
row 左右margin为-15px,负值抵消container的padding,这样左右宽度各增加15px;
底部margin为20px(但是左右margin没有包括在内)
col-md-* 全部padding为15px,创建列之间的间隔gutter;
col-md-offset-* 列偏移
col-md-pull-* 列排序
col-md-push-*
对齐: text-left text-center text-right
大小: text-lowercase text-uppercase text-capitalize(首字母大写)
列表: list-unstyled list-inline (内联:置于同一行)
表格:
table padding为8px,水平分割线;
table-striped 斑马条纹样式;
table-bordered 每个单元格增加边框
table-hover 行响应
table-condensed 紧缩表格:padding为5px;
状态: info success warning danger active
表单:
form-control form元素宽度:100%;
form-group 包裹:label和form元素;margin-bottom为15px;
form-horizontal 对control-label的控制:居右;
校验: has-success has-warning has-error
浮动: pull-left pull-right
.form-horizontal 实现label与control的水平布局,可以结合栅格类(.row .col-sm-12)来实现多列水平布局;
.form-horizontal .control-label结合实现了右对齐(text-align: right)
<form class="search-form form-horizontal"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label for="contract-id" class="col-sm-5 control-label">主合同编号:</label> <div class="col-sm-7"> <input id="contract-number" class="form-control" name="contractVO.contractNumber"> </div> </div> </div>
...
</div> </form>