Rails – Bootstrap设置

我试图让我的rails 4应用程序中的bootstrap javascript工作。

我问了这些问题，但未能得到任何帮助。

https://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs https://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker 

我越来越觉得被这个挑战击败了。 令人沮丧的是，bootstrap被描述为一个简单的rails工具。 如果有人能帮忙解决这个问题，我很乐意支付100美元。

我的问题是具体的javascript函数。 我的标签不起作用。 单击链接时，没有任何反应。 此外，日期选择器不起作用（我希望日历能够通过单击选择日期）。

在我的gem文件中，我有：

 gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '~> 3.3.5' gem 'font-awesome-sass', '~> 4.4.0' gem 'bootstrap-slider-rails' gem 'bootstrap-datepicker-rails' gem 'jquery-rails' 

在我的application.html.erb中，我有：

       <meta name="description" content="">  false %>  false %>     

Turbolinks因为我使用olark而关闭。

在我的stylesheets文件夹中，我有以下文件：

application.css.scss：

  *= require_framework_and_overrides.css.scss *= require bootstrap-datepicker *= require_self *= require_tree . */ 

根据下面的注释，我将此文件更改为application.scss并更改了顺序并引用了：

 *= require_tree . *= require_self *= require framework_and_overrides.css.scss *= require bootstrap-datepicker */ 

framework_and_overrides.css.scss

 @import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "bootstrap-slider"; 

在我的javascript文件夹中，我有一个名为的文件：

application.js中：

  //= require jquery //= require jquery_ujs //= require underscore //= require gmaps/google //= require bootstrap-slider //= require bootstrap-sprockets //= require bootstrap-datepicker //= require_tree . 

project_dates.coffee.js

  $(document).on "focus", "[data-behaviour~='datepicker']", (e) -> - $(this).datepicker - format: "dd-mm-yyyy" - weekStart: 1 - autoclose: true 

然后，在我的视图中，我尝试使用引导选项卡，以便单击选项卡在链接栏下方呈现部分：

 
 
 
 
 
 Terms
 
 Privacy
 
 Licence
 
 Trust
 
 Reliance
 
 Pricing
 
 
 
 
 
 
 We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with emphasised text. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

点击链接后什么都没发生。

在我的项目日期表单中，我有这个表单字段：

  "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %> 

它不会成为日期选择器。 相反，它只是d / m / y的三个独立字段。 此外，标签不显示 – 但我可以解决这个问题。

我的设置有问题吗？

当我更改我的application.js删除：

 //= require bootstrap 

然后js工作，当你点击顶部的一个标签链接时，它会跳过一长页文本到相关文本开始的位置。 那不是我想要的。 我想单击选项卡链接并为此导致相关部分在链接下面呈现（以及所有其他部分不呈现）。

对application.js的此更改导致的日期选择器问题没有任何更改

当我尝试添加：

 Bundler.require(:default, Rails.env) 

到我的config / application.rb（根据这篇文章Bootstrap-sass gem Javascript不能在Rails 4中工作 ）

我对上面列出的问题没有任何不同的结果

当我尝试添加

 //= require bootstrap-sprockets 

到我的application.js（在jquery之后），js停止工作 – 所以当我点击标签菜单中的链接时，什么都没发生

我知道https://github.com/twbs/bootstrap-sass的用户指南说：

 bootstrap-sprockets and bootstrap should not both be included in application.js. 

出于这个原因，我从application.js中删除了bootstrap。

我也知道该gem的用户guid说：

 Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables. 

我的application.css.scss中仍然有这个：

  *= require_framework_and_overrides.css.scss *= require bootstrap-datepicker *= require_self *= require_tree . */ 

我通过在我的css中保存这些需要文件来阅读gem文档意味着我做错了什么 – 但是gem文档并没有告诉你要使用什么。

它说：

 Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files. 

你怎么做到这一点？

