線上書籍

Home

Groundwork CSS

版面布局:採用「幾分之幾」的方式 <div class="row"> <div class="one thirds">1/3</div> <div class="two third">2/3</div> </div> 常用幾分之幾:
  • 1/2: one half
  • 1/3: one third
  • 2/3: two thirds
  • 1/4: one fourth
  • 3/4: three fourths
  • 1/5: one fifth
  • 4/5: four fifths
  • 1/6: one sixth
  • 5/6: five sixths
  • 1/7: one seventh
  • 6/7: six sevenths
  • 1/8: one eighth
  • 7/8: seven eighths
  • 1/9: one ninth
  • 8/9: eight ninth
  • 1/10: one tenth
  • 9/10: nine tenth
  • 1/11:one eleventh
  • 10/11:ten elevenths
  • 1/12: one twelfth
  • 11/12: eleven twelfths
強制手機格線(加一個 mobile 在分子和分母中間),

所謂「強制」指的就是:左右分就是左右分,即使螢幕縮小也不會變成上下分。

<div class="row"> <div class="one mobile half">1/2</div> <div class="one mobile half">1/2</div> </div> 強制平板格線(加一個 small-tablet 在分子和分母中間) <div class="row"> <div class="one small-tablet half">1/2</div> <div class="one small-tablet half">1/2</div> </div> 綜合起來: <div class="row"> <div class="two thirds">Normal</div> <div class="one third">Normal</div> </div> <div class="row"> <div class="two small-tablet thirds">Small Tablet</div> <div class="one small-tablet third">Small Tablet</div> </div> <div class="row"> <div class="two mobile thirds">Mobile</div> <div class="one mobile third">Mobile</div> </div> 自動邊距

在任何的class後面補上padded,即可替該段落加上邊距,非常彈性。

自動重排
  • 大螢幕排列時不按照原始碼順序,而是用文字描述其左右位置。
  • 小螢幕則不管文字描述,直接按照原先的原始碼先後順序來上下排列。
  • 文字直接加在「幾分之幾」後面,格式為『往哪個方向-移幾格』,例如 left-one、right-five...
<div class="row"> <div class="three eighths right-five">3/8(大螢幕水平第三格,小螢幕垂直第一格)</div> <div class="two eighths left-three">2/8(大螢幕水平第一格,小螢幕垂直第二格)</div> <div class="three eighths left-three">3/8(大螢幕水平第二格,小螢幕垂直第三格)</div> </div> 置中(加一個 centered 在分子和分母中間) <div class="row"> <div class="one centered mobile third">1/3</div> </div> 往右偏移(加一個 skip-N(幾格)在分母後面)

只能往右偏移,不能往左偏移

<div class="row"> <div class="ten mobile twelfths skip-two">10/12(左邊會空兩格)</div> </div>