Comment utiliser Twitter Bootstrap 2 avec Play framework 2.x

je sais que la lecture en cours! distribution dispose d'un helper pour Bootstrap 1.4. Que dois-je faire si je veux utiliser la version actuelle de Bootstrap?

28
demandé sur zessx 2012-05-03 21:56:00

8 réponses

j'utilise le bootstrap twitter 2.0.1 avec Play 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 bootstrap twitter vous avez deux options:

  • vous pouvez choisir d'utiliser 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 voulez utiliser moins de fichiers vous faites le paquet suivant (à la racine de votre dossier app):

    des actifs.les feuilles de style.bootstrap

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

// 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 prévoyez de construire le jeu à partir de la source, suivez ce tutoriel la page wiki Play: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012-09-21: Lors de l'utilisation du bootstrap vous devez toujours faire un choix si vous voulez changer le dossier images ou en ajoutant une route aux deux images statiques utilisées par le bootstrap:

EDIT: 2013-03-11: Comme xref l'a souligné, j'ai fait une erreur:img doit être 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
répondu adis 2013-03-11 20:10:40

une approche rapide et maintenable est d'utiliser WebJars (côté client dependency manager par Typesafe Dev Advocate: James Ward), avec quelques lignes dans votre construction.scala, vous pouvez facilement ajouter Bootstrap (par exemple version 2.3, 3.0, etc) - et bien plus encore - à votre projet.

1) Voici l'exemple de documentation pour ajouter Bootstrap 2.3 À Play 2.1 dans votre Construire.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) Ajoutez les liens pertinents à votre 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>

Remarque: que les WebJars vont réellement essayer de trouver vos ressources pour vous, vous n'avez pas besoin de qualifier pleinement les emplacements d'actifs.

33
répondu a darren 2013-09-02 09:35:09

je vais jeter dans, pour utiliser Glyphicons avec Bootstrap 2.2.2 et jouer 2.0.4 Je ne pouvais pas tout à fait utiliser les routes que adis posté ci-dessus. J'ai déplacé les deux fichiers glyphicons dans le dossier' images '(La valeur par défaut de lecture, pas 'img' qui est la valeur par défaut de Bootstrap) et ajouté à mes routes:

# 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 laisse accéder à la glyphicons comme un normal bootstrap installer, pas de déconner avec "moins" de fichiers, etc

4
répondu xref 2013-01-16 00:40:19

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

je l'ai utilisé avec Twitter Bootstrap 2.0.1 et Jouer 2.0

2
répondu nico_ekito 2012-05-03 20:07:17

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 copie path_to_play/play2.0.1/cadre/src/jouer/src/main/scala/views/helpers dans helper/twitterBootstrap2
  3. je le modifie comme je le veux.
  4. Et j'importe @import helper.FieldConstructor et @import helper.twitterBootstrap2._ et @ impliciteField = @(FieldContructor (twitterBootstrap2FieldContructor.f de mon point de vue où je veux l'utiliser
2
répondu Scandinave 2012-05-23 13:12:19

il vous suffit de mettre à jour bootstrap twitter et aussi mettre à jour votre propre code (le code spécifique bootstrap que vous avez écrit). Consultez le lien suivant pour plus d'informations sur la mise à jour vers la nouvelle version:http://twitter.github.com/bootstrap/upgrading.html