Bootstrap 網(wǎng)格系統(tǒng)

2018-02-27 18:05 更新

網(wǎng)格系統(tǒng)允許我們正確地布局我們網(wǎng)站的內(nèi)容。

它將屏幕劃分為多個行和列，可用于創(chuàng)建各種類型的布局。

一旦我們定義了行和列，我們可以在其中放置HTML元素。

Bootstrap的網(wǎng)格系統(tǒng)將屏幕劃分為列 - 每行最多12個。

列寬根據(jù)屏幕的大小而變化。因此，Bootstrap的網(wǎng)格系統(tǒng)是響應(yīng)式的，因為當(dāng)瀏覽器窗口的大小改變時，列動態(tài)地調(diào)整大小。

你可以創(chuàng)建無限數(shù)量的行。這些行和列的交集形成了一個矩形網(wǎng)格，以包含網(wǎng)站的內(nèi)容。

列類

Twitter Bootstrap 3具有響應(yīng)式移動第一流體網(wǎng)格系統(tǒng)，隨著設(shè)備或視口大小的增加，可適當(dāng)放大到12列。

Bootstrap 3有預(yù)定義的網(wǎng)格類，可以快速為不同類型的設(shè)備，如手機(jī)、平板電腦、臺式機(jī)等制作網(wǎng)格布局。

我們可以使用 .col-xs- 類來為超小型設(shè)備，如手機(jī)，創(chuàng)建網(wǎng)格列。對于像平板電腦這樣的小屏幕設(shè)備，使用 .col-sm- 。對中等大小的設(shè)備（如臺式機(jī)）使用 .col-md- 類，對于大型桌面顯示器使用.col-lg- 。

下表總結(jié)了新網(wǎng)格系統(tǒng)的一些關(guān)鍵特性。

Bootstrap 3網(wǎng)格系統(tǒng)特點 超小型設(shè)備
手機(jī)（<768px）		 小型設(shè)備
平板（>= 768px）		 中型設(shè)備
臺式機(jī)（>= 992px）		 大型設(shè)備
大桌面顯示器（>= 1200px）
container最大寬度 無（自動） 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
最大列寬 自動 ~62px ~81px ~97px
槽（gutter）寬 30px（每列左右均勻15px）

以下代碼顯示如何使用 col-md- 類。

<div class="container">
  <div class="row">
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 2</p></div>
    <div class="col-md-4"><p>Box 3</p></div>
    <div class="col-md-4"><p>Box 4</p></div>
    <div class="col-md-4"><p>Box 5</p></div>
    <div class="col-md-4"><p>Box 6</p></div>
    <div class="col-md-4"><p>Box 7</p></div>
    <div class="col-md-4"><p>Box 8</p></div>
    <div class="col-md-4"><p>Box 9</p></div>
    <div class="col-md-4"><p>Box 10</p></div>
    <div class="col-md-4"><p>Box 11</p></div>
    <div class="col-md-4"><p>Box 12</p></div>
  </div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例子

以下代碼顯示了如何使用.clearfix類和響應(yīng)實用程序類。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

默認(rèn)網(wǎng)格系統(tǒng)有12列，我們在每第三次出現(xiàn)后清除列。

用.visible-md-block 使.clearfix 使類僅在中等大小的設(shè)備上有效，并且隱藏在其他設(shè)備上。

定制各種尺寸設(shè)備

自定義平板電腦的布局，將內(nèi)容呈現(xiàn)為2x6網(wǎng)格（即2列和6行），在每個列上添加.col-sm-6類。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例3

為小型設(shè)備添加清除浮動，我們的最終代碼是：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例2

自定義大型設(shè)備的布局，如大型桌面顯示器。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

container

Bootstrap建議我們應(yīng)該把所有的行和列放在container中，以確保正確對齊和填充。

在Bootstrap中有兩種類型的容器類：container和container-fluid。

前者在瀏覽器窗口中創(chuàng)建一個固定寬度的容器，而后者形成全寬度流體容器。

固定寬度容器的樣式顯示在屏幕的中心，省略了兩側(cè)的額外空間。因此，將所有內(nèi)容包裝在容器中是一個好的做法。

我們將在我們的演示中使用固定寬度的容器。

<div class="container"></div>

接下來，我們將在容器內(nèi)創(chuàng)建一行。一旦定義了行，我們就可以開始創(chuàng)建列。Bootstrap有一個用于創(chuàng)建行的類row：

<div class="container">
    <div class="row">
    </div>
</div>

你可以創(chuàng)建無限數(shù)量的行，但它們必須放置在容器中。為了獲得更好的結(jié)果，建議使用一個包含所有行的單個容器。

在Bootstrap中，通過指定12個可用Bootstrap列中你希望跨越的那些來創(chuàng)建列。

假設(shè)我們只想有一個列。它應(yīng)該跨越所有12個可用Bootstrap列。為此，我們將使用col-xs-12 類，其中數(shù)字12指定要跨越的列的數(shù)量。

網(wǎng)格系統(tǒng)的布局

為了在一行中創(chuàng)建兩個等寬的列，我們使用類 col-xs-6 。 這告訴Bootstrap，我們需要2個跨越6個Bootstrap列的列，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
  </body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號