Bootstarp 基礎 柵格系統的使用

如果要使用柵格系統 那麼我們需要先把我們的東西放到一個容器之中 bootstarp已經爲我們實現定義好了

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

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
    </div>
</div>

柵格系統分12格 cod-someting-number 代表了具體佔幾格 而這個格子到底多大 依靠的是父container這個容器來的 普通的container是按照設備分辨率自動有一個大小 container-fluid則是默認全屏的一個寬度

1.列組合
在柵格系統的使用中 要注意的是 如果你設置了xs下的柵格爲6 那麼他無論是在什麼分辨率中都被劃分成container的一半 但是你設置了lg的柵格爲6 在小分辨率中是不會被繼承的 所以柵格具有移動優先的特點

2.列偏移

<div class="row">
        <div class="col-md-2 col-md-offset-3">col-md-2</div>
        <div class="col-md-2 col-md-offset-1">col-md-3</div>

列偏移按照的是他前邊的元素 如果沒有 就是container的左側邊

3.列嵌套

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">col-md-2</div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-4">1</div>
                <div class="col-md-4">2</div>
                <div class="col-md-4">3</div>
            </div>
        </div>
    </div>
</div>

4.列順序

<div class="row">
        <div class="col-md-2 col-md-push-4">1</div>
        <div class="col-md-2 col-md-pull-2">2</div>
    </div>

類似於偏移 但是這個無視旁邊的元素 可以造成重疊 注意 文檔方向從左到右 pull爲拉 push爲推

5.清除浮動

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-6">11232q3211 adsasdsadsadsadsadsdsdadsadsadasdsadsad</div>
        <div class="col-md-3 col-sm-6 col-xs-6">2</div>
            <div class="clearfix visible-sm visible-xs"></div>
        <div class="col-md-3 col-sm-6 col-xs-6">3</div>
        <div class="col-md-3 col-sm-6 col-xs-6">4</div>
    </div>
</div>

在受到影響的前面添加一個div visible代表在什麼分辨率下啓用