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

Question

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

Answer 1

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

• se puede optar por utilizar sólo el bootstrap.min.css (y bootstrap-responsive.css) y bootstrap.min.js, todos estos archivos puede ser colocado en la carpeta pública.

• o puede usar menos archivos para el css. Si desea utilizar los archivos menos que realice el siguiente paquete (en la raíz de la carpeta de la aplicación):

  assets.stylesheets.bootstrap

Y en construir Scala se define que estas .less archivos deben ser compilados:

// 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 a continuación, puede incluirlo en sus 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: 17/09/2012: Si usted planea construir Juego de la fuente, siga este tutorial del juego wiki página: https://github.com/playframework/Play20/wiki/Tips

EDIT: 21/09/2012: Cuando se utiliza el sistema de arranque se siempre tiene que tomar una decisión si desea cambiar la carpeta images o añadir una ruta a las dos imágenes estáticas utilizadas por el sistema de arranque:

EDIT: 11/03/2013: Como referencia externa señaló, que cometió 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") 

Answer 2

Acabas de actualizar twitter bootstrap y también actualizas tu propio código (el código específico de bootstrap que escribiste). 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.

Answer 3

Tuve que hacer un par de cosas, incluida la utilización de la última versión de Play 2.0 debido a algunos problemas que tuvo la versión lanzada al compilar menos archivos utilizados por bootstrap. Siga las instrucciones aquí https://github.com/playframework/Play20/wiki/BuildingFromSource para compilar desde la fuente. Luego puse todos los archivos bootstrap menos en el directorio "app/assets/stylesheets /" de su aplicación. Juega sólo debe compilar "bootstrap.less" lo que es necesario añadir lo siguiente a "proyecto/Build.scala":

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

Si está utilizando cualquiera de los plugins javascript arranque que necesita para añadirlos a "public/javascripts" e incluirlos en su HTML.

Answer 4

O usted puede seguir este tutorial fácil: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

Lo utilicé con Twitter Bootstrap 2.0.1 and Play 2.0

Answer 5

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

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

Editar: es un trabajo

1. creo paquete de ayudante/twitterBootstrap2 en app/vista
2. A continuación copio path_to_play/play2.0.1/marco/src/reproducción/src/main/Scala/views/ayudante en helper/twitterBootstrap2
3. Lo modifico como quiero.
4. Y puedo importar @import helper.FieldConstructor y @import helper.twitterBootstrap2._ y @impliciteField = @ (FieldContructor (twitterBootstrap2FieldContructor.f en mi opinión donde quiero usarlo

Answer 6

tiraré 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 glifos en la carpeta 'images' (el valor predeterminado de Play, no 'img', es el valor predeterminado de Bootstrap) y se agregó 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 permite acceder al glyphico ns como un arranque normal de instalar, no jugar con los archivos 'menos' etc

Answer 7

Un enfoque rápido y fácil de mantener es utilizar WebJars (un administrador de la dependencia del lado del cliente por Typesafe Dev Advocate: James Ward), con unas pocas líneas en su Build.scala, se puede agregar fácilmente Bootstrap (p. ej. versión 2.3, 3.0, etc.) - y mucho más - para su proyecto.

1) Here's the documentation example for adding Bootstrap 2.3 to Play 2.1, en su 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) A continuación, añadir una entrada a sus rutas archivo:

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

3) Añadir los enlaces pertinentes a sus 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á y encontrará sus recursos para usted, no es necesario que califique por completo las ubicaciones de los activos.

Answer 8

SCRIPT MÉTODO (de here)

menos archivos

1- Copia de arranque en app/assets/stylesheets/bootstrap

2- Ejecutar este proceso en app/assets/stylesheets/bootstrap al copiar y pegar en un shell/terminal (el guión te cambiar el nombre de los archivos parciales y modificar 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: la secuencia de comandos anterior no funciona en Mac!En Mac utilizan este:

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