Phoenix 引入完整 Boostrap

默认 Phoenix 只引入了 Bootstrap 的 CSS,没有引入 JQuery 和 bootstrap.js。这时,许多bootstrap的高级组件例如下拉菜单我们都没法使用。

这篇文章讲如何使用Brunch引入Bootstrap的其他文件。

我们下载 JQuery 的压缩包,将其中的 jquery.min.js 放在 vendor 目录下。
我们下载 bootstrap production 压缩包,并将其中的 bootstrap.min.js 放在 vendor 目录下。

如果需要将 vendor 目录下的 js 都合并到 app.js 的话,需要指定 vendor 目录
到 joinTo

这里需要注意的是Join到app.js时要注意引用顺序,先JQuery再Bootstrap

order: {
  before: [
    "web/static/vendor/js/jquery.min.js",
    "web/static/vendor/js/bootstrap.min.js"
  ]
}

如果需要单独添加,可以这样:

joinTo: {
    "js/app.js": /^(web\/static\/js)|(node_modules)/,
    "js/ex_admin_common.js": ["web/static/vendor/ex_admin_common.js"],
    "js/admin_lte2.js": ["web/static/vendor/admin_lte2.js"],
    "js/jquery.min.js": ["web/static/vendor/jquery.min.js"],
    "js/bootstrap.min.js": ["web/static/vendor/bootstrap.min.js"]
},

然后在 app.html 中引用即可:




你可能感兴趣的:(Phoenix 引入完整 Boostrap)