Rails - 引导程序设置 [英] Rails - Bootstrap setup

问题描述

我尝试在我的rails 4应用程式中取得bootstrap的JavaScript。

我问过这些问题，但无法得到任何帮助。

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

我越来越感觉失败这个挑战。令人沮丧的是，bootstrap被描述为一个简单的工具。如果有人可以帮助解决这个问题，我将很乐意支付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中，我有：

 < link href ='http：//fonts.googleapis.com/css？family = Quicksand | Roboto：300'rel ='stylesheet'type ='text / css'> 
< link href ='http：//fonts.googleapis.com/css？family = Noto + Sans'rel ='stylesheet'type ='text / css'> 
< meta charset =utf-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
< meta name =p：domain_verifycontent =44c82789b3dcecac427e4b65123fb68d/> 
< title><％= content_for？（：title）？ yield（：title）：RE％>< / title> 
< meta name =descriptioncontent =<％= content_for？（：description）？yield（：description）：Ae％>> 
<％= stylesheet_link_tagapplication，media：all，data-turbolinks-track=> false％> 
<％= javascript_include_tagapplication，data-turbolinks-track=> false％> 
<％= csrf_meta_tags％> 
<％= favicon_link_tag％> 
< script src =https://www.google.com/jsapi>< / script> 
< script src =https://www.youtube.com/iframe_api>< / script> 
  

Turbolinks关闭，因为我使用olark。

在我的stylesheets文件夹中，我有一些文件名为：

application.css.scss：

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

以下注释如下，我将此文件更改为命名应用程序。 scss并更改顺序并引用到：

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

framework_and_overrides.css.scss

  @importbootstrap-sprockets ; 
 @importbootstrap; 
 @importfont-awesome-sprockets; 
 @importfont-awesome; 
 @importbootstrap-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）.onfocus，[data-behavior_ ='datepicker']，（e） 
  -  $（this）.datepicker 
  -  format：dd-mm-yyyy
  -  weekStart：1 
  -  autoclose：true 
  

然后，在我看来，我试图使用引导选项卡，以便点击选项卡呈现部分在链接栏下面：

 < div class =containerfluid> 
 
< div class =rowstyle =margin-top：50px> 
< div class =col-xs-10 col-xs-offset-1> 
< ul class =nav nav-tab nav-justified> 
< li role =presentationclass =active> < a href =＃termsaria-controls =termsrole =tabdata-toggle =tab> Terms< / a>< / li> 
< li role =presentation> < a href =＃privacyaria-controls =privacyrole =tabdata-toggle =tab>隐私< / a>< / li> 
< li role =presentation> < a href =＃licensearia-controls =licenserole =tabdata-toggle =tab>许可< / a>< / li> 
< li role =presentation> < a href =＃trustaria-controls =trustrole =tabdata-toggle =tab> Trust< / a>< / li> 
< li role =presentation> < a href =＃reliancearia-controls =reliancerole =tabdata-toggle =tab> Reliance< / a>< / li> 
< li role =presentation> < a href =＃pricingaria-controls =pricingrole =tabdata-toggle =tab> Pricing< / a>< / li> 
 
< / ul> 
< / div> 
 
< / div> 
 
 
< div class =row> 
< div class =col-xs-10 col-xs-offset-1> 
< div class =intpolminstyle =margin-top：50px; margin-bottom：30px> 
我们给这些术语和策略中使用的其他词语赋予意义，并且将这些词语识别为具有所归属的含义，并且< em>强调< / em>文本。 
< / div> 
< / div> 
< / div> 
< div class =row> 
< div class =col-xs-8 col-xs-offset-2> 
< div class =tab-content> 
< div role =tabpanelclass =tab-pane activeid =terms><％= render'pages / legalpolicies / terms'％>< / div> 
< div role =tabpanelclass =tab-paneid =privacy><％= render'pages / legalpolicies / privacy'％>< / div> 
 
< div role =tabpanelclass =tab-paneid =license><％= render'pages / legalpolicies / license'％>< / div> 
< div role =tabpanelclass =tab-paneid =trust><％= render'pages / legalpolicies / trust'％>< / div> 
 
< div role =tabpanelclass =tab-paneid =reliance><％= render'pages / legalpolicies / reliance'％>< / div> 
< div role =tabpanelclass =tab-paneid =pricing><％= render'pages / legalpolicies / pricing'％>< / div> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

