文章彙整

如何在Magento2 使用 Bootstrap

By Steffi 3 months agoNo Comments
首頁  /  Magento  /  Magento-2  /  如何在Magento2 使用 Bootstrap

如何在Magento 2 使用bootstrap

如果想要在Magento2的主題包裡使用bootstrap 的 javascript,我們就要使用requirejs的方式來引入bootstrap.js。引入的方法如下:

1. 將bootstrap.js 放進

app/design/frontend/<Vendor>/<theme>/web/js/目錄下

2. 將bootstrap.css 放進

app/design/frontend/<Vendor>/<theme>/web/css/目錄下

3. 在主題包的根目錄底下新增一個requirejs-config.js檔案、路徑如下:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

requirejs-config.js的檔案內容如下:

var config = {

  paths: {

      "jquery.bootstrap": "js/bootstrap.min"

  },

  shim: {

      'jquery.bootstrap': {

          deps: ['jquery']

      }

  },

deps: [

  "js/main"

]   

};

 

4. 在app/design/frontend/<Vendor>/<theme>/web/js/目錄下新增一個main.js

檔案內容如下:

require(['jquery', 'jquery.bootstrap'], function($) {

  $(function() {

  // 這一段會讓RequireJS自動加載bootstrap.js進來、內容留空也沒有關係。

  });

});

當然、完成後別忘了要重新布署靜態檔案

sudo php bin/magento setup:static-content:deploy --force;

 

 

延伸閱讀:

Magento 2 前台網站開發:部屬靜態資料

如何設計 Magento佈景主題 (2) – 使用sass開發

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。