整个gem文件复制如下：

 source 'https://rubygems.org' # ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.4' # ------------------ Use postgresql as the database for Active Record gem 'pg' # ------------------ Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '~> 3.3.5' gem 'font-awesome-sass', '~> 4.4.0' gem 'bootstrap-slider-rails' gem 'bootstrap-datepicker-rails' # ------------------ Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # ------------------ Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.1.0' # ------------------ See https://github.com/rails/execjs#readme for more supported runtimes gem 'therubyracer', platforms: :ruby # ------------------ Use jquery as the JavaScript library gem 'jquery-rails' # ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks # gem 'turbolinks' # ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0' # ------------------ bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc # ------------------ Use ActiveModel has_secure_password gem 'bcrypt', '~> 3.1.7' # ------------------ Use Unicorn as the app server # gem 'unicorn' # ------------------ Use Capistrano for deployment # gem 'capistrano-rails', group: :development # ----------- USERS # ------------------ authentication gem 'devise', '3.4.1' gem 'devise_zxcvbn' gem 'omniauth' gem 'omniauth-oauth2', '1.3.1' gem 'omniauth-google-oauth2' gem 'omniauth-facebook' gem 'omniauth-twitter' gem 'omniauth-linkedin-oauth2' gem 'google-api-client', require: 'google/api_client' # gem 'oauth2' # ------------------ authorisation gem 'pundit' # ------------------ user roles # ------------------ messaging # ------------------ money gem 'money-rails' # ----------- CONTENT gem 'state_machine' gem 'acts_as_approvable' # ------------------ file uploads gem 'carrierwave' gem 'mini_magick' gem 'simple_form' # ------------------ video gem 'yt', '~> 0.25.5' gem 'vimeo' # ------------------ organisation gem 'acts-as-taggable-on', '~> 3.4' # ------------------ search # ----------- OTHER # ------------------ security gem 'figaro' # ------------------ performance gem 'rails-observers' gem 'high_voltage', '~> 2.4.0' # ------------------ location gem 'geocoder' gem 'gmaps4rails' gem 'underscore-rails' gem 'country_select' group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' end group :development do # Access an IRB console on exception pages or by using  in views gem 'web-console', '~> 2.0' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' end group :production do gem "rails_12factor" end ruby "2.2.2" 

观看此video – https://gorails.com/episodes/styling-with-bootstrap-sass

设置看起来非常简单，但本教程不会修改文件以删除对gem的引用，因为gem文档建议（但我还没有这样做）但本教程仍然可以使引导程序正常工作。 有没有人可以看到我可能会尝试？ 在边缘上…

正如你所看到的 – 我已经尝试了一年多了。 我去过每月见面会，付费代码导师和雇用的承包商，他们都无法提供帮助。 希望在这个董事会上创造奇迹。 Bootstrap Sass with Rails 4

在下面尝试救援解决方案：

所以，我现在有：

样式表如下：

 application.css *= require_tree . *= require_self */ custom.css.scss @import "bootstrap-sprockets"; @import "bootstrap"; framework_and_overrides.css.scss: @import "font-awesome-sprockets"; @import "font-awesome"; @import "bootstrap-slider"; 

javascript文件如下：

 application.js //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . 

application.html.erb：

  false %>  false %> 

的Gemfile：

 gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '~> 3.3.5.1' gem 'font-awesome-sass', '~> 4.4.0' gem 'bootstrap-slider-rails' gem 'bootstrap-datepicker-rails' 

当我保存所有这些并完成建议的步骤时，上面没有变化。 我点击顶部标签链接中的链接，屏幕底部的小方框显示“转到此页面上的＃[链接标签名称]”，但没有任何反应。

Answer 1

你在配置地狱，我已经建立了一个最小的工作产品，让你离开那里。 为了达到这个目的，我们按照它们的外观来解决您的问题，而不是试图同时解决它们。 这个答案集中在你的第一个问题上，可能会解决其他问题。

该项目的自述文件的副本如下。 如果您需要访问该产品，请告诉我。

自述

这是一个演示应用程序，可以帮助stackoverflowuser“user2860931”解决此处提到的问题。

问题按时间顺序列出：

[Q1] 11月13日Rails与Bootstrap标签

[Q2] 11月22日Rails 4 – Bootstrap日期选择器

[Q3] 11月24日Rails – Bootstrap设置

问题描述

已经进行了许多配置尝试，并且次优的开发环境可能通过添加文件扩展来中断rails命名约定。

使用的版本

Rails 4.2.5

自己创建此应用程序的步骤

首先检查适当的rails版本

 $ rails --version 