当您点击链接时，什么都不会发生。

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

 <％= f.date_select：start_date ，：label => 这个项目什么时候开始？，'data-behavior'=> 'datepicker'，order：[：day，：month，：year]％> 
  

它不会创建日期选择器。相反，它只是三个单独的字段d / m / y。

我的设置有问题吗？

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

  // = require bootstrap 
  

然后js工作，以便当您单击顶部的其中一个选项卡链接时，它跳下一长页文本相关文本开始的点。这不是我想要的。我想点击标签链接，为此，使相关的部分在链接下（和所有其他部分不渲染）。

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

我尝试添加：

  Bundler.require（：default，Rails.env）
  
 
 
 
到我的config / application.rb（根据此帖。 
 
 
 
标签正在按预期工作。
 
 
 
通过为您提供
 
 
 
完成所有的准备工作后，只需按照官方文档工作添加一个日期控制器即可 Q2 ：
：
 
 
  
 
 
 
用于提供此回答的来源
 
 
 
  https：// www。 railstutorial.org/  by Michael Hartl 
 
 
 
  http://getbootstrap.com/components/#nav  
 
 
 
  http://getbootstrap.com/javascript/#tabs  
 
 
 
  http://getbootstrap.com/javascript/#tabs-usage  
 
 
 
  http://guides.rubyonrails.org/asset_pipeline.html  
 
I am trying to get bootstrap javascript working in my rails 4 app.

I asked these questions but haven't been able to get any help.
http://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs
http://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker
I am increasingly feeling defeated by this challenge. It's depressing that bootstrap is described as a simple tool for rails. I would be happy to pay USD100 if someone could help be solve this problem.

My problem is specifically with the javascript functions. My tabs don't work.  When you click the link, nothing happens. Also, the date picker doesn't work (I was expecting a calendar to pick a date in a single click).

In my gem file I have:
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'
In my application.html.erb, I have:
<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
        <title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
          <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
          <%= javascript_include_tag "application", "data-turbolinks-track" => false %>
          <%= csrf_meta_tags %>
          <%= favicon_link_tag %>
          <script src="https://www.google.com/jsapi"></script>
          <script src="https://www.youtube.com/iframe_api"></script>
Turbolinks is off because i use olark.

In my stylesheets folder, I have files called:

application.css.scss:
 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */
Following comments set out below, I changed this file to be named application.scss and changed the order and referencing to:
*= 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";
In my javascript folder, I have a file called:

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
Then, In my view I am trying to use bootstrap tabs, so that clicking on a tab renders a partial beneath the links bar:
<div class="containerfluid">

        <div class="row" style="margin-top:50px">
            <div class="col-xs-10 col-xs-offset-1">
                <ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
                    <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
                    <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
                    <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
                    <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
                    <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>

                </ul>   
            </div>

        </div>


    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px"> 
             We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>

                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>

                <div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>

            </div>
        </div>
    </div>
</div>  
Nothing at all happens when you click on the links.

In my project dates form, I have this form field:
<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>
It does not make a date picker. Instead it's just three separate fields for d/m/y. Also, the label doesn't display -but I can work around that problem.

Is there something wrong with my setup?

When I change my application.js to remove: 
//= require bootstrap
Then the js works so that when you click one of the tab links across the top, it jumps down a long page of text to the point where the relevant text starts. That's not what I want. I want to click on the tab link and for that to cause the relevant partial to render beneath the links (and all of the other partials not to render).  

There are no changes to the date picker problem that result from this change to the application.js

When I try adding:
Bundler.require(:default, Rails.env)
to my config/application.rb (as per this post Bootstrap-sass gem Javascript not Working in Rails 4)

I get no different result to the problems outlined above

When I try adding 
//= require bootstrap-sprockets
to my application.js (after jquery), the js stops working - so that when i click the link in the tabs menu, nothing at all happens

I am aware the user guide for https://github.com/twbs/bootstrap-sass says: 
bootstrap-sprockets and bootstrap should not both be included in application.js.
For that reason, I removed bootstrap from my application.js.

I am also aware that the user guid for that gem says:
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
I still have this in my application.css.scss:
 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */
I read the gem documentation as meaning I am doing something wrong by keeping these require files in my css - but the gem documentation doesnt tell you what to use instead.

It says:
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.
How do you do this?

