搜索
SR數位設計 ECSHOP RWD響應式技術開發 HTML/CSS 語法 Bootstrap 手機上水平滑動效果製作方法
byadmin 發表於 2015-9-11 12:26:58 , 2258人已閱讀 , 0人回應
在一般PC上的操作光點擊以及滾動大概就可以應付99%的頁面閱讀,但在手機和平板上的瀏覽,除了點擊外,滑動這個動作則是佔了很重要的操作比例,下面就來提供一下,Bootstrap3 上要如何實現滑動水平的效果 .

【依照國際慣例,製作前先上圖 (這是擷取自作者展示的效果圖) 】
bootstrap-horizon.gif

來源:https://github.com/Zertz/bootstrap-horizon

使用方式很簡單,引入一個bootstrap-horizon.css 檔案後 , 就可開始定義使用了.
只需要將滾動區域包覆在 <div class="row row-horizon"> 的區域中即可。

可參考下方簡單的範例:

  1. <div class="row row-horizon">
  2.   <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  3.     ...
  4.   </div>
  5. </div>
複製代碼
[/code]使用以上的方法搭配CSS修改,就可以輕鬆做出下方這種效果囉 !
2015-09-11_123108.png


Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.201986 second(s), 39 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-5-25 22:15

回頂部