Twitter ブートストラップを使用して、アプリケーションを本番環境にデプロイした人はいますか? いくつかのリソースに案内してもらえますか? レールキャストも見ましたが、詳しく解説しているブログがあれば教えてください。Twitterブートストラップ以外のフロントエンドのオプションはありますか? また、JavaScriptオプションはありますか?
3 に答える
私は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
Bootstrap はフロントエンドではありません。見栄えの良い出発点を作成することで、サイトのデザインを開始する方法です。これは主に CSS (まあ、LESS) で、追加の UI 機能を追加するためのオプションの JavaScript がいくつか追加されています。
Rails アプリのフロント エンドの構築に実際に興味がある場合は、Backbone.jsに興味があるかもしれません。バックボーンは、HTML DOM をデータ (Rails から) にリンクする方法であり、何かを行うたびにページを更新する必要がない単一ページのアプリに最適です。バックボーンを学習するための出発点としては、Code School のバックボーンの解剖学のチュートリアルが適しています。偶然にも、Code School には他にもお好みのコースがたくさんあります。
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
ます。
スタイルを適用するには、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
。または、コンパイル済みのフレームワークをここからダウンロードできます。