Bootstrap Grid System 自適應PC、平板、手機等眾多裝置

最後更新於 2021 年 6 月 4 日

  最近朋友接到一個任務是要求將網站改成自適應,就是當你使用手機和使用電腦兩種不同解析度的設備時,看到的畫面排版是相同的。其實有很多種辦法可以解決,但是我第一個想到的是Bootstrap

  Bootstrap的網格系統(Grid System)使用Row、Column來佈局並將寬度切為12等份,你可以自行分配這12等份,非常靈活的布局排版也是Bootstrap的眾多亮點之一。

如何使用

非常簡單,引入bootstrap的css之後如下方程式碼所示:

20200413151840 Bootstrap Grid System 自適應PC、平板、手機等眾多裝置
<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

上面的例子使用我們的預設Grid Class在小型、中型、大型、和超大型設備上建立了三個等寬的欄位。通過父類 .container 使這些欄位於頁面中心。

規則

  • Containers 提供對你的網站內容定新的方式。對於固定寬度使用.container,對於滿版寬度使用.container-fluid
  • class的結構依序為:.container(固定寬度) -> .container-fluid(滿版) -> .row -> .col
  • 基本上一個 Row 最多放置 12 個 Column,若有一個 Row 超過 12 個 Column,則會將多出來的斷行顯示;假設要將一列分為等寬的 3 等份,可寫成.col-4
  • Grid Class 分為.col-.col-sm-.col-md-.col-lg-.col-xl-,假設使用 .col-md-* 且未設定.col-lg-.col-xl-就會影響到≧768px的所有設備;
    意即,若只設定.col- 則所有大小的設備都會呈現一樣的布局。
20200413153045 Bootstrap Grid System 自適應PC、平板、手機等眾多裝置
Grid options

自適應

當我希望在手機、平板裝置上將一列分為兩個等寬欄位,唯獨電腦上是2:1分,那可以這麼寫:

<div class="container-fluid">
  <div class="row">
    <div class="col-6 col-xl-8 bg-warning">1</div>
    <div class="col-6 col-xl-4 bg-primary">2</div>
  </div>
</div>

使用 iPhone X(375 x 812) 預覽是1:1↓

1HTi8UV Bootstrap Grid System 自適應PC、平板、手機等眾多裝置

使用 iPad(768 x 1024) 預覽是1:1↓

jaYi7sF Bootstrap Grid System 自適應PC、平板、手機等眾多裝置

使用電腦 (1920 x 1080) 預覽是2:1↓

DG6cPyV Bootstrap Grid System 自適應PC、平板、手機等眾多裝置

總而言之,Bootstrap的Grid System有很多種排版和布局的方法,只有你想不到,沒有你做不到的。

延伸閱讀

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論