Twitter-Bootstrap in Rails 3.2.3

Question

誰かがtwitterのブートストラップを使って、実稼働環境にアプリケーションをデプロイしましたか？あなたは私をいくつかのリソースに導くことができますか？私は鉄道を見ましたが、詳細な説明をするブログがあれば見ました。 twitterブートストラップ以外のフロントエンドには他のオプションはありますか？また、任意のjavascriptのオプションはありますか？

Answer 1

私はRubyのソースからこの記事を読んで楽しんだ：また、あなただけのTBの外観をカスタマイズしたい場合は、ここでhttp://stylebootstrap.info/

をチェックするには巨大である

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/

をブートストラップ拡張機能/プラグインのリスト： http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Answer 2

ここが問題です：ブートストラップはフロントエンドではありません。これは、まともな外観の出発点を作成することで、サイトの設計を開始する方法です。主にCSS（よく、LESS）であり、余分なUI機能を追加するためにJavaScriptをいくつか追加しています。

実際にRailsアプリのフロントエンドを構築することに興味がある場合は、Backbone.jsに興味があるかもしれません。バックボーンは、あなたのHTML DOMをあなたのデータ（Railsから）と結びつける方法であり、何かをするたびにページの更新を必要としない単一ページのアプリケーションに最適です。バックボーンを学ぶための良い出発点は、コードスクールのAnatomy of Backboneチュートリアルです。偶然にも、コードスクールでは他にもたくさんのコースを用意しています。

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

に対するスタイルシートを引っ張りますこれらのルートフォルダからの相対：

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

これらのタグは、app/assets/javascripts/bootstrap/bootstrap-min.jsとapp/assets/stylesheets/bootstrap/bootstrap.cssを参照します。

スタイルを適用するには、スタイルシートクラスとidをbootstrap.cssで使用します。あなたはGitHubの上のコードを見て混乱している場合

：

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

編集：たとえば、Twitterのブートストラップをフォークするボタンをクリックすると、URL Helperを使用します

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

のように見えます .less拡張子です。これは、BootstrapがLessと呼ばれるCSS生成フレームワークを使用するためです。 make bootstrapを実行し、 lesscがインストールされていることを確認する必要があります。または、すでにコンパイルされたフレームワーク hereをダウンロードできます。