2

Twitter ブートストラップを使用して、アプリケーションを本番環境にデプロイした人はいますか? いくつかのリソースに案内してもらえますか? レールキャストも見ましたが、詳しく解説しているブログがあれば教えてください。Twitterブートストラップ以外のフロントエンドのオプションはありますか? また、JavaScriptオプションはありますか?

4

3 に答える 3

4

私は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

于 2012-04-12T14:25:45.490 に答える
2

Bootstrap はフロントエンドではありません。見栄えの良い出発点を作成することで、サイトのデザインを開始する方法です。これは主に CSS (まあ、LESS) で、追加の UI 機能を追加するためのオプションの JavaScript がいくつか追加されています。

Rails アプリのフロント エンドの構築に実際に興味がある場合は、Backbone.jsに興味があるかもしれません。バックボーンは、HTML DOM をデータ (Rails から) にリンクする方法であり、何かを行うたびにページを更新する必要がない単一ページのアプリに最適です。バックボーンを学習するための出発点としては、Code School のバックボーンの解剖学のチュートリアルが適しています。偶然にも、Code School には他にもお好みのコースがたくさんあります。

于 2012-04-12T12:40:16.323 に答える
1

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.jsapp/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 ヘルパーを使用します。

<%= 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または、コンパイル済みのフレームワークをここからダウンロードできます。

于 2012-04-12T14:01:25.233 に答える