搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 HTML/CSS 語法 Bootstrap 手機上水平滑動效果製作方法
byadmin 發表於 2016-10-31 19:26:58 , 8590人已閱讀 , 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)

信箱:sr.design2011@gmail.com

, Processed in 0.127365 second(s), 46 queries , Gzip On.

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

Core - DZ2.5 GMT+8, 2026-2-11 07:09

回頂部