2012-08-14 69 views
21

我剛剛在SO上遇到了Twitter Bootstrap。我已經通過一些在線教程脫脂,如果我的理解至今是正確的,使用TB基本上包括:Symfony2和Twitter Bootstrap

  1. 下載TB,提取CSS文件等
  2. 引用所需的CSS,JS文件在您的HTML文檔和使用定義的CSS模式

我想使用Twitter Bootstrap和Symfony2。鑑於我對如何使用結核病的理解,我認爲與Symfony一起使用它相對容易,所以我很驚訝地發現有幾個(實際上有幾個)Bundle與Symfony一起使用。

所以我的問題是:

  1. 爲什麼一個包需要使用Twitter的引導與Symfony2的? - 我上面解釋的方法會不起作用(即直接在樹枝模板中添加引用)?

  2. 由於有幾個Twitter的引導束可(在最近的一次統計有3個),這是最容易使用的(它必須是一個正在使用最新提交的支持,而不是一個死的項目)

回答

32

我很確定這些套餐很棒,但它們有優點和缺點。你也可以直接在你的項目中使用沒有捆綁的TB。這是我親手做的,那樣:在網絡

  • 混帳克隆TB /(以獲得最新的更新和保持更新)
  • 我直接打電話bootstrap.less在我與Assetic樹枝模板和更少的過濾器。這樣,我就可以創建我自己的.less文件,這些文件包含@import TB並使用他們令人驚訝的mixin。

這種方式非常強大。再加上yui-compressor,當我在無調試模式下使用Assetic時,我所有的js和less文件被編譯成一個.css輸出和一個.js輸出。並且您可以從所有TB功能中受益,無需使用.css

+0

感謝您的及時答覆。你是一個拯救生命的人!我正在撕掉我的頭髮,去哪個方向。當你有一點時,你能否詳細說明一下?使用Assetic,yui-compressor等顯示樹枝模板的小片段,所需的配置設置等等都非常棒,因爲這對我來說是很多新技術。謝謝 – 2012-08-14 13:33:09

+3

這本食譜應該完美適合你:http://symfony.com/doc/current/cookbook/assetic/yuicompressor.html;) – guillaumepotier 2012-08-14 14:00:19

+0

+1。 – 2012-08-14 16:03:28

3

您可以使用Twitter Boostrap(TB)將css添加到項目中。然後,你有一個起點去做比從頭開始更直觀的事情。正如你在第一部分中所描述的那樣。

但是,您還可以從處理模板與TB集成的Bundle中檢索更有趣的內容。例如:

例如,用symfony 1.4(我知道SF2這個帖子談判),你有一個插件,可以添加新的主題管理生成器有一個很好的TB集成,而不是默認的。我知道sf2中沒有官方的管理生成器,但它可以用於CRUD。(除了來自核心團隊的消息(FOS * Bundle,Doctrine,Propel,等)以外,其他的東西可以是真正的,因爲symfony 1.0,並不是所有的bundle都很好地實現,開發,維護,測試,記錄等。等等))。所以我建議你測試一下,看看它們中的一個是否適合你的需要,或者採取靈感來改進它們(它們幾乎都在github上)或者建立你自己的。

而且順便說一句,有many Bundle ..

7

有跡象表明,提供了與Twitter的引導symfony中整合2個大包:

在我看來:

MopaBootstrapBundle比較複雜,提供了自己的佈局結構(的原因,你可以創建自己太)和很多定義的功能,額外的assetic,形式等一體化

BcBootstrapBundle更簡單和更清晰你使用自己的佈局結構,並有很多定義的功能,額外的資產,形式和其他集成太

不使用任何intergtaion捆綁也是一種選擇,但你鬆散與形式,資產,少和整合所以(正如@Acyra在他的評論中提到的)

我更喜歡使用帶有額外集成功能的BcBootstrapBundle,並使用我自己的自定義佈局結構。

1

對Symfony和Bootstrap的更新: Symfony在他們的文檔的細節中總是顯得有點落後,所以這裏是對Symfony的更新。現在版本2.6和更高版本包括與Twitter Bootstrap的基本集成。

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

希望這樣可以節省別人的時間,可以得到它的工作,因爲他們上面的Symfony文檔中解釋!

+0

但第三方包內怎麼樣?像Fos UserBundle – Dheeraj 2015-07-07 12:54:44

+1

根據Symfony的文檔,引入Bootstrap應該像擴展主題視圖一樣簡單,或者在這些文檔中嵌入一個片段。由於Bootstrap主要是JS和CSS的庫,所以任何bundle都應該能夠訪問這些資產。 「新形式的主題有兩種形式:正常佈局和水平佈局要應用此新的主題,以您的應用程序的所有形式,使用以下配置: {%form_theme形式‘bootstrap_3_layout.html.twig’% } {#{%form_theme form'bootstrap_3_horizo​​ntal_layout.html.twig'}}#}「 – 2015-07-07 13:02:53