1. 确保开发环境（IDE）本身不添加文件扩展名

2. 创建新的rails应用程序

    $ rails new rescue 

3. 找到在1.下创建的应用程序的Gemfile，并注释掉turbolinks gem条目删除解释性链接以获得视觉清晰度

4. 将以下行添加到Gemfile（可能需要将gems修复为特定版本以避免应用程序因计划外更新而停止工作，但这是另一个问题）

    gem 'bootstrap-sass' #, '3.3.5.1' 

5. 跑

    $ bundle exec bundle update $ bundle exec bundle install 

6. 创建文件app / assets / stylesheets / custom.css.scss并添加以下行：

    @import "bootstrap-sprockets"; @import "bootstrap"; 

7. 将以下行添加到app / assets / javascripts / application.js

    //= require bootstrap 

   重要说明：此行必须遵循jquery和jquery-ujs以及require_tree指令之前的行，以便生成的文件如下所示：

    //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . 

   注意：我们删除了turbolinks的行，以反映生产系统的用户“user2860931”（stackoverflow）的设置。

8. 保存所有已编辑的文件后，检查开发环境是否已更改文件扩展名（这次只是为了确定）

    . ├── app │  ├── assets │  │  ├── images │  │  ├── javascripts │  │  │  └──application.js 
    │  │  └── stylesheets │  │  ├── application.css │  │  └── custom.css.scss 

9. 生成最小控制器以及操作和相关视图

    $ rails generate controller planets index 

10. 启动服务器

     $ rails s 

11. 访问您的浏览器

     http://localhost:3000/planets/index 

12. 完全移除turbolinks的最后一步

    1. 查看11中提到的网站的HTML源代码。

    2. 从文件app / views / layouts / application.html.erb中删除所有data-turbolinks-track属性，以便ERB代码如下所示：

        <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> 

    3. 重复步骤1.并注意差异

13. 访问文件app / views / planets / index.html.erb并替换为[Q1]中列出的HTML

14. 此设置会在正确的tabpanel下呈现您的部分。 请注意，您正在使用Rails的开发环境。 打电话给

     $ rake assets:clean $ rake assets:precompile 

    可能需要在部署主项目后查看更改（在Rails开发模式下不需要它）。

    提示：使用模拟数据文件作为渲染函数的参数。

     app │  └── views 
     │  │ │  └── planets │  ├── _dummy00.html.erb │  ├── _dummy01.html.erb │  ├── _dummy02.html.erb │  ├── _dummy03.html.erb │  ├── _dummy04.html.erb │  ├── _dummy05.html.erb 

    app │ └── views
│ │ │ └── planets │ ├── _dummy00.html.erb │ ├── _dummy01.html.erb │ ├── _dummy02.html.erb │ ├── _dummy03.html.erb │ ├── _dummy04.html.erb │ ├── _dummy05.html.erb

并使用调用来render 'planets/dummy05' 在您的Q1的HTML中。 确保每个虚拟文件包含略有不同的数据，以便能够检查工作选项卡。

模拟结果通过bootstrap提供标签，看起来像这样 。

标签按预期工作 。

通过为您提供最小化的工作产品，您应该能够将您的设置置于工作状态。

完成所有准备工作后，只需按照官方文档的说法添加日期选择器，即可回答Q2 ：

用于提供此答案的来源

迈克尔哈特尔的https://www.railstutorial.org/

http://getbootstrap.com/components/#nav

http://getbootstrap.com/javascript/#tabs

http://getbootstrap.com/javascript/#tabs-usage

http://guides.rubyonrails.org/asset_pipeline.html

Answer 2

我遇到了同样的问题，并找到了适合我的解决方案（挖掘深层网页）。 尝试在require_tree .行之后添加需求require_tree . 在.css文件中，在.js文件中只是您使用的日期选择器 ; 如下：

application.css

  ... *= require_tree . *= require_self *= require bootstrap *= require bootstrap-datepicker */ 

的application.js

 ... //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . //= require bootstrap-datepicker 

它与Ruby on Rails的资产管道有关，您可以在此页面http://guides.rubyonrails.org/asset_pipeline.html中进一步讨论此主题，但首先尝试更改行的顺序。