默认 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 中引用即可:
<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>
<script src="<%= static_path(@conn, "/js/bootstrap.min.js") %>"></script>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>