Entire gem file is copied below:
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 <%= console %> 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"
Watching this video - https://gorails.com/episodes/styling-with-bootstrap-sass

The setup appears super simple, but this tutorial does not amend the file to remove references to require as the gem documentation suggests (but which I have not done) but this tutorial still works to get bootstrap working. Is there ANYTHING  anyone can see that I might try? On the brink...

As you can see - I have been trying at this for more than a year. I've been to monthly meet ups, paid code mentors and hired contractors who haven't been able to help. Hoping for a miracle on this board.
Bootstrap Sass with Rails 4

TRYING RESCUE SOLUTION BELOW:

So, I now have:

stylesheets as follows:
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 files as follows:
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
              <%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => 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'
When I save all of this and complete the suggested steps, there is no change to the above. I click a link in the tab links across the top, the little box at the bottom of the screen says 'go to #[name of link tab] on this page, but nothing happens.
解决方案
You are in configuration hell, and I have built a minimal working product to get you out of there. In order to achieve this, we tackle your problems in order of their appearance and do not try to solve them in parallel. This answer focuses on your first question and probably solves the others.

The copy of the project's Readme follows. In case you need access to the product, just let me know.

README

This is a demo application to help stackoverflowuser "user2860931" with issues
as mentioned here.

Questions are listed in chronological order:

[Q1] November, 13
Rails with Bootstrap Tabs

[Q2] November, 22
Rails 4 - Bootstrap date picker

[Q3] November, 24
Rails - Bootstrap setup

Problem Description

Many configuration attempts have been made and a suboptimal development
environment probably interrupted rails naming conventions by adding file
extensions.

Versions Used

Rails 4.2.5

Steps To Create This Application By Yourself

First check for an appropriate rails version
$ rails --version



Make sure the development environment (IDE) does not add file extensions by itself
Creating a new rails application

$ rails new rescue

Locate the Gemfile of the application created under 1. and comment out
the turbolinks gem entry
Remove explanatory links for visual clarity
Add the following lines to you Gemfile (one might want to fix gems to a
particular version in order to avoid an application to stop working by an
unplanned update, but this is another issue)

gem 'bootstrap-sass' #,          '3.3.5.1'

Run

$ bundle exec bundle update
$ bundle exec bundle install

Create the file app/assets/stylesheets/custom.css.scss and add the following
lines:

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

Add the following line to app/assets/javascripts/application.js

//= require bootstrap


IMPORTANT: This line has to follow the lines of jquery and jquery-ujs and
before the require_tree directive so that the resulting file looks like:

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

NOTE: We have deleted the line for turbolinks, to reflect the production
      system's setup of user "user2860931" (stackoverflow).
After saving all edited files, check whether the development environment
has altered the file extensions (just to be sure this time)

  .
  ├── app
  │   ├── assets
  │   │   ├── images
  │   │   ├── javascripts
  │   │   │   └──application.js  

  │   │   └── stylesheets
  │   │       ├── application.css
  │   │       └── custom.css.scss

Generate a minimal controller together with action and related view

$ rails generate controller planets index

Start the server

$ rails s

Visit in your browser

http://localhost:3000/planets/index

Last step to remove turbolinks completely

View the HTML sourcecode of the site mentioned under 11.
From file app/views/layouts/application.html.erb remove all
data-turbolinks-track attributes so that the ERB code looks like:

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

Repeat step 1. and note the difference

Visit the file app/views/planets/index.html.erb and replace with your HTML
as listed in [Q1]
This setup renders your partials under the correct tabpanel. Be advised that
that you are working in the development environment of Rails. A call to

$ rake assets:clean
$ rake assets:precompile


could be needed in order to see changes once you deploy your main project (it should not be needed in Rails development mode).

Tip: Use mock data files as arguments for the render function.

app
│   └── views 

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



and use calls to  render 'planets/dummy05' 

in your HTML of Q1. Make sure each dummy file contains slightly different data, in order to be able to check for working tabs.

The mock-up result provides tabs via bootstrap and looks like this .

Tabs are working as expected.

By providing you with the minimal working product, you should be enabled to bring your setup to a working state.

After all the preparation, adding a datepicker by just following the official documentation works, which answers Q2:

Sources Used To Provide This Answer

https://www.railstutorial.org/ by Michael Hartl

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

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

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

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

这篇关于Rails - 引导程序设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！