台灣生病了?民主生病了?台灣的民主生病了?

超前部屬?校正回歸?免疫橋接?世界怎麼跟得上台灣?

COVID-19【新冠病毒】即時資訊：全球疫情台灣疫情

目前位置: 首頁 > Boostrap4響應式模板DIy > 1、ECSHOP響應式模板DIY懶人包免費下載

1、ECSHOP響應式模板DIY懶人包免費下載超大 稍大 微大

20 發表於： 2020-09-23 最後更新：最後更新時間：2020-09-24

Bootstrap是一個不錯用的響應式前台CSS框架，加上他的JS可以執行許多Jquery的效果，Bootstrap也已經對不同平台設備做了相容性的處理，因此就算再有此類問題也只是少數了... 說是ECSHOP模板，其實套用到任何網站模板都一樣，只是布局排版因人而異，但基本上沒多大的難度可言，因為ECSHOP的版型檔案比較多，建議只針對需要的檔案做修改，沒用到的檔案先略過，這樣可以節省不少時間。

Bootstrap4 依賴Jquery庫的列表
1.Alerts for dismissing
2.Buttons for toggling states and checkbox/radio functionality
3.Carousel for all slide behaviors, controls, and indicators
4.Collapse for toggling visibility of content
5.Dropdowns for displaying and positioning (also requires Popper.js)
6.Modals for displaying, positioning, and scroll behavior
7.Navbar for extending our Collapse plugin to implement responsive behavior
8.Tooltips and popovers for displaying and positioning (also requires Popper.js)
9.Scrollspy for scroll behavior and navigation updates

遺憾的是，ECSHOP的transport.js與Jquery會產生衝突，所以無法使用某些特效，但是網路上有許多Javascript是不必依賴Jquery的，套用到ECSHOP後你的網路商城就能成為響應式的網站了，為了大家都能順利DIY，附件提供了個人常用的CSS和JS壓縮包，其中Bootstrap4只選用部分常用的CSS，並棄用他的JS，改用獨立的Jquery來給ECSHOP的首頁主廣告用，請先在本機架設一個相同的網站，目前的模板所有的DWT頁首是長類似這樣

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="{$keywords}" />
<meta name="Description" content="{$description}" />
..........省略..................
</head>

用你慣用的文字編輯器把每個DWT都改成這樣，讓他支援響應式的媒體查詢

<!DOCTYPE html>
<html lang="zh-Hant-TW">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
		<meta name="Keywords" content="{$keywords}" />
		<meta name="Description" content="{$description}" />
		..........省略..................
	</head>

此時都還沒更動到樣式表，因此檢視前台的版面應該和原來一樣..