Comment utiliser Twitter Bootstrap 2 avec le framework de jeu 2.x

Question

Je connais ce jeu actuel! la distribution a un assistant pour Bootstrap 1.4. Que dois-je faire si je souhaite utiliser la version actuelle de Bootstrap?

Answer 1

Je suis à l'aide de la 2.0.1 twitter bootstrap avec Jouer 2.0. Vous pouvez télécharger une version spécifique ici: https://github.com/twitter/bootstrap/tags . Une fois que vous téléchargez le twitter bootstrap, vous avez deux options:

• vous pouvez choisir de n'utiliser que le bootstrap.min.css (et bootstrap-responsive.css) et bootstrap.min.js, tous ces fichiers peuvent être placés dans le dossier public.

• ou vous pouvez utiliser le moins de fichiers pour le css. Si vous souhaitez utiliser le moins de fichiers vous faire le paquet suivant (à la racine de votre dossier app):

  les actifs.les feuilles de style.bootstrap

Et à vous construire scala vous définissez que ces .moins de fichiers doit être compilé:

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

Et puis vous pouvez l'inclure dans vos templates:

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

EDIT: 2012-09-17: Si vous envisagez de faire construire Jouer à partir de la source, suivez ce tutoriel, le Jeu de la page wiki: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012-09-21: Lors de l'utilisation du bootstrap, vous avez toujours à faire un choix si vous souhaitez modifier le dossier images ou l'ajout d'une route à deux images statiques utilisés par le bootstrap:

EDIT: 2013-03-11: Comme xref pointu, j'ai fait une erreur: img doit 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")

Answer 2

Un moyen rapide et facile à gérer approche consiste à utiliser WebJars (côté client de la dépendance par le gestionnaire de Typesafe Dev Avocat: James Ward), avec quelques lignes dans votre construction.scala, vous pouvez facilement ajouter de Bootstrap (par exemple, la version 2.3, 3.0, etc) - et beaucoup plus - pour votre projet.

1) Voici la documentation exemple pour l'ajout de Bootstrap 2.3 Jouer 2.1, dans votre 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) Puis ajouter une entrée à votre itinéraires fichier:

GET     /webjars/*file                    controllers.WebJarAssets.at(file)

3) Ajouter les liens de vos modèles:

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

Notez que WebJars vais effectivement essayer de trouver vos ressources pour vous, vous n'avez pas besoin de plein de qualifier les actifs endroits.

Answer 3

J'y vais, pour utiliser les Glyphicons avec Bootstrap 2.2.2 et Play 2.0.4, je ne pouvais pas vraiment utiliser les itinéraires affichés ci-dessus. J'ai déplacé les deux fichiers de glyphicons dans le dossier 'images' (le Play par défaut, pas 'img' qui est le Bootstrap par défaut) et ajouté à mes itinéraires:

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

et cela me permet d'accéder aux glyphicons comme une installation bootstrap normale, sans jouer avec "moins" de fichiers, etc.

Answer 4

Ou vous pouvez suivre ce tutoriel simple: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

Je l'ai utilisé avec Twitter Bootstrap 2.0.1 et Play 2.0

Answer 5

J'utilise bootstrap 2.0 avec jouer 2.0 . Everithing bien fonctionner,sauf que le helper.twitterbootstrap.

Je pense qu'il maje classe pour twitterbootstrap 1.x ,et non pas à la version 2.0 . Toute solution?

Edit : c'est du travail

1. J'ai créer un package helper/twitterBootstrap2 dans app/view
2. Puis-je copier path_to_play/play2.0.1/cadre/src/jouer/src/main/scala/views/helpers dans helper/twitterBootstrap2
3. Je modifie ce que je veux.
4. Et je l'importation @import helper.FieldConstructor et @import helper.twitterBootstrap2._ et @impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f de mon point de vue où je veux l'utiliser