close

如果container 是骨架,網格技巧是版面配置的靈魂,

因為他會把網頁依照你的分隔方式呈現內容,

在開始之前請先閱讀上一章Breakpoints 不然會看不懂喔~

 

起手勢:

先架出骨架container -> 再row出來

程式碼:

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

row的裡面就是放col屬性。

<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
 </div>

col 的其他屬性。

col-2 : 代表會column 會佔兩格。

col-sm : 當視窗到達變化的大小,到達變化點時,就會套用col的屬性,開始分隔。

還可以同時設定多個col 屬性: col-6 col-md-4,當視窗到達md這個大小時,就會套用col-md-4這個屬性
如果沒有到達,就會用col-6這一個屬性。

 

目前所提的都是基本性質,提到這就好~ 先消化一下。

 

arrow
arrow
    文章標籤
    Bootstrap 網格技巧 Grid
    全站熱搜

    阿駿 發表在 痞客邦 留言(0) 人氣()