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 中引用即可:

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,496评论 2 71
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,319评论 4 31
  • 我原本以为过完春节后店里的生意会好些,没想到丝毫没有好转的迹象。 “把后面两个灯给关了,又没有生意,开那么多电灯做...
    不想喝水的鱼阅读 817评论 0 7
  • 用手机照的,夏日骄阳似火。
    uncle华之里阅读 143评论 0 1