28

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

4

8 に答える 8

38

Play2.0で2.0.1Twitterブートストラップを使用しています。ここから特定のバージョンをダウンロードできます：https ：//github.com/twitter/bootstrap/tags 。Twitterブートストラップをダウンロードすると、次の2つのオプションがあります。

  • 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ブートストラップを使用するときは、フォルダーを変更するか、ブートストラップで使用される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")
于 2012-05-03T19:01:46.020 に答える
33

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

1） Build.scalaでBootstrap2.3をPlay2.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

Bootstrap2.2.2とPlay2.0.4でGlyphiconsを使用するために、上記のadisが投稿したルートを完全に使用することはできませんでした。2つのグリフィコンファイルを「images」フォルダー（ブートストラップのデフォルトである「img」ではなく、Playのデフォルト）に移動し、ルートに追加しました。

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

これにより、通常のブートストラップインストールのようにグリフィコンにアクセスでき、「less」ファイルなどをいじることはありません。

于 2013-01-16T00:40:19.610 に答える
2

または、次の簡単なチュートリアルに従うことができます：https ://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

TwitterBootstrap2.0.1とPlay2.0で使用しました

于 2012-05-03T20:07:17.720 に答える
2

私はplay2.0でブートストラップ2.0を使用しています。Everithingは正常に動作し、helper.twitterbootstrapを実行します。

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

編集：それは仕事です

  1. app/viewでパッケージhelper/twitterBootstrap2を作成します
  2. 次に、path_to_play / play2.0.1 / framework / src / play / src / main / scala / views/helperをhelper/twitterBootstrap2にコピーします
  3. 好きなように変更します。
  4. そして、@importhelper.FieldConstructorと@importhelper.twitterBootstrap2._と@impliciteField=@（FieldContructor（twitterBootstrap2FieldContructor.f）を、使用したい場所にインポートします。
于 2012-05-23T11:18:26.107 に答える
1

ツイッターのブートストラップを更新するだけでなく、独自のコード（作成したブートストラップ固有のコード）も更新します。最新バージョンへの更新の詳細については、次のリンクを参照してください：http ://twitter.github.com/bootstrap/upgrading.html 。

于 2012-05-03T18:01:54.137 に答える
0

リリースされたバージョンでは、ブートストラップで使用されるファイルの数が少ないため、最新バージョンのPlay 2.0を使用するなど、いくつかの問題が発生しました。https://github.com/playframework/Play20/wiki/BuildingFromSourceの手順に従って、ソースからビルドします。次に、すべてのブートストラップレスファイルをアプリケーションの「app / asset /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 に答える
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 に答える