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

Question

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

Answer 1

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

• вы можете просто использовать 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) 
) 

И тогда вы можете включить его в ваших 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: Если вы планируете построить Play от источника, следовать этой обучающей 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") 

Answer 2

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

Answer 3

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

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

Если вы используете какой-либо из начальной загрузки Java-плагинов вам необходимо добавить их в «public/javascripts» и включить их в свой HTML.

Answer 4

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

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

Answer 5

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

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

Edit: это работа

1. создать пакет помощника/twitterBootstrap2 в приложение/вид
2. Затем я скопировать path_to_play/play2.0.1/рамки/SRC/воспроизведение/SRC/главная/Scala/просмотров/помощник в помощнике/twitterBootstrap2
3. Модифицировать это как я хочу.
4. И я импортировать @import helper.FieldConstructor и @import helper.twitterBootstrap2._ и @impliciteField = @ (FieldContructor (twitterBootstrap2FieldContructor.f на мой взгляд, где я хочу, чтобы использовать его

Answer 6

брошу чтобы использовать Glyphicons с Bootstrap 2.2.2 и Play 2.0.4 Я не мог полностью использовать маршруты, которые были размещены выше. Я переместил два файла глификонов в папку «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") 

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

Answer 7

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

1) Here's the documentation example for adding Bootstrap 2.3 to Play 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 действительно попытается найти ваши ресурсы для вас, вам не нужно полностью квалифицировать места активов.

Answer 8

SCRIPT МЕТОД (от here)

меньше файлов

1- Copy бутстрапе в в app/assets/stylesheets/bootstrap

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

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 

Уведомление: вышеупомянутый скрипт не работает на 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")" />