Bootstrap格線系統

中文說明手冊

結構

Bootstrap的格線系統,把寬度切成12分,用橫向的row裝縱向的col,指定每個col佔12分長的多少分。

尺寸關鍵字

  • xs:超小螢幕 < 768px
  • sm:小螢幕 > 768px
  • md:中螢幕 > 992px
  • lg:大螢幕 > 1200px
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-lg-6.col-md-7.col-sm-4
 .col-lg-6.col-md-5.col-sm-8

//用row包覆column
//col可以向上繼承,無法向下繼承
//只指定lg → 不會套用到xs
//只指定xs → 可以套用到lg

顯示與隱藏

指定col在特定元素下顯示或隱藏

  • visible-尺寸:只在該尺寸顯示
  • hidden-尺寸:只在該尺寸隱藏
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-xs-12.visible-xs
  h3 XS(超小螢幕<768px)
 .col-xs-12.visible-sm
  h3 SM(小螢幕>768px)
 .col-xs-12.visible-md
  h3 MD(中螢幕>992px)
 .col-xs-12.visible-lg
  h3 LG(大螢幕>1200px)

偏移

col-尺寸-offset-欄位數:指定左側向右偏移的大小

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.row
 .col-sm-8.col-sm-offset-4
  h3 偏移的區塊
  p 使用col-尺寸-offset-欄位數來指定左側偏移的大小

Display

CODEPEN

Leave a Reply

Your email address will not be published. Required fields are marked *