Rails - Bootstrap设置
Mel*_*Mel 19 javascript css jquery ruby-on-rails twitter-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 '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="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因为我使用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
然后,在我的视图中,我尝试使用引导选项卡,以便单击选项卡在链接栏下方呈现部分:
<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>
单击链接时什么都没发生.
在我的项目日期表单中,我有以下表单字段:
<%= f.date_select :start_date, :label => "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.
我也知道该宝石的用户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 <%= 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"
观看此视频 - 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:
<%= 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'
当我保存所有这些并完成建议的步骤时,上面没有变化.我点击顶部标签链接中的链接,屏幕底部的小方框显示"转到此页面上的#[链接标签名称]",但没有任何反应.
ben*_*min 19
你在配置地狱,我已经建立了一个最小的工作产品,让你离开那里.为了达到这个目的,我们按照它们的外观来解决您的问题,而不是试图同时解决它们.这个答案集中在你的第一个问题,并可能解决其他问题.
该项目的自述文件的副本如下.如果您需要访问该产品,请告诉我.
自述
这是一个演示应用程序,可以帮助stackoverflowuser"user2860931"解决此处提到的问题.
问题按时间顺序列出:
[Q1] 11月,13个 带有Bootstrap Tabs的Rails
[Q2] 11月22日 Rails 4 - Bootstrap日期选择器
[Q3] 11月24日 Rails - Bootstrap设置
问题描述
已经进行了许多配置尝试,并且次优的开发环境可能通过添加文件扩展名来中断rails命名约定.
使用的版本
Rails 4.2.5
自己创建此应用程序的步骤
首先检查适当的rails版本
$ rails --version
确保开发环境(IDE)本身不添加文件扩展名
创建新的rails应用程序
$ rails new rescue找到在1.下创建的应用程序的Gemfile并注释掉turbolinks gem条目删除解释性链接以获得视觉清晰度
将以下行添加到Gemfile(可能需要将gems修复为特定版本以避免应用程序因计划外更新而停止工作,但这是另一个问题)
gem 'bootstrap-sass' #, '3.3.5.1'跑
$ bundle exec bundle update $ bundle exec bundle install创建文件app/assets/stylesheets/custom.css.scss并添加以下行:
@import "bootstrap-sprockets"; @import "bootstrap";将以下行添加到app/assets/javascripts/application.js
//= require bootstrap重要说明:此行必须遵循jquery和jquery-ujs以及require_tree指令之前的行,以便生成的文件如下所示:
注意:我们删除了turbolinks的行,以反映生产系统的用户"user2860931"(stackoverflow)的设置.//= require jquery //= require jquery_ujs //= require bootstrap //= require_tree .保存所有已编辑的文件后,检查开发环境是否已更改文件扩展名(只是为了确保此时间)
. ??? app ? ??? assets ? ? ??? images ? ? ??? javascripts ? ? ? ???application.js
? ? ??? stylesheets ? ? ??? application.css ? ? ??? custom.css.scss生成最小控制器以及操作和相关视图
$ rails generate controller planets index启动服务器
$ rails s访问您的浏览器
http://localhost:3000/planets/index完全移除turbolinks的最后一步
查看11中提到的网站的HTML源代码.
从文件app/views/layouts/application.html.erb中删除所有data-turbolinks-track属性,以便ERB代码如下所示:
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %>重复步骤1.并注意差异
访问文件app/views/planets/index.html.erb并替换为[Q1]中列出的HTML
此设置会在正确的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
and use calls to 模拟结果通过bootstrap提供标签,看起来像这样 标签按预期工作 通过为您提供最小化的工作产品,您应该能够将您的设置置于工作状态. 完成所有准备工作后,只需按照官方文档的说法添加日期选择器,即可回答Q2: 迈克尔哈特尔的https://www.railstutorial.org/ http://getbootstrap.com/components/#nav http://getbootstrap.com/javascript/#tabs render 'planets/dummy05' 在您的Q1的HTML中.确保每个虚拟文件包含稍微不同的数据,以便能够检查工作选项卡.
. 
.
用于提供此答案的来源
| 归档时间： |
|
| 查看次数： |
1808 次 |
| 最近记录： |