web-dev-qa-db-fra.com

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

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

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

J'utilise le Twitter 2.0.1 bootstrap avec Play 2.0. Vous pouvez télécharger une version spécifique ici: https://github.com/Twitter/bootstrap/tags =. Une fois que vous avez téléchargé Twitter bootstrap vous avez deux options:

  • vous pouvez choisir d'utiliser simplement 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 créez le package suivant (à la racine de votre dossier d'application):

    assets.stylesheets.bootstrap

Et dans vous construisez scala 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 templats:

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

EDIT: 2012-09-21: Lorsque vous utilisez le 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 l'a indiqué la xréf, 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
adis

Une approche rapide et maintenable consiste à utiliser WebJars (un gestionnaire de dépendances côté client par Typesafe Dev Advocate: James Ward ), avec quelques lignes dans votre Build.scala, vous peut facilement ajouter Bootstrap (par exemple la 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 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) Ajoutez ensuite une entrée à votre fichier routes :

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

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

33
a darren

Je vais lancer, pour utiliser les glyphicons avec Bootstrap 2.2.2 et Play 2.0.4 je ne pouvais pas vraiment utiliser les routes que les adis ont postées ci-dessus. J'ai déplacé les deux fichiers de glyphicons dans le ' dossier d'images (le Play par défaut, pas 'img' qui est le Bootstrap par défaut) 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 permet d'accéder aux glyphicons comme une installation normale bootstrap, pas de problème avec les fichiers "moins", etc.

4
xref

J'utilise bootstrap 2.0 avec le jeu 2.0. Tout fonctionne bien, sauf le helper.twitterbootstrap.

Je pense que c'est une classe majeure pour twitterbootstrap 1.x, pas pour 2.0. Toute solution?

Edit: c'est du travail

  1. Je crée un package helper/twitterBootstrap2 dans l'application/vue
  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, là où je veux l'utiliser)
2
Scandinave

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

2
ndeverge

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

1
Styxxy

J'ai dû faire quelques choses, notamment en utilisant la dernière version de Play 2.0 en raison de certains problèmes que la version publiée avait avec la compilation des fichiers les moins utilisés par le 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 devrait compiler que "bootstrap.less", vous devez donc ajouter ce qui suit à "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
InPursuit

MÉTHODE SCRIPT (de ici )

1- Copiez moins de fichiers de bootstrap dans app/assets/stylesheets/bootstrap

2- Exécutez ce script dans app/assets/stylesheets/bootstrap en le copiant et en le collant dans un shell/terminal (le script renommera les fichiers partiels et modifiera le chemin des importations):

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

Remarque : le script ci-dessus ne fonctionne pas sur Mac ! Sur Mac, utilisez ceci :

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- Inclure le CSS compilé

<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