twitter-bootstrap - 如何将 Twitter Bootstrap 2 与 play framework 2.x 一起使用

Question

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

Answer 1

我正在使用带有 Play 2.0 的 2.0.1 twitter Bootstrap 。您可以在此处下载特定版本:https://github.com/twitter/bootstrap/tags .下载 twitter Bootstrap 后，您有两个选择:

您可以选择只使用 bootstrap.min.css (和 bootstrap-responsive.css )和 bootstrap.min.js ，所有这些文件都可以放在公共(public)文件夹中。

或者您可以将较少的文件用于 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:
使用 Bootstrap 时，您始终必须选择是否更改文件夹 images或向 Bootstrap 使用的两个静态图像添加路由:

编辑: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")