Web サイトhttps://wrapbootstrap.com/には、Twitter Bootstrap を使用して作成されたテーマがあります。これらの各テーマには、さまざまなバージョンの Twitter Bootstrap と、他のさまざまなライブラリおよびバージョン (jquery、fontawesome など) が含まれています。
これらのテーマを既存の Rails アプリに追加するにはどうすればよいですか? 手順は何ですか？
jquery、twitter ブートストラップ、fontawesome など (Gemfile で宣言されている) の別のバージョンを既に使用している場合に発生する可能性のある競合について特に興味があります。
ありがとうございました
wrapbootstrap から購入したテーマの css を assets > application.css.scss ファイルに追加できます。そして、css スタイルが適用されるように、Rails アプリのビューでテーマに付属の html タグを使用します。
また、gem 'sass-rails'標準のブートストラップ スタイルをインポートするために使用することをお勧めします。
これは、Rails アプリにブートストラップを追加するためのチュートリアルです。テーマの css および html タグの追加はあなた次第です。
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
私はいくつかのプロジェクトでこれを行いました.Mikeが上で答えたことに主に同意します. ここに私が見た落とし穴のいくつかがあります。
Rails の標準プロジェクトとして開始し、すべてのビューの動的 (Ember)/静的は Bootstrap CSS に基づいていました。主要な内部ページがアップされ、機能が実証されたとき、私たちはランディング ページに焦点を当てました。この時点で、bootstrap 用の gem と fontawesome が Gemfile に追加されています。
そのため、これらの gem "bootstrap"、"fontawesome" を Gemfile から削除することも 1 つです。これらを wrapbootstrap ダンプの一部として含めます。
また、統合を進めていくと、多くの一般的なコードが繰り返されていることに気付くかもしれません。ページ コンポーネント (ヘッダー、フッターなど) を部分的な Rails ビューとして分割することをお勧めします。編集の労力を大幅に節約できます。
まだ統合段階にある間、すべてを維持するのに非常に役立つことがわかったもう 1 つのことは、CSS/JS インクルードをラップ ブートストラップからインポートされたページと既に持っているページに分割することです。そのため、既存のすべてのページを CSS をスクレイピングして新しいテーマに移行する場合は、段階的にマージできます。そうでない場合は、それらを共存させることができます。
ページをまだ持っていない場合は、routes.rb に新しいエントリを追加する必要があります。これは、ページをサポートするためのコントローラー呼び出しです。about、contactus、team などの好きなもの
また、Ember/Backbone などを使用する場合、Wrapbootstrap ページにリンクされているかどうかに関係なく、一部のページで単一ページャー アプリの共存を管理する必要があります。
これは、Rails-EmberJS アプリの上に wrapbootstrap テーマを統合するときに注意しなければならなかったすべてのことです。
私はちょうどこれを自分でしなければならなかったので、興味深いタイミング. 私はまだRailsにかなり慣れていないので、これが最善の解決策ではないかもしれませんが、私がそれを機能させる方法は次のとおりです...
注: すべてのテーマは異なるため、これが万能のアプローチではない場合があります。
1) 私のテーマはMiddlemanで構築されており、スタンドアロンまたはSinatraインスタンスで実行されることを期待していました。
2) Rails でテーマを作成するために、compass gem、sass gem、sass-rails gem、および compass-rails gem を正しく機能させるために追加する必要がありました。これらをインストールできると仮定しています（テーマに必要な場合）。
3) Rails アプリをロールする準備ができていると仮定して、assets ディレクトリに移動し、.js、.css、およびすべてのフォントと画像をバックアップします。テーマ アセット ファイルを適切な場所に配置します。
4）ビューレイヤーで同じことを行います. ビューディレクトリに配置できるパーシャルおよび/またはページフォルダーがある場合があります。application.erb.html とすべてのナビゲーション ファイルを、views ディレクトリの下の layouts フォルダーに配置します。繰り返しますが、最初に元のファイルをバックアップしてください。
5) テーマが Sinatra 用に設計されている場合、Config.rb ファイルがある可能性があります。このファイルから config/environment.rb ファイルにロジックを移動しました。私はこのステップに最も自信がありませんでした。より良い場所があれば、他の Rails 開発者も参加できます。
6) サーバーを起動します。いくつかの例外が発生する場合がありますが、これは予期されることです。
7) 古い app/assets/javascripts/application.js ファイルを見て、新しいファイルと比較します。新しいファイルに jquery ujs ライブラリが含まれていることを確認します//= require jquery_ujs。このちょっとした魔法がなければ、PUT および DELETE HTTP 動詞は正しく機能しません。
8) パスの調整。私のテーマには、Font Awesome ライブラリが含まれていました。機能させるには、font-awesome.scss ファイルの先頭にある参照パスを調整する必要がありました。
9) 最後に、environment.rb ファイルに新しく追加されたコードをデバッグする必要があります。Sinatra の開発者は、ナビゲーション表示を調整するために多くのルート マジックを行っていました。これは私の環境にうまく移植されていませんでした。これらの呼び出しの多くをナビゲーション テンプレート ファイルから削除しました。完了すると、新しくスキンを適用したアプリが起動して実行されました。幸運を。
このトレーニング コースを視聴して、その方法を詳細にゼロから説明します。