Question

我试图让bootstrap模态工作，但到目前为止还没有成功。我认为相关文件的详细信息如下。

的Gemfile

source 'https://rubygems.org'

ruby '2.2.2'

gem 'rails', '4.1.7'
gem 'pg', '0.17.1'

gem 'devise', '3.5.2'
gem 'omniauth-facebook'

gem 'simple_form', github: 'plataformatec/simple_form'
gem 'activeadmin', github: 'activeadmin'
gem 'possessive'
# gem 'paperclip', '~> 4.2'
gem 'cocaine', '~> 0.5.3'
# gem 'rmagick'
gem 'aws-sdk'
gem 'carrierwave'
gem 'mini_magick'
gem 'fog'
gem 'newrelic_rpm'
gem 'acts-as-taggable-on'
gem 'acts_as_commentable_with_threading'
gem 'acts_as_votable', '~> 0.10.0'
gem 'leaderboard'
gem 'turbolinks', '2.3.0'
gem 'jquery-turbolinks'
gem 'public_activity'
gem 'figaro'
gem 'will_paginate', '~> 3.0.7'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

# Gems used only for assets and not required
# in production environments by default.
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'coffee-rails', '~> 4.1.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'font-awesome-sass'
gem 'uglifier', '>= 1.0.3'

gem 'jquery-rails', '2.3.0'
gem 'fancybox2-rails', '~> 0.2.8'

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  # automatically runs tests when you save a file, but takes up too much CPU for cloud9 
  # gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'rails_12factor'
  gem 'puma'
end

group :rake do
  gem 'faker'
end

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

application.css.scss

/*
 *= require bootstrap-select.min
 *= require fancybox
 */
@import "bootstrap-sprockets";
@import "bootstrap";

shopping.html.erb

<% provide(:title, 'Shopping') %>
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我有一个购物＆＃39;控制器中的动作。当我访问页面/购物时，那里的布局是空白的。我只是在静态示例下从bootstrap模式页面复制了代码，因为我想在尝试自定义它之前看看它是否可行。

Answer 1

在application.js中，你缺少核心引导程序js文件。

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
/* insert bootstrap here */
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

然后在shopping.html.erb视图中添加ID

  <% provide(:title, 'Shopping') %>
  <div class="modal fade" id="myModal"><!--observe new id -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Modal title</h4>
        </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- for learning purposed, initalize the modal in a script tag, once you're comfortable add this to a js file-->
<script>$('#myModal').modal('show');</script>

Bootstrap模式是框架的核心js函数。然后在你的inialize中希望有所帮助。

无法使用rails 4进行引导模式

1 个答案: