如何使用 Twitter Bootstrap 3 和 play framework 2.3答案

【问题标题】：How to use Twitter Bootstrap 3 with play framework 2.3如何使用 Twitter Bootstrap 3 和 play framework 2.3
【发布时间】：2015-01-21 09:12:22
【问题描述】：

我一直在尝试将 bootstrap 的 js 和 css 文件添加到 play framework 应用程序中的 public/javascripts 和 public/stylesheets 应用程序中。我不知道为什么，但我得到一个空白输出。使用 play v2.3 进行引导 v3 是否正确？如果不是，正确的做法是什么？

【问题讨论】：

标签： twitter-bootstrap playframework playframework-2.3

【解决方案1】：

我的解决方案如下：

在 build.sbt 中：

libraryDependencies ++= Seq(
    "org.webjars" % "bootstrap" % "3.3.7"
)

在conf/routes 中，确保您有以下行：（默认情况下应包含此行，除非您将其删除）

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

在您的 file.scala.html 文件中，您可以像这样包含引导程序：

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.min.css")">
<script src="@routes.Assets.versioned("lib/bootstrap/js/bootstrap.min.js")" crossorigin="anonymous"></script>

WebJars documentation

【讨论】：

【解决方案2】：

在 Play 2.5.x 中

<link rel="stylesheet" href="@routes.Assets.versioned("bootstrap/css/bootstrap.css")">
<script type='text/javascript' src='@routes.Assets.versioned("bootstrap/js/bootstrap.js")'></script>

【讨论】：

【解决方案3】：

在新的 Play 2.4 版本中，您应该使用：

@routes.Assets.versioned("an_asset")

代替：

@routes.Assets.at("an_asset")

但请记住将其保存在 routes 文件中：

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

【讨论】：

【解决方案4】：

不要手动分割下载的库，有什么用？它包含相对路径。

只需将其解压缩到 public/bootstrap 文件夹中，然后将 JS/CSS 包含在其中作为公共公共资产：

<link rel="stylesheet" 
  href="@routes.Assets.at("assets/bootstrap/css/bootstrap.css")">
<script type='text/javascript' 
  src='@routes.Assets.at("assets/bootstrap/js/bootstrap.js")'></script>

当然我假设你有 Play 创建的默认路由：

GET  /assets/*file   controllers.Assets.at(path="/public", file)

提示：您提到的这些文件夹只是示例，它不会让您了解任何内容...您可以移动/重命名/删除它们，无论如何

【讨论】：

对不起，我有点困惑。你能解释清楚一点吗？
对哪个部分感到困惑？
您的意思是解压缩整个 bootstrap v3 文件夹并将其放在我的应用程序的公用文件夹中吗？
是的，这正是我的意思:) 将其解压缩到某个子文件夹中，并且根本不要操作它的文件和文件夹。只需在模板中使用正确的路径
感谢您有兴趣回复。所以，如果我的引导 html 文件的头部有类似的东西 maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/…"> 我应该如何将它链接到我的应用程序的 main.scala.html 中？跨度>

【解决方案5】：

在build.sbt 文件中添加以下内容：

resolvers ++= Seq(
  "webjars"    at "http://webjars.github.com/m2"
)

libraryDependencies ++= Seq(
  "org.webjars"               %% "webjars-play"       % "2.3.0",
  "org.webjars"               % "bootstrap"           % "3.0.0" exclude("org.webjars", "jquery"),
  "org.webjars"               % "jquery"              % "1.8.3"
)

【讨论】：

感谢您指出 WebJars 之类的选项。但是，它没有提到如何引用这些罐子的内容。 webjars.org/documentation 澄清它：/assets/lib/bootstrap/css/bootstrap.css