問題タブ [twitter-bootstrap-rails]

最近、すべてのブートストラップ アセットを削除して再インストールすることで、twitter-bootstrap-railsをアップグレードしました。アプリは開発モードで正常に動作するようになりましたが、heroku に公開すると動作せず、「問題が発生しました..」というページ エラーが表示されます。したがって、本番モード用に何かが正しく構成されていないか、このエラーを修正しようとしているときに構成を台無しにしたと思います。(つまり、環境設定)

これを実稼働モードでローカルに実行すると、次のようになります。ここに環境設定も貼り付けます。誰かがセットアップで何が正しくないか教えてもらえますか?

Windows マシンで twitter-bootstrap-rails gem を動作させる作業を行っていましたが、less gem の古いバージョンに依存する 'therubyracer' gem をインストールしようとしてエラーが発生しました。

therubyracer に依存しない 2.2.1 未満にアップグレードしたと思いますが、それでもまだ therubyracer をインストールする必要があると思われるようです。Railsサーバー「rails s」を起動しようとしたときに表示されるエラーの出力は次のとおりです。

これが私GemfileのGemfile.lockファイルです。「therubyracer」をインストールする必要がないことをアプリに伝える方法を誰かが教えてくれますか?

---- Gemfile----

---- Gemfile.lock----

この回答済みの投稿に記載されているのとまったく同じ問題があります - nav-collapse not working [Twitter Bootstrap]

初心者で申し訳ありませんが、ここでの答えは、次の場所に配置する必要があることを意味すると思います。

私のapplication.html.erbファイルのHEADセクションにあります。

さて、私はこれを行いましたが、アイコンはまだ表示されていません。他に何かしなければならないことはありますか？

これが私のGEMFILEソースです：

Heroku に Rails アプリをデプロイし、twitter-bootstrap-rails gem を使用して twitter ブートストラップを含めています。すべてがローカル (および開発環境) で完全に機能しますが、Heroku (および本番環境) では、小さな四角形として表示されるグリフィコンを除いて、すべて正常に機能します。

最初は、これはアイコン スプライトがプリコンパイルされていないことに問題があると考えたので、gemfile で「gem twitter-bootstrap-rails」という行をアセット グループから移動し、アップロードする前にすべてのアセットをプリコンパイルしたことを確認しました。ヘロクへ。

ただし、これで問題は解決しませんでした。ページを調べたところ、アイコンは使用できるように見えますが、アイコンにリンクする CSS プロパティが、background-image を none に設定する別の CSS ルールによって上書きされています。Twitter ブートストラップの一部であるスタイルシートで発生しているように見えるので、なぜこれが発生しているのかよくわかりません。

他の誰かがこの問題を抱えていますか?

私はTwitterのブートストラップを使用しており、次のようなコードがあります:

これにより、テキストが明るい青色でレンダリングされ、リンクとして強調表示されます。

その要素を参照してcss経由で変更するにはどうすればよいですか?

Twitter Bootstrap モーダルはとても気に入っていますが、アニメーションで表示するのは少し遅いです。500msくらいかな。

速くする方法はありますか？私は調べましbootstrap-modal.jsたが、助けになる説得力のあるものは何も見つかりませんでした。

また、アニメーションを完全に非アクティブ化することはしたくありません。ユーザーの目には、応答時間が速く見えるようにするための良いトリックであることがわかったからです ;o)

これは、Railsにrubyracergemをインストールする際の一般的な問題だと思います。これは、twitter-bootstrap-railsgemの依存関係です。

私はこのような解決策を試しました： `geminstalltherubyracer`はMacOSXLionで失敗します

これが私のgemファイルの関連する部分です：

そして、バンドルインストールを実行したときに発生したエラーは次のとおりです。

私のシステム環境は次のとおりです。Rails3.2.6ruby1.9.3p194（2012-04-20リビジョン35410）[x86_64-darwin11.4.1] Mac OSX 10.7.4（lion）Xcode 4.5

• 髪を抜いてきました。私はruby/railsに不慣れですが、コーディング全般に不慣れなので、エラーメッセージはあまり意味がありません。コンパイラの問題だと思います。

ご協力いただきありがとうございます。

Rails アプリを Heroku にデプロイしたところ、開発環境では問題なく表示されていたすべてのブートストラップ アイコンが、Heroku では小さな四角形としてのみ表示されました。プリコンパイルされたアセットを使用してローカル マシンでアプリを運用モードで実行している場合も、同じことが起こります。Rails 3、twitter-bootstrap-rails gem、および LESS を使用しています。

掘り下げた後、私はこれを発見しました：

ブートストラップ用の実際の CSS は、twitter-bootstrap-rails 外部ライブラリ内の一連の LESS ファイル全体に分散されています。sprites.less は、アイコンに関するルールが記述されているファイルです。[class^="icon-"], [class*=" icon-"] の下に、'background-image' プロパティを @iconSpritePath に設定するルールがあります。@iconSpritePath は、bootstrap_and_overrides.css.less ファイルで asset-path('twitter/bootstrap/glyphicons-halflings.png') として定義されています。

理解できない何らかの理由で、これは開発環境では正常に機能しますが、アセットをプリコンパイルして本番環境で実行すると、コンパイルされた CSS ファイルで @iconSpritePath が「none」に置き換えられるため、すべてのアイコンの「background-image」プロパティは「none」です。

他の誰かがこの問題を抱えていましたか?それを解決する方法について何かアイデアを持っている人はいますか? LESSファイルにいくつかの変更を加える必要があると思います...

編集:問題は実際にはアイコンへのパスではないことがわかりました。コンパイル中に、次のような追加のルールが CSS ファイルの先頭に追加されます。

これにより、ファイル内の [class^="icon-"]、[class*=" icon-"] の 2 番目のルールが上書きされます。これは、使用する必要があるものです。

これが追加される理由がわからない...

Web サイトhttps://wrapbootstrap.com/には、Twitter Bootstrap を使用して作成されたテーマがあります。これらの各テーマには、さまざまなバージョンの Twitter Bootstrap と、他のさまざまなライブラリおよびバージョン (jquery、fontawesome など) が含まれています。

これらのテーマを既存の Rails アプリに追加するにはどうすればよいですか? 手順は何ですか？

jquery、twitter ブートストラップ、fontawesome など (Gemfile で宣言されている) の別のバージョンを既に使用している場合に発生する可能性のある競合について特に興味があります。

ありがとうございました

gem bootstrap-datepicker-rails のセットアップ方法を知っている人はいますか? 基本的にhttp://rubydoc.info/gems/bootstrap-datepicker-rails/0.6.21/framesの手順に従いました。

1. twitter-bootstrap-railsgemをセットアップしました
2. これをgemfileに追加しますgem 'bootstrap-datepicker-rails', '>= 0.6.21'

3. この行を app/assets/stylesheets/application.css に追加します

   /li>

4. この行を app/assets/javascripts/application.js に追加します

   /li>

5. この行を app/assets/javascripts/controllername.js.coffee に追加します

   /li>

6. 最後にビューで使用します:)

   /li>

しかし、それはうまくいきません!! 誰かがそれを機能させましたか？ここに示すようにうまくいくはずです：
http://jsfiddle.net/2Gg5k/43/