如何在Play框架2.x中使用Twitter Bootstrap 2

时间：2012-05-03 17:56:00

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

我知道现在玩！发布有一个Bootstrap 1.4的帮手。如果我想使用当前版本的Bootstrap，我该怎么办？

8 个答案:

答案 0 :(得分：38)

我在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，所有这些文件都可以放在公共文件夹中。

  • 或者您可以使用较少的文件作为CSS。如果您想使用较少的文件，请创建以下包（在app文件夹的根目录中）：

    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")

答案 1 :(得分：33)

快速且可维护的方法是使用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）然后在路线文件中添加一个条目：

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

答案 2 :(得分：4)

我会投入使用Glyphicons和Bootstrap 2.2.2以及Play 2.0.4我无法使用adis发布的路线。我将两个glyphicons文件移动到'images'文件夹中（Play默认值，而不是'img'，这是Bootstrap的默认值）并添加到我的路线中：

# 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")

这让我可以像正常的bootstrap安装一样访问glyphicons，不会弄乱'less'文件等等

答案 3 :(得分：2)

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

我在Twitter Bootstrap 2.0.1和Play 2.0中使用它

答案 4 :(得分：2)

我在play 2.0中使用bootstrap 2.0。 Everithing工作正常，执行helper.twitterbootstrap。

我认为它是twitterbootstrap 1.x的maje类，而不是2.0。 任何解决方案？

编辑：这是工作

  1. 我在app / view
    2. 中创建包助手/ 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在我看来我想用它的地方）

答案 5 :(得分：1)

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

答案 6 :(得分：0)

我不得不做一些事情，包括使用最新版本的Play 2.0，因为发布的版本在编译bootstrap使用的文件较少时遇到了一些问题。按照此处https://github.com/playframework/Play20/wiki/BuildingFromSource中的说明从源代码构建。 然后我将所有bootstrap less文件放在应用程序的“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")
)

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

答案 7 :(得分：0)

脚本方法（来自here）

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

2-在app/assets/stylesheets/bootstrap中运行此脚本，方法是在shell / terminal中复制并粘贴它（脚本将重命名部分文件并编辑导入路径）：

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")" />
相关问题
最新问题