Cách sử dụng Twitter Bootstrap 2 với khung chơi 2.x

Question

Tôi biết rằng Chơi hiện tại! phân phối có một trợ giúp cho Bootstrap 1.4. Tôi nên làm gì nếu tôi muốn sử dụng phiên bản Bootstrap hiện tại?

Answer 1

Tôi đang sử dụng trình khởi động twitter 2.0.1 với Play 2.0. Bạn có thể tải xuống phiên bản cụ thể tại đây: https://github.com/twitter/bootstrap/tags. Khi bạn tải về twitter bootstrap bạn có hai lựa chọn:

• bạn có thể chọn để chỉ cần sử dụng bootstrap.min.css (và bootstrap-responsive.css) và bootstrap.min.js, tất cả những tập tin có thể được đặt trong thư mục công cộng.

• hoặc bạn có thể sử dụng ít tệp hơn cho css. Nếu bạn muốn sử dụng các tập tin ít bạn thực hiện các gói sau (trong thư mục gốc của thư mục ứng dụng của bạn):

  assets.stylesheets.bootstrap

Và trong bạn xây dựng scala bạn xác định rằng những .less file nên được biên soạn:

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

Và sau đó bạn có thể bao gồm nó trong templats của bạn:

<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: Nếu bạn có kế hoạch để xây dựng Phát từ nguồn, hãy làm theo hướng dẫn này wiki Chơi page: https://github.com/playframework/Play20/wiki/Tips

EDIT: 2012/09/21: Khi sử dụng bootstrap bạn luôn luôn phải thực hiện một sự lựa chọn cho dù bạn có thể thay đổi thư mục images hoặc thêm một tuyến đường đến những hình ảnh tĩnh hai được sử dụng bởi bootstrap:

EDIT: 2013/03/11: Như xref chỉ, tôi đã phạm sai lầm : img phải là 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

Bạn chỉ cần cập nhật twitter bootstrap và cũng cập nhật mã của riêng bạn (mã đặc biệt bootstrap bạn đã viết). Xem liên kết sau để biết thêm thông tin về việc cập nhật lên phiên bản mới nhất: http://twitter.github.com/bootstrap/upgrading.html.

Answer 3

Tôi phải làm một vài việc, kể cả sử dụng phiên bản Play 2.0 mới nhất do một số vấn đề mà phiên bản đã phát hành có khi biên dịch ít tệp hơn được bootstrap sử dụng. Thực hiện theo các hướng dẫn tại đây https://github.com/playframework/Play20/wiki/BuildingFromSource để xây dựng từ nguồn. Sau đó, tôi đặt tất cả các tệp khởi động ít hơn trong thư mục "app/assets/stylesheets /" của ứng dụng của bạn. Chơi chỉ cần biên dịch "bootstrap.less", do đó bạn cần phải thêm dòng sau vào "dự án/Build.scala":

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

Nếu bạn đang sử dụng bất kỳ bootstrap javascript plugins bạn sẽ cần phải thêm chúng vào "công khai/javascripts" và bao gồm chúng trong HTML của bạn.

Answer 4

Hoặc bạn có thể làm theo hướng dẫn đơn giản này: https://plus.google.com/u/0/108788785914419775677/posts/QgyUF9cXPkv

tôi đã sử dụng nó với Twitter Bootstrap 2.0.1 and Play 2.0

Answer 5

Tôi sử dụng bootstrap 2.0 với phiên bản 2.0. Everithing làm việc tốt, exept helper.twitterbootstrap.

Tôi nghĩ rằng đó là lớp học tuyệt vời cho twitterbootstrap 1.x, không phải cho 2.0. Bất kỳ giải pháp nào?

Chỉnh sửa: đó là công việc

1. tôi tạo gói helper/twitterBootstrap2 trong app/view
2. Sau đó, tôi sao chép path_to_play/play2.0.1/framework/src/chơi/src/main/scala/views/helper trong helper/twitterBootstrap2
3. Tôi sửa đổi nó như tôi muốn.
4. Và tôi nhập @import helper.FieldConstructor và @import helper.twitterBootstrap2._ và @impliciteField = @ (FieldContructor (twitterBootstrap2FieldContructor.f theo quan điểm của tôi, nơi tôi muốn sử dụng nó

Answer 6

tôi sẽ ném để sử dụng Glyphicons với Bootstrap 2.2.2 và Play 2.0.4, tôi không thể sử dụng các tuyến mà adis đăng ở trên. Tôi đã chuyển hai tệp glyphicons vào thư mục 'images' (mặc định Play, chứ không phải 'img' là mặc định Bootstrap) và được thêm vào các tuyến đường của tôi:

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

và điều này cho phép tôi truy cập vào glyphico ns giống như bản cài đặt bootstrap bình thường, không gây rối với các tệp 'ít', v.v.

Answer 7

Cách tiếp cận nhanh chóng và duy trì là sử dụng WebJars (một người quản lý phụ thuộc phía máy khách theo Typesafe Dev Advocate: James Ward), với một vài dòng trong Build.scala, bạn có thể dễ dàng thêm Bootstrap (ví dụ phiên bản 2.3, 3.0, v.v.) - và nhiều hơn nữa - cho dự án của bạn.

1) Here's the documentation example for adding Bootstrap 2.3 to Play 2.1, trong bạn 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) Sau đó, thêm một mục vào tuyến đường của bạn file:

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

3) Thêm các liên kết có liên quan đến các mẫu :

của bạn 0

Lưu ý rằng WebJars thực sự sẽ cố gắng tìm tài nguyên cho bạn, bạn không cần phải đủ điều kiện cho vị trí nội dung.

Answer 8

SCRIPT PHƯƠNG PHÁP (từ here)

1- Sao chép bootstrap của file ít vào app/assets/stylesheets/bootstrap

2- Chạy kịch bản này trong app/assets/stylesheets/bootstrap bằng cách sao chép và dán nó trong một vỏ/thiết bị đầu cuối (kịch bản sẽ đổi tên các tệp một phần và chỉnh sửa đường dẫn của hàng nhập):

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 

Thông báo: tập lệnh ở trên không hoạt động trên máy Mac!Trên Mac sử dụng này:

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- Bao gồm CSS biên soạn

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