2012-08-14 51 views
21

Tôi vừa mới xem qua Twitter Bootstrap hôm nay, trên SO. Tôi đã lướt qua một số hướng dẫn trực tuyến và nếu hiểu biết của tôi cho đến nay là đúng, sử dụng lao về cơ bản bao gồm:Symfony2 và Twitter Bootstrap

  1. Tải TB, giải nén tập tin CSS vv
  2. Tham chiếu CSS cần thiết, các file JS tại của bạn Tài liệu HTML và sử dụng các mẫu CSS được xác định

Tôi muốn sử dụng Twitter Bootstrap với Symfony2. Với sự hiểu biết của tôi về cách sử dụng TB, tôi nghĩ rằng nó sẽ tương đối dễ sử dụng nó với Symfony, vì vậy tôi đã rất ngạc nhiên khi thấy rằng có (thực sự là một số) Gói để sử dụng với Symfony.

Vì vậy, câu hỏi của tôi là:

  1. Tại sao một Bundle cần thiết để sử dụng Twitter Bootstrap với Symfony2? - phương pháp tôi đã giải thích ở trên có hoạt động không (ví dụ: thêm các tham chiếu trực tiếp vào một khuôn mẫu)?

  2. Vì có vài Twitter Bootstrap Gói sẵn (ở số cuối cùng có 3), đó là dễ dàng nhất để sử dụng (nó phải là một mà đang tích cực hỗ trợ với cam kết gần đây, và không phải là một dự án chết)

Trả lời

32

Tôi khá chắc chắn các Gói này là tuyệt vời, nhưng chúng có lợi thế và hạn chế. Bạn cũng có thể sử dụng TB mà không cần Gói trực tiếp trong dự án của bạn. Đó là những gì cá nhân tôi làm, như vậy:

  • git clone TB trong web/(để có được thông tin cập nhật mới nhất và tiếp tục cập nhật)
  • tôi trực tiếp gọi bootstrap.less trong các mẫu cành lá của tôi với Assetic và bộ lọc ít hơn. Bằng cách đó, tôi có thể tạo các tệp .less của riêng mình mà @imports TB và sử dụng các mixin đáng kinh ngạc của họ chẳng hạn.

Nó thực sự mạnh mẽ theo cách này. Cùng với máy nén khí, khi tôi sử dụng Assetic ở chế độ không gỡ lỗi, tất cả các tệp js và ít tệp của tôi được biên dịch thành một đầu ra .css đơn và một đầu ra .js. Và bạn có thể hưởng lợi từ tất cả các chức năng của TB, trong .less, không .css

+0

Cảm ơn câu trả lời nhanh chóng của bạn. Bạn là một người tiết kiệm cuộc sống !. Tôi đã rách tóc ra, theo hướng nào để đi. Khi bạn có thời gian, bạn có thể vui lòng giải thích thêm một chút không ?. Đoạn mã nhỏ cho thấy một khuôn mẫu nhỏ bằng cách sử dụng Assetic, yui-compressor etc, các cài đặt cấu hình cần thiết, vv sẽ là tuyệt vời, vì rất nhiều trong số này là công nghệ mới cho tôi. Cảm ơn –

+3

Sách dạy nấu ăn này phải phù hợp với bạn: http://symfony.com/doc/current/cookbook/assetic/yuicompressor.html;) – guillaumepotier

+0

+1 cho liên kết. –

3

Bạn có thể sử dụng Twitter Boostrap (TB) để chỉ thêm css vào dự án của bạn. Và sau đó, bạn có một điểm khởi đầu để làm một cái gì đó trực quan hơn là bắt đầu từ đầu. Như bạn đã mô tả trong phần đầu tiên.

Tuy nhiên, bạn cũng có thể truy xuất nhiều nội dung thú vị khác từ một Gói xử lý tích hợp mẫu với TB. Ví dụ:

Ví dụ, với symfony 1.4 (Tôi biết bài này nói về SF2), bạn có một plugin mà có thể thêm một chủ đề mới cho trình tạo quản trị viên để tích hợp TB tốt đẹp thay vì mặc định. Tôi biết không có máy phát điện quản trị viên chính thức trong sf2 nhưng nó có thể được sử dụng cho CRUD.

Một điều khác có thể đúng vì symfony 1.0, không phải tất cả các gói đều được triển khai rất tốt, được phát triển, duy trì, kiểm tra, ghi lại, v.v. (trừ nhóm lõi (FOS * Bundle, Doctrine, Propel, vv ..)). Vì vậy, tôi khuyên bạn nên kiểm tra tất cả, xem liệu một trong số đó có phù hợp với nhu cầu của bạn hay không, nếu không hãy lấy cảm hứng để cải thiện chúng (chúng gần như tất cả trên github) hoặc xây dựng của riêng bạn.

Và btw, có many Bundle ..

7

Có 2 bó lớn cung cấp cho hội nhập symfony với Twitter Bootstrap:

Theo tôi:

MopaBootstrapBundle là phức tạp hơn, cung cấp cấu trúc bố trí riêng của mình (nguyên nhân bạn có thể tạo riêng của bạn quá) và rất nhiều chức năng xác định, assetic thêm, hình thức và hội nhập khác

BcBootstrapBundle là đơn giản hơn và nhiều hơn nữa rõ ràng bạn sử dụng cấu trúc bố cục của riêng mình và có rất nhiều chức năng xác định, assetic thêm, hình thức và hội nhập khác quá

không sử dụng bất kỳ gói intergtaion cũng là một lựa chọn, nhưng bạn tích hợp lỏng lẻo với các hình thức, assetic, ít hơn và vì vậy (như @Acyra đã đề cập trong nhận xét của mình)

Tôi thích sử dụng BcBootstrapBundle với chức năng tích hợp thêm và sử dụng cấu trúc bố cục tùy chỉnh của riêng tôi.

1

CẬP NHẬT vào Symfony và Bootstrap: Symfony luôn có vẻ hơi thiếu sót trong chi tiết tài liệu của họ, vì vậy đây là bản cập nhật trên Symfony. Phiên bản 2.6 trở lên hiện bao gồm tích hợp cơ bản với Twitter Bootstrap.

http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme

Hy vọng này tiết kiệm thời gian một ai đó và có thể lấy nó để làm việc như họ giải thích trong tài liệu Symfony ở trên!

+0

nhưng những gì về bên trong gói bên thứ 3?như Fos UserBundle – Dheeraj

+1

Theo tài liệu của Symfony, việc kết hợp Bootstrap phải dễ dàng như mở rộng giao diện của chủ đề, hoặc nhúng một trong các đoạn mã trong các tài liệu này. Kể từ khi Bootstrap là một thư viện chủ yếu của JS và CSS, bất kỳ gói nào cũng có thể truy cập các tài sản này. "Chủ đề biểu mẫu mới có hai hương vị: bố cục bình thường và bố cục ngang. Để áp dụng chủ đề mới này cho tất cả các dạng ứng dụng của bạn, hãy sử dụng cấu hình sau: {% form_theme form 'bootstrap_3_layout.html.twig'% } {# {% form_theme biểu mẫu 'bootstrap_3_horizontal_layout.html.twig'%} #} " –