Sé que los actuales Jugar! la distribución cuenta con un ayudante para el Bootstrap 1.4. ¿Qué debo hacer si quiero utilizar la versión actual de Bootstrap?

InformationsquelleAutor Ahmed Aswani | 2012-05-03

8 Comentarios

  1. 38

    Estoy usando la 2.0.1 twitter bootstrap con el Juego 2.0. Usted puede descargar una versión específica aquí: https://github.com/twitter/bootstrap/tags . Una vez descargado el twitter bootstrap tiene dos opciones:

    • puede elegir utilizar el bootstrap.min.css (y bootstrap-responsive.css) y bootstrap.min.js, todos estos archivos pueden ser colocados en la carpeta pública.

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

      activos.las hojas de estilo.bootstrap

    Y en construir scala puede definir que estos .menos 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, usted puede incluir en su 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")" />

    EDICIÓN: 2012-09-17:
    Si usted planea construir el Juego desde la fuente, siga este tutorial el Juego de la página de la wiki: https://github.com/playframework/Play20/wiki/Tips

    EDICIÓN: 2012-09-21:
    Cuando se utiliza el bootstrap siempre tienes que hacer la elección si le cambio la carpeta images o la adición de una ruta a las dos imágenes estáticas utilizadas por el bootstrap:

    EDICIÓN: 2013-03-11:
    Como xref señaló, he cometido 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")
    • He hecho exactamente lo mismo, pero sensible.min.el css no generar. Archivo bootstrap.min.css genera aceptar.
    • trate de limpiar y / reiniciar tu proyecto y verificar que usted no hizo ningún error, debe trabajar duro..
    • Gracias. Limpiar y reiniciar se piensa primero, traté de para. Por los errores tipográficos que la media de errores de sintaxis?
    • Sí sintaxis de errores podría ser, pero también los nombres mal escritos, echa un vistazo a: objetivar.ser/wordpress/?p=475
  2. 33

    Una rápida y fácil de mantener enfoque es el uso de WebJars (del lado del cliente el administrador de la dependencia por Typesafe Dev Defensor: James Ward), con un par de líneas en su construcción.scala, usted 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á la documentación de ejemplo para agregar Bootstrap 2.3 Jugar 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), a Continuación, agregue una entrada para tu rutas de archivo:

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

    3) Agregar los enlaces pertinentes para 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 va a intentar y encontrar los recursos para usted, usted no necesita lleno de calificar las localizaciones de activos.

  3. 4

    Voy a tirar, el uso de Glyphicons con Bootstrap 2.2.2 y Jugar 2.0.4 yo no podía usar las rutas que adis publicado anteriormente. Me mudé a los dos glyphicons archivos en el ‘imágenes’ de la carpeta (el Juego por defecto, no ‘img’, que es el proceso de arranque por defecto) y agregado 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 eso me permitió tener acceso a la glyphicons como una normal de bootstrap de instalar, sin meterse con ‘menos’ archivos, etc

    • Buen punto. Sustituido img por imágenes
    • Voy a tirar en esta funciona en OS X, pero glyphicons no aparecerá cuando se implementa en un Ubuntu 10.04 Lucid servidor. Ni idea de por qué, pero esa ruta de /img /imágenes simplemente no va a funcionar. Tenía a mano editar el bootstrap.archivo css para ese servidor. Me interesaría saber si este Juego rutas método funciona en otros sistemas operativos.
  4. 2

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

    Yo lo he utilizado con Twitter Bootstrap 2.0.1 y Jugar 2.0

    • sólo una nota para que no tire de los pelos. Actual versión estable 2.0.1 no funcionará con la última versión de bootstrap. Usted tiene que tirar de la rama principal. La razón es incompatible menos la versión. El enlace nico compartido menciona que en algún lugar en la parte inferior.
  5. 2

    Puedo usar bootstrap 2.0 con el juego 2.0 . Todo lo que funcione bien,exepto el ayudante.twitterbootstrap.

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

    Edit : es un trabajo

    1. Puedo crear paquete de ayudante/twitterBootstrap2 en app/view
    2. Luego me copia path_to_play/play2.0.1/marco/src/play/src/main/scala/views/ayudante ayudante/twitterBootstrap2
    3. Yo modifique como yo quiero.
    4. Y me import @import ayudante.FieldConstructor y @import ayudante.twitterBootstrap2._
      y @impliciteField = @(FieldContructor(twitterBootstrap2FieldContructor.f en mi opinión, donde yo quiero usarlo
  6. 0

    Tuve que hacer un par de cosas, incluyendo el uso de la última versión de Play 2.0 debido a algunos problemas de la versión de lanzamiento tuvo con la compilación de los menos de los archivos utilizados por bootstrap. Siga las instrucciones aquí https://github.com/playframework/Play20/wiki/BuildingFromSource a construir desde el código fuente.
    A continuación, he puesto todos de la bootstrap menos archivos en la «app/assets/stylesheets/» directorio de la aplicación. Jugar sólo debe compilar «bootstrap.menos» por lo que deberá añadir la siguiente «project/Build.scala»:

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

    Si usted está usando alguna de las bootstrap javascript plugins que tienes que añadir a «public/javascripts» y los incluyen en su código HTML.

  7. 0

    MÉTODO de secuencia de COMANDOS (de aquí)

    1 – Copia de bootstrap menos archivos en app/assets/stylesheets/bootstrap

    2 – Ejecutar esta secuencia de comandos en app/assets/stylesheets/bootstrap copiando y pegando en una consola/terminal (el script se cambie el nombre de los archivos parciales y modificar la ruta de acceso 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 script de arriba no funciona en Mac! En el uso de Mac esta:

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

Dejar respuesta

Please enter your comment!
Please enter your name here