這裏我們討論的是網格係統

什麼是網格??

網格是一種二維結構，由一係列相交的直線(垂直、水平)線組成，用於平麵設計中構造材料。在印刷設計中，它通常用於創建布局和內容組織。這是一種非常有效的方法，在網頁設計中快速有效地使用HTML和CSS創建一致的布局。

簡單地說，網格在網頁設計中組織和結構內容，使網頁更容易掃描，並將用戶的認知壓力降到最低。

什麼是引導網格係統??

根據Bootstrap網格係統的官方文檔，

Bootstrap中的流體網格架構首先是響應性的和可移動的，隨著設備或視口大小的增長，可擴展到12列。它附帶了用於快速布局的預定義類和用於創建更多語義布局的強mixins。

讓我們仔細看看上麵的語句。Bootstrap 3是移動優先的，因為它的代碼首先針對移動設備和平板電腦等小屏幕，然後再為筆記本電腦和台式機等大屏幕“擴展”組件和網格。

移動第一個策略:

內容:決定什麼對你來說是最重要的。

• 布局:首先，減小寬度的設計。
• 基本CSS首先處理移動設備，其次是平板電腦和台式機的媒體查詢。

漸進增強:隨著屏幕大小的增長，添加更多的項目。

自舉網格係統的工作原理:

網格係統用於通過按行和列的順序排列您的信息來創建頁麵布局。Bootstrap網格係統的工作原理如下:

• 要進行適當的對齊和填充，行必須放在.container類中。
• 要製作水平的列組，請使用行。
• 隻有列可以是行的直接子節點，內容應該放在列中。
• 網格布局可以很容易地使用預定義的網格類創建，例如。行and.col-xs-4。對於更多的語義布局，可以使用更少的mixins。
• 列中的填充會產生溝槽(列內容之間的間隙)。消極的利潤率。Rows用於偏移第一列和最後一列的行填充。
• 網格列是通過在總共12個列中選擇您想要跨出的可用列的數量來生成的。例如，三個相等的列需要3。col-xs-4。

媒體查詢:

“媒體查詢”這個詞是“條件CSS規則”的一種複雜說法。它隻是根據一組環境向頁麵添加CSS。如果滿足某些條件，則應用該樣式。

使用Bootstrap的媒體查詢，您可以根據視口大小移動、顯示和隱藏內容。為了在Bootstrap網格係統中創建主要斷點，在LESS文件中使用了以下媒體查詢。

/*額外的小設備(手機，小於768px) *//*沒有媒體查詢，因為這是Bootstrap的默認設置*//*小設備(平板電腦，768px及以上)*/@媒體(min-width: @screen-sm-min){…} /*介質設備(桌麵，992px及以上)*/@media (min-width: @screen-md-min){…｝

/*大型設備(大型桌麵，1200px及以上)*/@media (min-width: @screen-lg-min){…｝

它們偶爾會被擴展為添加一個最大寬度，以將CSS限製在更少的設備上。

@media (max-width: @screen-xs-max){…考慮以下行:對於所有設備，無論類型，min-width: @screen-sm-min如果屏幕寬度縮小到@screen-sm-max以下，則采取措施。-width: @screen-sm-max){…} @media (min-width: @screen-md-min)和(max-width: @screen-md-max){…} @media (min-width: @screen-lg-min){…｝

設備規格和大小規則是媒體查詢的兩個部分。在上麵的例子中，應用了以下規則:

考慮下麵這句話:

@media (min-width: @screen-sm-min)和(max-width: @screen-sm-max){…｝

對於所有設備，無論其類型，min-width: @screen-sm-min如果屏幕寬度縮小到@screen-sm-max以下，請采取相應措施。

網格選項:

下表總結了Bootstrap網格係統如何跨各種設備工作。

基本的網格結構:

< div class = "容器" > < div class = "行" > < divclass =“col - * - *”> < / div > < divclass =“col - * - *”> < / div > < / div > < div class = "行" >…