bootstrap中的Grid system詳解

本文轉載自查看原文 2016-10-28 16:57 3429 bootstrap

啦啦啦,都十月中旬啦,好快啊,這個月的多一半都過去了,然而我才寫第三篇隨筆,小穎得加油啦~~~

下面來看下小穎給大家分享的內容

1. .col-md-和.col-xs-

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bootstrap網格demo</title>
    <link rel="stylesheet" href="style/bootstrap.css">
    <style type="text/css">
        .bootstrap-body { margin-top: 100px;margin-left:50px;margin-right:50px; }
        .row>div{
            background-color: pink;
            border: 1px solid #cacaca;
        }
        .row-two>div{
            background-color: #cacaca;
            border: 1px solid red;
        }
    </style>
<body id='content'>
    <div class="bootstrap-body">
        <!-- 使用一組.col-md- *網格類，您可以創建一個基本網格系統，但是當頁面縮小到一定范圍時,網格就會出現平鋪現象。 將網格列放置在任何.row中。 -->
        <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
        </div>
        <!-- 不希望你的列簡單地堆疊在較小的設備？ 通過將.col-xs- * .col-md- *添加到列，可以使用額外的中小型設備網格類。  -->
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
        </div>
        <div class="row">
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
            <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</body>
</html>

頁面效果:

1378px下:

815px下:

通過上圖大家會發現:如果在單個行中放置超過12列，則每組額外列將作為一個單位包裝到新行上。

        <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 col-md-4</div>
        </div>

在這段代碼中大家看圖當頁面縮小到815px時,網格是以 .col-xs-12和.col-xs-6分割的,又因為 .col-xs-12 已經等於12列了,所以后面的那個 <div class="col-xs-6 col-md-4">.col-xs-6 col-md-4</div> 額外列將作為一個單位包裝到新行上。示例如下:

        <div class="row">
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
            <div class="col-xs-1 col-md-1">.col-xs-1 .col-md-1</div>
        </div>
        <!-- 如果在單個行中放置超過12列，則每組額外列將作為一個單位包裝到新行上。 -->
        <div class="row">
            <div class="col-xs-9">.col-xs-9</div>
            <div class="col-xs-4">
                .col-xs-4
                <br>Since 9 + 4 = 13 &gt; 12, 這個4列寬的div被包裝到一個新行上作為一個連續的單元.</div>
            <div class="col-xs-6">
                .col-xs-6
                <br>后續列將沿着新行繼續。</div>
        </div>

1378px下和815px下頁面效果一樣:

2. Responsive column resets(響應列重置)

        <!-- 有四層網格可用，你必然會遇到一些問題，在某些斷點，你的列不能清楚地正確，因為一個比另一個更高。 要解決這個問題，使用.clearfix和我們的響應實用程序類的組合。 -->
        <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>
            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-xs-block">當頁面縮小的一定程度才會出現的div</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>

頁面效果:

1378px下和815px下頁面效果一樣:

767px下:

當頁面縮小到767px時,網格按照.col-xs-6進行分割.

3.使用.col-md-offset- *類將列向右移動。

        <!-- 使用.col-md-offset- *類將列向右移動。 這些類將列的左邊距增加*列。 例如，.col-md-offset-4將.col-md-4移動到四列。 -->
        <div class="row">
            <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
            <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
            <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
                .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <!-- .col-sm-offset-0 -->
        <div class="row">
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">.col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0</div>
        </div>

頁面效果:

1378px下和815px下頁面效果一樣:

頁面中第三行的空白是因為: .col-md-offset-4 ,第四行的空白是因為: .col-md-offset-3 ,第五行的第一個空白是因為 .col-md-offset-3,第二個空白是因為哪一行只有 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>,后面沒有內容了,所以是空白的.

1197px下:

第二行的空白是因為頁面縮小后,它按照: <div class="col-md-5">.col-sm-6 .col-md-5 .col-lg-6</div>和<div class="col-md-5 col-md-offset-2"> .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0 </div>去進行網格分割的,因為col-md-offset-2所以中間會兩個網格的空白.

1117px下:

最后一行的.col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0之所以會出現1197px下和1117px下不一樣的原因是內容太長,如果我把哪一行的內容改為 .col-sm-4 ,同樣是在1117px下效果如下:

1042px下:

1042px下和1117px下效果的區別在於第二行 .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0 ,原理同上,只是因為內容太長.

991px下:

頁面縮小到991px后,第一行網格按 .col-sm-5 分割,第二行按 .col-sm-6分割,第三,四,五,六,七行,是因為使用一組.col-md- *網格類，您可以創建一個基本網格系統，但是當頁面縮小到一定范圍時,網格就會出現平鋪現象。將網格列放置在任何.row中。第八行網格按.col-sm-4進行分割.

719px下:

看圖后發現不希望你的列簡單地堆疊在較小的設備？通過將.col-xs- * .col-md- *添加到列，可以使用額外的中小型設備網格類。

4.Nesting columns (嵌套列)

        <!-- 要使用默認網格嵌套您的內容，請在現有.col-sm- *列中添加一個新的.row和.col-sm- *列。 嵌套行應該包含一組最多12個或更少的列（不需要使用所有12個可用列）。 -->
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
                    <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row row-two">
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                    <div class="col-xs-1 col-sm-1">Level 2: .col-xs-1 .col-sm-1</div>
                </div>
                <div class="row row-two">
                    <div class="col-xs-8 col-sm-6">Level 3: .col-xs-8 .col-sm-6</div>
                    <div class="col-xs-4 col-sm-6">Level 3: .col-xs-4 .col-sm-6</div>
                </div>
            </div>
        </div>

頁面效果:

1378px下:

Level 2: .col-xs-8 .col-sm-6 ,網格按.col-sm-6分割. Level 2:.col-xs-4 .col-sm-6 ,網格按.col-sm-6分割.

Level 3: .col-xs-8 .col-sm-6,網格按.col-sm-6分割. Level 3:.col-xs-4 .col-sm-6 ,網格按.col-sm-6分割.

700px下:

Level 2: .col-xs-8 .col-sm-6 ,網格按.col-xs-8分割. Level 2:.col-xs-4 .col-sm-6 ,網格按.col-xs-4分割.

Level 3: .col-xs-8 .col-sm-6,網格按.col-xs-8分割. Level 3:.col-xs-4 .col-sm-6 ,網格按.col-xs-4分割.

5.Column ordering(列排序)

        <!-- 使用.col-md-push- *和.col-md-pull- *修飾符類輕松更改內置網格列的順序。 -->
        <div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>

頁面效果:

1378px下:

991px以下都是這樣:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap3 Grid system原理及應用 Angular中ui-grid的使用詳解 Bootstrap 2.3.0自定Grid布局 Grid布局詳解 Extjs4 Grid詳解 selenium Grid詳解 grid布局詳解 css之Grid Layout詳解 Grid布局詳解 java中System.getProperty()方法詳解