Bootstrap使用笔记

响应式布局：　　根据浏览设备的（分辨率）不同来进行不同的布局和内容展现；通过媒体查询 Media Query实现，@media

 

Chrome调试器盒子模型的颜色：

　　content　　　　浅蓝色

　　padding　　　  浅绿色

　　border　　　　 浅黄色

　　margin　　　　浅棕色

 

 

布局容器：　　　　　所有元素的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>