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>
此時都還沒更動到樣式表,因此檢視前台的版面應該和原來一樣..