99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

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

2018-02-27 18:05 更新

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

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

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

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

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

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

列類

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

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

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

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

Bootstrap 3網(wǎng)格系統(tǒng)特點(diǎn) 超小型設(shè)備
手機(jī)（<768px）		 小型設(shè)備
平板（>= 768px）		 中型設(shè)備
臺(tái)式機(jī)（>= 992px）		 大型設(shè)備
大桌面顯示器（>= 1200px）
container最大寬度 無(wú)（自動(dòng)） 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
最大列寬 自動(dòng) ~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)實(shí)用程序類。

<!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列，我們?cè)诿康谌纬霈F(xiàn)后清除列。

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

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

自定義平板電腦的布局，將內(nèi)容呈現(xiàn)為2x6網(wǎng)格（即2列和6行），在每個(gè)列上添加.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è)備添加清除浮動(dòng)，我們的最終代碼是：

<!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中，以確保正確對(duì)齊和填充。

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

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

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

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

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

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

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

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

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

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

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

為了在一行中創(chuàng)建兩個(gè)等寬的列，我們使用類 col-xs-6 。 這告訴Bootstrap，我們需要2個(gè)跨越6個(gè)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)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)