Как использовать Twitter Bootstrap 2 с play framework 2.x

Я знаю, что текущее Play! У дистрибутива есть помощник для Bootstrap 1.4. Что делать, если я хочу использовать текущую версию Bootstrap?

Ответ 1

Я использую загрузку 2.0.1 twitter с помощью Play 2.0. Вы можете скачать определенную версию здесь: https://github.com/twitter/bootstrap/tags. После загрузки загрузочного буфера twitter у вас есть два варианта:

вы можете просто использовать bootstrap.min.css (и bootstrap-responsive.css) и bootstrap.min.js, все эти файлы можно поместить в общую папку.
или вы можете использовать меньше файлов для css. Если вы хотите использовать меньше файлов, вы делаете следующий пакет (в корневой папке вашего приложения):

assets.stylesheets.bootstrap

И встраивая scala, вы определяете, что эти .less файлы должны быть скомпилированы:

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

И затем вы можете включить его в свои шаблоны:

<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: Если вы планируете создавать Play из исходного кода, следуйте этому руководству на странице вики-воспроизведения: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012-09-21: При использовании бутстрапа вам всегда нужно сделать выбор: измените ли вы папку images или добавьте маршрут к двум статическим изображениям, используемым бутстрапом:

EDIT: 2013-03-11: Поскольку xref указал, я допустил ошибку: img должен быть 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")

Ответ 2

Быстрый и удобный подход заключается в использовании WebJars (менеджер зависимостей на стороне клиента с помощью Featureafe Dev Advocate: James Ward), с несколькими строками в вашей Build.scala, вы можете легко добавить Bootstrap (например, версию 2.3, 3.0 и т.д.) - и многое другое - к вашему проекту.

1) Здесь приведен пример документации для добавления Bootstrap 2.3 для воспроизведения 2.1 в 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) Затем добавьте запись в свой маршрут:

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

3) Добавьте соответствующие ссылки к шаблонам:

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

Обратите внимание, что WebJars на самом деле попытается найти ваши ресурсы для вас, вам не нужно полностью квалифицировать расположение активов.

Ответ 3

Я заберу, чтобы использовать Glyphicons с Bootstrap 2.2.2 и Play 2.0.4. Я не мог использовать маршруты, которые adis разместил выше. Я переместил два файла глификонов в папку "images" (по умолчанию "По умолчанию", а не "img", который является значением Bootstrap) и добавил к моим маршрутам:

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

и это позволит мне получить доступ к глификонам, как обычная загрузка бутстрапа, не возиться с "менее" файлами и т.д.

Ответ 4

Или вы можете следовать этому простому учебнику: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

Я использовал его с Twitter Bootstrap 2.0.1 и Play 2.0

Ответ 5

Я использую bootstrap 2.0 с игрой 2.0. Everithing работает отлично, кроме helper.twitterbootstrap.

Я думаю, что это класс maje для twitterbootstrap 1.x, а не для 2.0. Любое решение?

Изменить: он работает

Я создаю помощник /twitterBootstrap 2 в приложении/представлении
Затем я копирую path_to_play/play2.0.1/framework/src/play/src/main/ scala/views/helper в helper/twitterBootstrap2
Я модифицирую его, как хочу.
И я импортирую @import helper.FieldConstructor и @import helper.twitterBootstrap2._ и @impliciteField = @(FieldContructor (twitterBootstrap2FieldContructor.f в моем представлении, где я хочу использовать его

Ответ 6

Вы просто обновляете загрузочный твиттер, а также обновляете свой собственный код (специальный код загрузочного кода, который вы написали). Посмотрите следующую ссылку для получения дополнительной информации об обновлении до последней версии: http://twitter.github.com/bootstrap/upgrading.html.

Ответ 7

Мне пришлось сделать пару вещей, в том числе использовать последнюю версию Play 2.0 из-за некоторых выпусков выпущенной версии с компиляцией меньших файлов, используемых бутстрапом. Следуйте инструкциям здесь https://github.com/playframework/Play20/wiki/BuildingFromSource для сборки из исходного кода. Затем я поместил все файлы с загрузкой меньше в каталог "app/assets/stylesheets/" вашего приложения. Play должен компилировать только "bootstrap.less", поэтому вам нужно добавить следующее в "project/Build.scala":

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

Если вы используете какой-либо из плагинов javascript для загрузки, вам нужно добавить их в "public/javascripts" и включить их в свой HTML.

Ответ 8

SCRIPT МЕТОД (из здесь)

1- Скопируйте загрузочные файлы меньше файлов в app/assets/stylesheets/bootstrap

2- Запустите этот script в app/assets/stylesheets/bootstrap, скопировав его в оболочку/терминал (script переименуйте частичные файлы и отредактируйте путь импорта):

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

Примечание: выше script не работает на Mac! На Mac используйте этот:

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- Включить скомпилированный CSS

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