BootStrap--響應式設計

響應式佈局

　　響應式佈局的基本結構爲：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6">
        </div>
        <div class="col-lg-4 col-md-6">
        </div>
        <div class="col-lg-4 col-md-6">
        </div>
    </div>
</div>

　　柵格系統經過定義容器的大小，而後將容器分爲12等份調整內外邊距結合媒體查詢來實現

　　在柵格系統中能夠組合class來實現不一樣分辨率的適配

　　class="container"是最外層的容器提供了對齊方式

　　class="row"定義一個列容器

　　class="col-xx-n"定義一個列，xx表示了不一樣的分辨率，n表示當前列佔當前列容器的%

　　-lg-:在分辨率>1220px時生效

　　-md-:在分辨率>=992px時生效

　　-sm-:在分辨率>=768px時生效

　　-xs-:在分辯率小於768px時生效

　　假如咱們有這樣一個列：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    </div>
</div>

　　在咱們的屏幕分辨率在768px如下時col-xs-12的樣式起做用當前列佔容器的100%

　　在咱們的屏幕分辨率在1220px以上時col-lg-3的樣式起做用當前列佔容器的1/4

　　在咱們的屏幕分辨率在992px以上且在1220px如下時col-md-4的樣式起做用當前列佔容器的1/3

　　在咱們的屏幕分辨率在768px以上且在992px如下時col-sm-6的樣式起做用當前列佔容器的1/2

　　假如咱們此時屏幕的分辨率爲1300px此時col-sm-六、 col-md-4 、col-lg-3都是生效的此時就按照優先級的規則進行覆蓋了，樣式表的定義順序爲xs、sm、md、lg

　　能夠經過col-xx-offset-n進行向右列的偏移

　　能夠經過col-xx-push-n和col-xx-pull-n進行列移動push表示向右移動pull表示向左移動

　　假若有以下代碼：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        3
        </div>
    </div>
</div>

　　當處在超大屏幕時明顯右側的1/4沒有內容咱們能夠在row裏面的第三個div設置col-lg-offset-3的class來讓該元素向右移動1/4， 或者經過col-lg-push-3來實現