如何将 Twitter Bootstrap 2 与 play framework 2.x 一起使用答案

【问题标题】：How to use Twitter Bootstrap 2 with play framework 2.x如何将 Twitter Bootstrap 2 与 play framework 2.x 一起使用
【发布时间】：2012-05-03 17:56:00
【问题描述】：

我知道当前的 Play！发行版有一个 Bootstrap 1.4 的助手。如果要使用当前版本的 Bootstrap 应该怎么做？

【问题讨论】：

标签： twitter-bootstrap playframework playframework-2.0 twitter-bootstrap-2

【解决方案1】：

我在 Play 2.0 中使用 2.0.1 twitter 引导程序。您可以在此处下载特定版本：https://github.com/twitter/bootstrap/tags。下载 twitter 引导程序后，您有两个选择：

您可以选择只使用bootstrap.min.css（和bootstrap-responsive.css）和bootstrap.min.js，所有这些文件都可以放在公共文件夹中。
或者您可以将较少的文件用于 css。如果您想使用较少的文件，请制作以下包（在您的应用文件夹的根目录中）：

assets.stylesheets.bootstrap

在您构建 scala 时，您定义应该编译这些 .less 文件：

// Only compile the bootstrap bootstrap.less file and any other *.less file in the stylesheets directory 
def customLessEntryPoints(base: File): PathFinder = ( 
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "responsive.less") +++ 
    (base / "app" / "assets" / "stylesheets" * "*.less")
)

val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
  // Add your own project settings here
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
)

然后您可以将其包含在您的模板中：

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/responsive.min.css")" />

编辑：2012-09-17： 如果您计划从源代码构建 Play，请按照本教程 Play wiki 页面：https://github.com/playframework/Play20/wiki/Tips

编辑：2012-09-21： 使用引导程序时，您始终必须选择是更改文件夹 images 还是添加到引导程序使用的两个静态图像的路由：

编辑：2013-03-11： 正如外部参照指出的那样，我犯了一个错误：img 必须是 images：

GET     /assets/img/glyphicons-halflings-white.png      controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png")
GET     /assets/img/glyphicons-halflings.png            controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png")

【讨论】：

我做了完全一样的，但是 responsive.min.css 没有生成。文件 bootstrap.min.css 生成正常。
@sealskej：尝试清理和/重新启动您的项目并确认您没有输入任何拼写错误，应该会很辛苦..
谢谢。清洁和重启是首先想到的，我试过了。错别字是指语法错误？
是的，可能是语法错误，还有名字拼写错误，看看：objectify.be/wordpress/?p=475

【解决方案2】：

一种快速且可维护的方法是使用WebJars（Typesafe Dev Advocate: James Ward 的客户端依赖管理器），只需在 Build.scala 中添加几行代码，即可轻松添加 Bootstrap（例如版本 2.3、3.0 等） ) - 以及更多 - 到您的项目中。

1) Here's the documentation example for adding Bootstrap 2.3 to Play 2.1，在您的 Build.scala 中：

import sbt._
import Keys._
import play.Project

object ApplicationBuild extends Build {
  val appName         = "foo"
  val appVersion      = "1.0-SNAPSHOT"

  val appDependencies = Seq(
    "org.webjars" %% "webjars-play" % "2.1.0-2",
    "org.webjars" % "bootstrap" % "2.3.2"
  )

  val main = Project(appName, appVersion, appDependencies).settings()
}

2) 然后在您的 routes 文件中添加一个条目：

