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>