web-dev-qa-db-ja.com

Twitter Bootstrap 2をプレイフレームワーク2.xで使用する方法

私はその現在のプレイを知っています！ディストリビューションにはBootstrap 1.4のヘルパーがあります。現在のバージョンのBootstrapを使用したい場合はどうすればよいですか？

twitter-bootstrapplayframeworkplayframework-2.0twitter-bootstrap-2
28
Ahmed Aswani

2.0.1のTwitter bootstrapを使用しています。特定のバージョンはこちらからダウンロードできます： https://github.com/Twitter/bootstrap/tags =。Twitterをダウンロードすると、bootstrap= 2つのオプションがあります。

  • bootstrap.min.css（およびbootstrap-responsive.css）およびbootstrap.min.jsのみを使用することを選択できます。これらのファイルはすべてパブリックフォルダーに配置できます。

  • または、cssにlessファイルを使用できます。より少ないファイルを使用する場合は、次のパッケージを作成します（アプリフォルダーのルートにあります）。

    asset.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

EDIT：2012-09-21：bootstrapを使用する場合は、変更するかどうかを常に選択する必要がありますフォルダーimagesまたはブートストラップで使用される2つの静的イメージへのルートを追加します。

編集：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")
38
adis

迅速で保守可能なアプローチは、 WebJars （ Typesafe Dev Advocate：James Ward によるクライアント側の依存関係マネージャー）を使用することです。Build.scalaに数行を追加します。 Bootstrap（バージョン2.3、3.0など）など）を簡単にプロジェクトに追加できます。

1） ここに、Bootstrap 2.3を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は実際にあなたのためにリソースを見つけようとしますが、アセットの場所を完全に修飾する必要はありません。

33
a darren

GlyphiconsをBootstrap 2.2.2およびPlay 2.0.4で使用するには、上記のadisのルートをまったく使用できませんでした。2つのグリフィコンファイルを '画像フォルダ（Playのデフォルト、「img」ではなくBootstrap default）であり、ルートに追加されました：

# 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 installのようにグリフコンにアクセスできます。'less 'ファイルをいじることはありません。

4
xref

私はbootstrap 2.0 with play 2.0を使用します。うまく動作します。helper.twitterbootstrapを実行してください。

2.0ではなくtwitterbootstrap 1.xのクラスだと思います。解決策はありますか？

編集：それは仕事です

  1. App/viewにパッケージヘルパー/ twitterBootstrap2を作成します
  2. 次に、ヘルパー/ 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を使用したいビューでインポートします。
2
Scandinave

または、次の簡単なチュートリアルに従ってください： https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

Twitter Bootstrap 2.0.1およびPlay 2.0で使用しました

2
ndeverge

Twitter bootstrap=を更新するだけでなく、独自のコード（bootstrap作成した特定のコード）を更新します。最新バージョン： http://Twitter.github.com/bootstrap/upgrading.html .

1
Styxxy

ブートストラップで使用されるファイルが少ないため、リリース版にはいくつかの問題があったため、最新バージョンのPlay 2.0を使用するなど、いくつかの作業を行う必要がありました。こちらの手順に従ってください 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に含める必要があります。

0
InPursuit

SCRIPT METHOD（from here ）

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")" />
0
Fred K