28

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

4

8 回答 8

38

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

  • 您可以选择只使用bootstrap.min.css(and bootstrap-responsive.css) and 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")
于 2012-05-03T19:01:46.020 回答
33

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

1）这是在您的Build.scala中添加 Bootstrap 2.3 到 Play 2.1 的文档示例：

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）然后在您的路线文件中添加一个条目：

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 实际上会尝试为您查找资源，您不需要完全限定资产位置。

于 2013-06-13T09:30:23.287 回答
4

我会投入，将 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")

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

于 2013-01-16T00:40:19.610 回答
2

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

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

于 2012-05-03T20:07:17.720 回答
2

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

我认为它是 twitterbootstrap 1.x 的 maje 类，而不是 2.0 。有什么解决办法吗？

编辑：这是工作

  1. 我在 app/view 中创建包助手/twitterBootstrap2
  2. 然后我在 helper/twitterBootstrap2 中复制 path_to_play/play2.0.1/framework/src/play/src/main/scala/views/helper
  3. 我按照我的意愿修改它。
  4. 我在我想使用它的视图中导入 @import helper.FieldConstructor 和 @import helper.twitterBootstrap2._ 和 @impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f)
于 2012-05-23T11:18:26.107 回答
1

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

于 2012-05-03T18:01:54.137 回答
0

脚本方法（从这里）

1-将引导程序的较少文件复制到app/assets/stylesheets/bootstrap

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

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")" />
于 2013-08-09T13:50:01.340 回答
0

我不得不做几件事，包括使用最新版本的 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 中。

于 2012-05-03T19:00:45.533 回答