亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

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

本章節(jié)我們將講解 Bootstrap 的網(wǎng)格系統(tǒng)（Grid System）。

Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會自動分為最多12列。

什么是網(wǎng)格(Grid)？

摘自維基百科：

在平面設計中，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用于打印設計中的設計布局和內(nèi)容結構。在網(wǎng)頁設計中，它是一種用于快速創(chuàng)建一致的布局和有效地使用 HTML 和 CSS 的方法。

簡單地說，網(wǎng)頁設計中的網(wǎng)格用于組織內(nèi)容，讓網(wǎng)站易于瀏覽，并降低用戶端的負載。

什么是 Bootstrap 網(wǎng)格系統(tǒng)（Grid System）？

Bootstrap 官方文檔中有關網(wǎng)格系統(tǒng)的描述：

Bootstrap 包含了一個響應式的、移動設備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設備或視口大小的增加而適當?shù)財U展到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。

讓我們來理解一下上面的語句。Bootstrap 3 是移動設備優(yōu)先的，在這個意義上，Bootstrap 代碼從小屏幕設備（比如移動設備、平板電腦）開始，然后擴展到大屏幕設備（比如筆記本電腦、臺式電腦）上的組件和網(wǎng)格。

移動設備優(yōu)先策略

  • 內(nèi)容

    • 決定什么是最重要的。

  • 布局

    • 優(yōu)先設計更小的寬度。

    • 基礎的 CSS 是移動設備優(yōu)先，媒體查詢是針對于平板電腦、臺式電腦。

  • 漸進增強

    • 隨著屏幕大小的增加而添加元素。

響應式網(wǎng)格系統(tǒng)隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會自動分為最多12列。

111111111111
444
48
66
12

Bootstrap 網(wǎng)格系統(tǒng)（Grid System）的工作原理

網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了 Bootstrap 網(wǎng)格系統(tǒng)是如何工作的：

  • 行必須放置在 .container class 內(nèi)，以便獲得適當?shù)膶R(alignment)和內(nèi)邊距(padding)。

  • 使用行來創(chuàng)建列的水平組。

  • 內(nèi)容應該放置在列內(nèi)，且唯有列可以是行的直接子元素。

  • 預定義的網(wǎng)格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類可用于更多語義布局。

  • 列通過內(nèi)邊距(padding)來創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過 .rows 上的外邊距(margin)取負，表示第一列和最后一列的行偏移。

  • 網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個可用的列來創(chuàng)建的。例如，要創(chuàng)建三個相等的列，則使用三個 .col-xs-4。

媒體查詢

媒體查詢是非常別致的"有條件的 CSS 規(guī)則"。它只適用于一些基于某些指定條件的 CSS。如果滿足那些條件，則應用相應的樣式。

Bootstrap 中的媒體查詢允許您基于視口大小移動、顯示并隱藏內(nèi)容。下面的媒體查詢在 LESS 文件中使用，用來創(chuàng)建 Bootstrap 網(wǎng)格系統(tǒng)中的關鍵的分界點閾值。

/* 超小設備（手機，小于 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */
/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒體查詢有兩個部分，先是一個設備規(guī)范，然后是一個大小規(guī)則。在上面的案例中，設置了下列的規(guī)則：

讓我們來看下面這行代碼：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

對于所有帶有 min-width: @screen-sm-min 的設備，如果屏幕的寬度小于 @screen-sm-max，則會進行一些處理。

網(wǎng)格選項

下表總結了 Bootstrap 網(wǎng)格系統(tǒng)如何跨多個設備工作：


超小設備手機（<768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）大型設備臺式電腦（≥1200px）
網(wǎng)格行為一直是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的
最大容器寬度None (auto)750px970px1170px
Class 前綴.col-xs-.col-sm-.col-md-.col-lg-
列數(shù)量和12121212
最大列寬Auto60px78px95px
間隙寬度30px
（一個列的每邊分別 15px）		30px
（一個列的每邊分別 15px）		30px
（一個列的每邊分別 15px）		30px
（一個列的每邊分別 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

基本的網(wǎng)格結構

下面是 Bootstrap 網(wǎng)格的基本結構：

<div>
   <div>
      <div></div>
      <div></div>      
   </div>
   <div>...</div>
</div>
<div>....

讓我們來看幾個簡單的網(wǎng)格示例：

響應式的列重置

以下示例包含了4個網(wǎng)格，但是我們在小設備瀏覽時無法確定網(wǎng)格顯示的位置。

為了解決這個問題，可以使用 .clearfix class和 響應式實用工具來解決，如下面示例所示：

在線示例

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 示例 - 響應式的列重置</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>讓我們一起坐在這里，祝福我們的愛人。</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>我為你祈禱，愿你永遠幸福我的工作和工作都是偶然的。我只有很小的勇氣，我要去實驗室實習這是一種后果。
         </p>
         <p>讓我們一起坐下來，祝福我們的朋友，祝福他們。
         </p>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>只要有一點點時間，就可以完成實習。
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>辛苦和痛苦，充滿活力，所以，具有一些偉大的長壽模。 到這些年來。
         </p>
      </div>
   </div>
</div>
</body>
</html>
測試看看 ?/?

瀏覽器上調(diào)整窗口大小查看變化，或在您手機上查看效果。

偏移列

偏移是一個用于更專業(yè)的布局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實現(xiàn)該效果。

為了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距(margin)增加 * 列，其中 * 范圍是從 1 到 11。

在下面的示例中，我們有 <div>..</div>，我們將使用 .col-md-offset-3 class 來居中這個 div。

在線示例

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 示例 - 偏移列</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <h1>Hello, world!</h1>
   <div class="row" >
      <div class="col-md-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>
   </div>
</div>
</body>
</html>
測試看看 ?/?

結果如下所示：

網(wǎng)格系統(tǒng)偏移列

嵌套列

為了在內(nèi)容中嵌套默認的網(wǎng)格，請?zhí)砑右粋€新的 .row，并在一個已有的 .col-md-* 列內(nèi)添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數(shù)不能超過12（其實，沒有要求你必須占滿12列）。

在下面的示例中，布局有兩個列，第二列被分為兩行四個盒子。

在線示例

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 示例 - 嵌套列</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <h1>Hello, world!</h1>
   <div class="row">
      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分為四個盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>
      </div>
   </div>
</div>
</body>
</html>
測試看看 ?/?

結果如下所示：

網(wǎng)格系統(tǒng)嵌套列

列排序

Bootstrap 網(wǎng)格系統(tǒng)另一個完美的特性，就是您可以很容易地以一種順序編寫列，然后以另一種順序顯示列。

您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內(nèi)置網(wǎng)格列的順序，其中 * 范圍是從 1 到 11。

在下面的示例中，我們有兩列布局，左列很窄，作為側(cè)邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

在線示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 示例 - 列排序</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <h1>Hello, world!</h1>
   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div>
</div>
</body>
</html>
測試看看 ?/?

結果如下所示：

網(wǎng)格系統(tǒng)排序列