Rails 3.2.3中的Twitter-Bootstrap

Question

有人在生產中使用過Twitter Bootstrap並部署了應用程序嗎？ 你能指導我一些資源嗎？ 我看過railscasts，但是否有博客提供詳細說明。 除twitter bootstrap之外，前端還有其他選擇嗎？ 此外，是否有任何javascript選項？

Answer 1

我很喜歡從Ruby來源閱讀以下文章：

http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/

http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app/

另外，如果您只想自定義TB的外觀，請查看http://stylebootstrap.info/

這是大量的引導程序擴展/插件： http : //www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Answer 2

事情是這樣的：Bootstrap不是前端。 這是一種通過創建美觀的起點來開始網站設計的方法。 它主要是CSS（當然是LESS），並添加了一些可選的JavaScript，以添加額外的UI功能。

如果您實際上對構建Rails應用程序的前端感興趣，則可能對Backbone.js感興趣。 骨干網是一種將HTML DOM與數據（來自Rails）鏈接的方法，非常適合單頁應用程序，該應用程序每次執行任何操作都不需要刷新頁面。 學習骨干的一個很好的起點是Code School的《骨干解剖》教程。 巧合的是，Code School還提供了許多您可能喜歡的其他課程。

Answer 3

要將CSS和JavaScript鏈接到視圖，可以使用Asset Tag Helpers 。

舉個例子：

<%= javascript_include_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap" %>

如果這些是文件名，則會生成鏈接到bootstrap.js和bootstrap.css標簽。

javascript_include_tag提取相對於app/assets/javascripts腳本
stylesheet_link_tag相對於app/assets/stylesheets stylesheet_link_tag拉出樣式app/assets/stylesheets

如果要引用目錄結構中的文件（即資產不在上述文件夾的根目錄中），則可以相對於這些根文件夾進行鏈接：

<%= javascript_include_tag "/bootstrap/bootstrap-min" %>
<%= stylesheet_link_tag "/bootstrap/bootstrap" %>

這些標記將引用app/assets/javascripts/bootstrap/bootstrap-min.js和app/assets/stylesheets/bootstrap/bootstrap.css 。

要應用樣式，您將在bootstrap.css中使用樣式表類和ID。 例如，用於分叉Twitter引導程序的按鈕看起來像

<a href="https://github.com/twitter/bootstrap/" 
   class="btn btn-primary btn-large">View project on GitHub</a>

您將使用URL Helper ：

<%= link_to "View project on GitHub", 
             "https://github.com/twitter/bootstrap/", 
             :class => "btn btn-primary btn-large" %>

編輯：

如果您在Github上查看代碼並對.less擴展名感到困惑，那是因為Bootstrap使用了稱為Less的CSS生成框架。 您需要運行make bootstrap並確保已安裝lessc 。 或者，您可以在此處下載已編譯的框架。