Cómo usar Twitter Bootstrap 2 con play framework 2.x

Sé que Play actual! La distribución tiene un asistente para Bootstrap 1.4. ¿Qué debo hacer si quiero usar la versión actual de Bootstrap?

preguntado el 03 de mayo de 12 a las 18:05

8 Respuestas

Estoy usando el arranque de Twitter 2.0.1 con Play 2.0. Puede descargar una versión específica aquí: https://github.com/twitter/bootstrap/tags . Una vez que descargas el bootstrap de twitter tienes dos opciones:

  • puede optar por utilizar simplemente el bootstrap.min.css (y bootstrap-responsive.css) y bootstrap.min.js, todos estos archivos se pueden colocar en la carpeta pública.

  • o puede usar menos archivos para el css. Si desea usar menos archivos, cree el siguiente paquete (en la raíz de la carpeta de su aplicación):

    activos.hojas de estilo.bootstrap

Y al compilar Scala, define que estos archivos .less deben compilarse:

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

Y luego puedes incluirlo en tus plantillas:

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

EDITAR: 2012-09-17: Si planea compilar Play desde la fuente, siga este tutorial en la página wiki de Play: https://github.com/playframework/Play20/wiki/Tips

EDITAR: 2012-09-21: Al usar el programa de arranque, siempre tiene que elegir si cambiaría la carpeta images o agregando una ruta a las dos imágenes estáticas utilizadas por el bootstrap:

EDITAR: 2013-03-11: Como señaló xref, cometí un error: img debe ser 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")

respondido 11 mar '13, 20:03

He hecho exactamente lo mismo, pero responsive.min.css no genera. El archivo bootstrap.min.css genera ok. - selloskej

@sealskej: intente limpiar y / reiniciar su proyecto y verifique que no cometió ningún error tipográfico, debería funcionar duro ... - adis

Gracias. Lo primero que pensé fue limpiar y reiniciar, lo intenté. ¿Por errores tipográficos te refieres a errores de sintaxis? - selloskej

Sí, pueden existir errores de sintaxis, pero también nombres mal escritos, eche un vistazo a: objetificar.be/wordpress/?p=475 - adis

Un enfoque rápido y fácil de mantener es utilizar tarros web (un administrador de dependencias del lado del cliente por Defensor del desarrollador Typesafe: James Ward), con unas pocas líneas en su Build.scala, puede agregar fácilmente Bootstrap (por ejemplo, la versión 2.3, 3.0, etc.), y mucho más, a su proyecto.

1) Aquí está el ejemplo de documentación para agregar Bootstrap 2.3 a Play 2.1, En su Construir.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) Luego agregue una entrada a su rutas archivo:

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

3) Agregue los enlaces relevantes a su plantillas:

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

Nota: que WebJars realmente intentará encontrar sus recursos por usted, no necesita calificar completamente las ubicaciones de los activos.

Respondido el 02 de Septiembre de 13 a las 10:09

Agregaré, para usar Glyphicons con Bootstrap 2.2.2 y Play 2.0.4, no pude usar las rutas que adis publicó anteriormente. Moví los dos archivos de glyphicons a la carpeta 'imágenes' (el valor predeterminado de Play, no 'img', que es el valor predeterminado de Bootstrap) y los agregué a mis rutas:

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

y esto me permitió acceder a los glyphicons como una instalación de arranque normal, sin jugar con archivos 'menos', etc.

Respondido el 16 de enero de 13 a las 00:01

Agregaré que esto funciona en OS X, pero los glyphicons no aparecerán cuando se implementen en un servidor Ubuntu 10.04 Lucid. No tengo idea de por qué, pero esa ruta de /img a /images simplemente no funcionará. Tuve que editar a mano el archivo bootstrap.css para ese servidor. Me interesaría saber si este método de rutas de reproducción funciona en otros sistemas operativos. - xref

O puedes seguir este sencillo tutorial: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

Lo usé con Twitter Bootstrap 2.0.1 y Play 2.0

contestado el 03 de mayo de 12 a las 21:05

solo una nota para que no te tire de los pelos. La versión estable actual 2.0.1 no funcionará con la última versión de arranque. Tienes que tirar de la rama maestra. La razón es incompatible menos versión. El enlace que nico compartió menciona eso en algún lugar en la parte inferior. - Nasir

Uso bootstrap 2.0 con play 2.0. Todo funciona bien, excepto el helper.twitterbootstrap.

Creo que es una clase maje para twitterbootstrap 1.x, no para 2.0. ¿Alguna solución?

Edito: es trabajo

  1. Creo paquete helper/twitterBootstrap2 en app/view
  2. Luego copio path_to_play/play2.0.1/framework/src/play/src/main/scala/views/helper en helper/twitterBootstrap2
  3. Lo modifico como quiero.
  4. E importo @import helper.FieldConstructor y @import helper.twitterBootstrap2._ y @impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f en mi opinión donde quiero usarlo)

contestado el 23 de mayo de 12 a las 14:05

Simplemente actualice el arranque de Twitter y también actualice su propio código (el código específico de arranque que escribió). Consulte el siguiente enlace para obtener más información sobre la actualización a la versión más reciente: http://twitter.github.com/bootstrap/upgrading.html .

contestado el 03 de mayo de 12 a las 19:05

Tuve que hacer un par de cosas, incluso usar la última versión de Play 2.0 debido a algunos problemas que tenía la versión lanzada al compilar los archivos menos utilizados por bootstrap. Siga las instrucciones aquí https://github.com/playframework/Play20/wiki/BuildingFromSource para construir desde la fuente. Luego coloqué todos los archivos sin arranque en el directorio "app/assets/stylesheets/" de su aplicación. Play solo debe compilar "bootstrap.less", por lo que debe agregar lo siguiente a "project/Build.scala":

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

Si está utilizando cualquiera de los complementos de javascript de arranque, deberá agregarlos a "public/javascripts" e incluirlos en su HTML.

contestado el 03 de mayo de 12 a las 20:05

MÉTODO DE GUIÓN (Desde aquí)

1- Copie los archivos menos de bootstrap en app/assets/stylesheets/bootstrap

2- Ejecute este script en app/assets/stylesheets/bootstrap copiándolo y pegándolo en un shell/terminal (el script cambiará el nombre de los archivos parciales y editará la ruta de las importaciones):

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

Aviso: el guión anterior no funciona en Mac! En Mac usa esto:

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- Incluir el CSS compilado

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

Respondido 09 ago 13, 14:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.