如何在Magento2 使用 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開發