初學 Bootstrap 柵格系統

ㅤㅤ發表於2018-10-22
boot

file
在研究柵格系統,需要藉助谷歌瀏覽器中的裝置模式這個功能.

當螢幕寬度在[0,768)區間中,col-xs-*起作用;此時,.container的寬度是自動的,總的寬度(算上邊框)就是螢幕的寬度.
當螢幕寬度在[768,992)區間中,col-sm-*起作用;此時,.container的寬度是固定的750 px(算上邊框).
當螢幕寬度[992,1200),col-md-*起作用;此時,.container的寬度是固定的970 px(算上邊框).
當螢幕寬度[1200,+∞),col-lg-*起作用;此時,.container的寬度是固定的1170 px(算上邊框).
下面使螢幕寬度由小變大,進行5個測試.

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

1.使螢幕寬度為767,此時col-xs-*起作用;57分,這裡谷歌瀏覽器的裝置模式不起作用了,就直接縮放網頁來測試.
file
2.使螢幕寬度為991,此時col-sm-*起作用;66分,沒毛病.
file
3.使螢幕寬度為992此時col-md-*起作用;48分.
file
4.使螢幕寬度為1199,此時還是col-md-*起作用;還是48分.
file
5.使螢幕寬度為1201,此時是col-lg-*起作用;66分.
file

把上面的.container改成.container-fluid之後,無論螢幕寬度是多少,div的寬度總是和螢幕寬度一致,也就是變成了100%的寬度.

那麼假設只設定了col-md-*,當螢幕寬度超過1119,會怎樣?驗證一下.

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

file
從上圖可以看出,依然是48分,大概意思是大的相容小的,也就是當螢幕寬度在[1200,+∞)區間內時,col-md-*依然適應;不過要注意,此時.container的寬度變寬了,變成了上文提到的1170 px(算上邊框).

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-2">col-md-6 col-md-offset-2</div>
    </div>
</div>

file
從上圖看到,.col-md-6向右移動了2格,這個比較好理解.

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

file
從上圖看出,左邊的8格又裝進了1個行,該行中有2個列,每列佔6格.

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4 原樣</div>
        <div class="col-md-3">col-md-3 原樣</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-8">col-md-4 向右推了8格</div>
        <div class="col-md-3 col-md-pull-4">col-md-3 向左拉了4格</div>
    </div>
</div>

file
那麼結論就是,col-*-push-*和col-*-pull-*比col-*-offset-*更靈活.

先看一個基本的例子.

<div class="row">
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>

file
上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,程式碼中有4列,每列佔6格,所以自動排成了2行,也就是後面2列被擠到了第2行;下面把螢幕寬度放寬,看看結果.
file
上圖中,網頁寬度是768 px,屬於小螢幕,此時col-sm-*起作用,程式碼中有4列,每列佔3格,所以不出意外的排成了1行.

但是如果將文字加多,會發生意外.

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 測試文字測試文字測試文字測試文字測試文字測試文字</div>
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>

file
在上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,由於第1列中的文字比較多,導致第1列的高度比其他列要高,所以在排的時候,第3列排到了第2列下方(我們想要的是第3列排到了第1列下方),這種情況需要使用.clearfix來清除浮動,修改一下程式碼.

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 測試文字測試文字測試文字測試文字測試文字測試文字</div>
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>

file
在上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,由於加入了<div class="clearfix visible-xs"></div>,第3列排到了第1列下方,這是我們想要的結果;.visible-xs在超小螢幕起作用.

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章