四川时时彩开奖走势图
·您當前的位置:主頁 > 技術教程 >

什么是 Bootstrap 網格系統(Grid System)?

時間:2019-02-11 17:46Bootstrap
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統,可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用于簡單的布局選項的預定義類,也包含了用于生成更多語義布局的功能強大的混合類。

什么是 Bootstrap 網格系統(Grid System)?

Bootstrap 官方文檔中有關網格系統的描述:

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統,可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用于簡單的布局選項的預定義類,也包含了用于生成更多語義布局的功能強大的混合類。

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

移動設備優先策略

  • 內容
    • 決定什么是最重要的。
  • 布局
    • 優先設計更小的寬度。
    • 基礎的 CSS 是移動設備優先,媒體查詢是針對于平板電腦、臺式電腦。
  • 漸進增強
    • 隨著屏幕大小的增加而添加元素。

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

Bootstrap 網格系統(Grid System)的工作原理

網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的:

  • 行必須放置在 .container class 內,以便獲得適當的對齊(alignment)和內邊距(padding)。
  • 使用行來創建列的水平組。
  • 內容應該放置在列內,且唯有列可以是行的直接子元素。
  • 預定義的網格類,比如 .row  .col-xs-4,可用于快速創建網格布局。LESS 混合類可用于更多語義布局。
  • 列通過內邊距(padding)來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距(margin)取負,表示第一列和最后一列的行偏移。
  • 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如,要創建三個相等的列,則使用三個 .col-xs-4

 

熱門文章推薦

請稍候...
四川时时彩开奖走势图 山西快乐十分遗漏 交流群三分pk10精准在线计划 组选包胆赢的机会大吗 奔驰宝马游戏破解版k 自贡川南农贸批发市场赚钱 速报比分直播 九亿平台app 捕鱼大师安卓版下载k 浙江快乐12选5预测 3d网游赚钱门路