GET     /webjars/*file                    controllers.WebJarAssets.at(file)

3) 将相关链接添加到您的模板：

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

请注意，WebJars 实际上会尝试为您查找资源，您无需完全限定资产位置。

【讨论】：

【解决方案3】：

我会投入，将 Glyphicons 与 Bootstrap 2.2.2 和 Play 2.0.4 一起使用，我不能完全使用上面发布的 adis 路线。我将两个 glyphicons 文件移动到“images”文件夹中（播放默认，而不是 Bootstrap 默认的“img”）并添加到我的路线中：

# Map Bootstrap images
GET     /assets/img/glyphicons-halflings.png            controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png")
GET     /assets/img/glyphicons-halflings-white.png      controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png")

这让我可以像正常的引导安装一样访问字形图标，不会弄乱“更少”文件等

【讨论】：

我将在 OS X 上投入这项工作，但在 Ubuntu 10.04 Lucid 服务器上部署时不会出现字形图标。不知道为什么，但是从 /img 到 /images 的路线根本行不通。必须手动编辑该服务器的 bootstrap.css 文件。我很想知道这个 Play 路由方法是否适用于其他操作系统。

【解决方案4】：

或者您可以按照这个简单的教程进行操作：https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

我将它与 Twitter Bootstrap 2.0.1 和 Play 2.0 一起使用

【讨论】：

只是一个注释，这样你就不会把头发拉出来。当前的稳定版本 2.0.1 不适用于最新的引导版本。您必须拉出主分支。原因是版本不兼容。 nico 分享的链接在底部某处提到了这一点。

【解决方案5】：

我使用 bootstrap 2.0 和 play 2.0 。一切正常，除了 helper.twitterbootstrap。

我认为它适用于 twitterbootstrap 1.x，而不是 2.0。有什么解决办法吗？

编辑：它的工作

我在 app/view 中创建包 helper/twitterBootstrap2
然后我将 path_to_play/play2.0.1/framework/src/play/src/main/scala/views/helper 复制到 helper/twitterBootstrap2 中
我可以随意修改它。
我导入@import helper.FieldConstructor 和@import helper.twitterBootstrap2._ 和@impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f 在我看来我想在哪里使用它

【讨论】：

【解决方案6】：

您只需更新 twitter 引导程序并更新您自己的代码（您编写的引导程序特定代码）。有关更新到最新版本的更多信息，请查看以下链接：http://twitter.github.com/bootstrap/upgrading.html。

【讨论】：

【解决方案7】：

我不得不做几件事，包括使用最新版本的 Play 2.0，因为发布的版本在编译 bootstrap 使用的较少文件时存在一些问题。按照此处的说明https://github.com/playframework/Play20/wiki/BuildingFromSource 从源代码构建。然后我将所有引导程序更少的文件放在应用程序的“app/assets/stylesheets/”目录中。 Play 应该只编译“bootstrap.less”，所以你需要在“project/Build.scala”中添加以下内容：

val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
  lessEntryPoints <<= baseDirectory(_/"app"/"assets"/"stylesheets" ** "bootstrap.less")
)

如果您使用任何引导 javascript 插件，您需要将它们添加到“public/javascripts”并将它们包含在您的 HTML 中。

【讨论】：

【解决方案8】：

脚本方法（来自here）

1- 将 bootstrap 的 less 文件复制到 app/assets/stylesheets/bootstrap

2- 在app/assets/stylesheets/bootstrap 中运行此脚本，将其复制并粘贴到 shell/终端中（该脚本将重命名部分文件并编辑导入的路径）：

for a in *.less; do mv $a _$a; done 
sed -i 's|@import "|@import "bootstrap/_|' _bootstrap.less 
mv _bootstrap.less ../bootstrap.less
sed -i 's|@import "|@import "bootstrap/_|' _responsive.less 
mv _responsive.less ../responsive.less

注意：以上脚本不适用于 Mac！ 在 Mac 上使用这个：

for a in *.less; do mv $a _$a; done 
sed -i "" 's|@import "|@import "bootstrap/_|' _bootstrap.less
mv _bootstrap.less ../bootstrap.less
sed -i "" 's|@import "|@import "bootstrap/_|' _responsive.less 
mv _responsive.less ../responsive.less

3- 包含编译后的 CSS

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.min.css")" />
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/responsive.min.css")" />

【讨论】：