Question Comment utiliser Twitter Bootstrap 2 avec play framework 2.x


Je sais que le jeu actuel! la distribution a une aide pour Bootstrap 1.4. Que dois-je faire si je veux utiliser la version actuelle de Bootstrap?


28
2018-05-03 17:56


origine


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 de simplement 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 souhaitez utiliser moins de fichiers, vous devez créer le package suivant (à la racine du dossier de votre application):

    assets.stylesheets.bootstrap

Et dans votre construction, vous définissez que ces fichiers .less 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 modèles:

<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 créer Play à partir des sources, suivez ce tutoriel sur la page Play wiki: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012-09-21: Lorsque vous utilisez le bootstrap, vous devez toujours choisir si vous souhaitez changer de dossier images ou en ajoutant une route aux deux images statiques utilisées par le bootstrap:

EDIT: 2013-03-11: Comme je le faisais remarquer, 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
2018-05-03 19:01



Une approche rapide et maintenable consiste à utiliser WebJars (un gestionnaire de dépendance côté client par Avocat de Dev Typesafe: James Ward), avec quelques lignes dans votre Build.scala, vous pouvez facilement ajouter Bootstrap (par exemple, la version 2.3, 3.0, etc.) - et bien plus encore - à votre projet.

1) Voici l'exemple de la documentation pour l'ajout de Bootstrap 2.3 à Play 2.1, dans ton 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 ajoutez une entrée à votre routes fichier:

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

3) Ajoutez les liens pertinents à votre des 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 WebJars essayera réellement de trouver vos ressources pour vous, vous n'avez pas besoin de qualifier complètement les emplacements des actifs.


33
2018-06-13 09:30



Je vais utiliser, pour utiliser Glyphicons avec Bootstrap 2.2.2 et Play 2.0.4 Je ne pouvais pas tout à fait utiliser les routes affichées ci-dessus. J'ai déplacé les deux fichiers glyphicons dans le dossier 'images' (la valeur par défaut de Play, pas «img» qui est la valeur par défaut de Bootstrap) 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 normale de bootstrap, sans déconner les fichiers "moins", etc.


4
2018-01-16 00:40



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

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


2
2018-05-03 20:07



J'utilise bootstrap 2.0 avec play 2.0. Everithing fonctionne bien, sauf le helper.twitterbootstrap.

Je pense que la classe maje pour twitterbootstrap 1.x, pas pour 2.0. Toute solution?

Edit: c'est du travail

  1. Je crée une application de package / twitterBootstrap2 dans app / view
  2. Ensuite, je copie path_to_play / play2.0.1 / framework / src / play / src / main / scala / views / helper dans helper / twitterBootstrap2
  3. Je le modifie comme je veux.
  4. Et j'importe @import helper.FieldConstructor et @import helper.twitterBootstrap2._ et @impliciteField = @ (FieldContructor (twitterBootstrap2FieldContructor.f à mon avis où je veux l'utiliser)

2
2018-05-23 11:18



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


1
2018-05-03 18:01



J'ai dû faire quelques choses, notamment en utilisant la dernière version de Play 2.0 en raison de certains problèmes rencontrés par la version publiée lors de la compilation des moins de fichiers utilisés par bootstrap. Suivez les instructions ici https://github.com/playframework/Play20/wiki/BuildingFromSource pour construire à partir de la source. Ensuite, j'ai placé tous les fichiers bootstrap moins dans le répertoire "app / assets / stylesheets /" de votre application. Play ne doit compiler "bootstrap.less" que pour ajouter "project / Build.scala":

val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
  lessEntryPoints <<= baseDirectory(_/"app"/"assets"/"stylesheets" ** "bootstrap.less")
)

Si vous utilisez l'un des plugins javascript bootstrap, vous devrez les ajouter à "public / javascripts" et les inclure dans votre code HTML.


0
2018-05-03 19:00