文章彙整

如何在Magento2 使用 Bootstrap

Astral WebBy Astral Web 4 years agoNo Comments
首頁  /  Magento  /  Magento2 開源版  /  如何在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開發

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Magento2 開源版MagentoMagento2 商業版前端開發網站技術與設計

留下回應

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