× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》


Bootstrap3 RWD 改變手機顯示順序


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • 真不該直接用 JavaScript...
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2017/11/22
164   0  


Bootstrap3 應該算是最流行的 CSS 架構了,用起來簡單,用的人也最多,用來做 RWD 響應式網頁開發也很快,對 RWD 設計,它有一個很方便的架構,但是,如果真的深入的用,就會碰到一些問題,我們就來看看一個常用的手機顯示順序與寬網頁不同時,要怎麼做的。

問題:寬網頁左右留白兩格,手機顯示順序不是右到左。

寬網頁要顯示成以下:
 [ ][ (2) key product 1st     ][ (1) shopping cart ][ ]
[ (5) suggesting products ][ (3) user account ]
[ ][ (4) promotion ]
 
但是手機的顯示順序要像:
[ (1) shopping cart       ]
[ (2) key product 1st ]
[ (3) user account ]
[ (4) promotion ]
[ (5) suggesting products ]
 
這是一個業主很正常的要求,其實做起來也很簡單,最主要就是要會用 pull-right,以下就直接上碼,我們來看看怎麼做:
<div class="row">
  <div class="col-lg-2"></div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(1) shopping cart</div>
  <div class="col-lg-5 col-xs-12">(2) key product 1st</div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(3) user account + (4) promotion</div>
  <div id="desc" class="col-lg-5 col-xs-12 col-lg-offset-2">(5) suggesting products</div>
  <div class="col-lg-2"></div>
</div>
我們來看看每一行:
01: 就宣告這是一段要排版的,ROW 要怎麼介紹啊?
02: 這是寬網頁的左邊留白。
03: 這行很有趣,這是要先填上寬網頁右邊的留白,先用 pull-right,把 lg 兩格右填,這要先填,後面的 pull-right 才不會一拉就到最右邊。
04: 再用 pull-right 把 (1) 填到右邊,但是手機是第一個。
05: 接下來放寬網頁左邊的區塊,手機就會是第二個。
06~10: 就很一樣,唯一特別的是第 08 行的 col-lg-offset-2,沒這行,左邊的留白就不見了。

就這樣,你的 RWD 可以照業主要的手機與寬網頁顯示順序了。

Bootstrap 很好用,唯一的缺點是,要是不蓋掉很多它原來的設計樣式,看起來好一般啊。

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: bootstrap 3 x 1 rwd顯示順序 x 1 rwd x 2 bootstrap x 2

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入