0

私はこのGemfileに基づいて開発しています：

    source 'https://rubygems.org'

    gem 'rails', '3.2.13'
    gem 'bootstrap-sass', '2.3.1'
    gem 'sqlite3', :require => 'sqlite3'
    gem 'bcrypt-ruby', '3.0.1'
    gem 'jquery-rails', '~> 2.2.1'

    # gem for dev only
    group :development do
      gem 'annotate', '~> 2.4.1.beta'
      gem 'rspec-rails'
      gem 'capybara', '1.1.2'
      gem 'factory_girl_rails', '4.1.0'
    end

    # Gems used only for assets and not required
    # in production environments by default.
    group :assets do
      gem 'sass-rails',   '~> 3.2.3'
      gem 'coffee-rails', '~> 3.2.1'
      gem 'uglifier', '>= 1.0.3'
    end

これをメインのStyle.css.scssファイルに含めます。

    @import "bootstrap";

そして、私のapplication.html.erbファイルのこの見出し：

    <!DOCTYPE html>
    <html>
    <head>
      <title> <%= full_title(yield(:title))%> </title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
      <%= render "layouts/shim" %>
    </head>

    <body>
    ...

（マイケル・ハートルのチュートリアルから着想を得た）

Bootstrapの次の例を自分のデザインに適用しようとしています。

<div class="tabbable"> <!-- Only required for left/right tabs -->
 <ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane active" id="tab1">
   <p>I'm in Section 1.</p>
  </div>
  <div class="tab-pane" id="tab2">
   <p>Howdy, I'm in Section 2.</p>
  </div>
 </div>
</div>

効果は期待したものではありません（たとえそれが彼らのサイトでうまく機能していても、私はそれをコピー/貼り付けします）：

-ページを最初に表示するときに、アクティブなタブ1が選択されています（予想どおり）

-[セクション2]タブをクリックすると、アドレスバーに実際にURL ...＃tab2が表示されますが、セクション2のコンテンツは表示されません。アクティブなタブはまだ1です。

-[セクション1]タブをクリックすると、アドレスバーに実際にURLが表示されます...＃tab1

私は何を取りこぼしたか ？

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

よろしくお願いします、

フレッド

4

2 に答える 2

2

JavaScriptが読み込まれていないようですので、アプリケーションがJavaScriptを読み込んでいない可能性があります。次のように、ブートストラップ.jsをロードするようにアプリを設定するのを忘れている可能性があります。

# app/assets/javascripts/applications.js (or a manifest of your choice)
//= require bootstrap
于 2013-03-18T22:50:38.860 に答える
1

Zaidが述べたように、ブートストラップJSをインポートしなかったように聞こえます。

また、アセットグループにbootstrap-sassgemを含める必要があります。そうでない場合、gemに含まれているベンダーのスタイルシートとスクリプトは、prodのデプロイ前にプリコンパイルされません。

于 2013-03-19T00:53:58.077 に答える