標籤彙整:RWD

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

media

讓不同寬度尺寸套用不同CSS

範例

.container
.container
  .block.a AAAA
  .block.b BBB
  .block.c CC
  .block.d DD
  .block.e EE
  .block.f FF
  .block.g GGGG
.container
 font-size: 0
 box-sizing: border-box

.block
 height: 200px
 text-align: center
 box-sizing: border-box
 border: 3px solid #fff
 font-size: 40px
 display: inline-block
 padding-top: 50px

.a
 width: 100%
 background-color: #00796B

.b
 width: 70%
 background-color: #B2DFDB
.c
 width: 30%
 background-color: #FFFFFF

.d
 width: 30%
 background-color: #00BCD4

.e
 width: 35%
 background-color: #BDBDBD

.f
width: 35%
background-color: #757575

.g
 width: 100%
 background-color: #009688

//以螢幕為條件,寬度800以下時套用這組css
@media screen and (max-width: 800px)
 .b
   width: 100%
 .c,.d,.e,.f
   width: 50%

//以螢幕為條件,寬度400以下時套用這組css
@media screen and (max-width: 400px)
 .b,.c,.e,.d,.f
   width: 100%

Display

PC:1200px

AAAA
BBB
CC
DD
EE
FF
GGGG

TABLET:800px

AAAA
BBB
CC
DD
EE
FF
GGGG

SMARTPHONE:400px

AAAA
BBB
CC
DD
EE
FF
GGGG

消除切版間隙

切版常見問題

區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來

.container
 .a width 70%
 .b height 30%
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955

.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)

.a
 width: 70%

.b
 width: 30% 
Display
width 70%
height 30%

解決方法

  1. 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
  2. display: inline-block,元素水平排列。
    詳細請看這篇文章
  3. box-sizing: border-box→外框框線尺寸包在框元素之内。
    詳細請看這篇文章
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955
 // 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
 font-size: 0px
.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)
 font-size: 18.4px
 // 3 外框框線尺寸包在框元素之内
 box-sizing: border-box
 // 2 元素水平排列
 display: inline-block
.a
 width: 70%
.b
 width: 30%     
Display
width 70%
height 30%