无法将 Bootstrap 集成到我的 Ruby on Rails(版本 4.0.0)应用程序中
Cannot integrate Bootstrap in my Ruby on Rails (version 4.0.0) app
我尝试了多种方法,遵循了很多教程,但我的 Rails 应用程序没有任何效果。这是我的 Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
group :doc do
gem 'sdoc', require: false
end
application.css.scss
就像
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*/
@import "bootstrap-sprockets";
@import "bootstrap";
application.js
文件:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
index.html.erb
文件:
<div class="posts index">
<h1>Welcome to The Incognito Social Network</h1>
<%=link_to("Say Something!", {:action=> 'new'}, :class=>'action new')%>
<table class="listing" summary="All posts">
<% @posts.each do |post| %>
<tr><td> </td></tr>
<tr>
<td>Post #<%=post.id%> </td>
<td><%=post.text%></td>
<%if post.image_file_name%>
<td>
<%=image_tag post.image.url %>
</td>
<%end%>
</tr>
<tr>
<td><%= link_to("Like", '#', :class=>'action upvote')%></td>
</tr>
<%end%>
</table>
</div>
我试过在我的控制器中写入 layout false
和 #layout false
。 None 生效。
rails 应用没有任何变化。我尝试将 bootstrap 代码放入我的 index.html.erb 文件中,但它没有以 Bootstrap 样式出现。看起来好像很简单HTML。有人知道如何解决这个问题吗?
谢谢。
正如@vanburen 已经写的那样:您必须将 table
class 添加到您的 table
标签中。
所以替换
<table class="listing" summary="All posts">
和
<table class="table listing" summary="All posts">
现在 bootstrap 应该可以识别 table 并更改其样式。
您将在 Docs 中找到更多信息。
编码愉快:).
好的,所以我安装了 Node.js 并重新启动了计算机。此外,这是我更新的 Gemfile
source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2','~> 0.3.11'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
gem 'acts_as_votable', '~>0.10.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
group :doc do
gem 'sdoc', require: false
end
我还发现我必须在控制器中注释掉 layout false
才能使 Bootstrap 正常工作。感谢@Tobias 和@vanburen 的帮助。
我尝试了多种方法,遵循了很多教程,但我的 Rails 应用程序没有任何效果。这是我的 Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
group :doc do
gem 'sdoc', require: false
end
application.css.scss
就像
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*/
@import "bootstrap-sprockets";
@import "bootstrap";
application.js
文件:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
index.html.erb
文件:
<div class="posts index">
<h1>Welcome to The Incognito Social Network</h1>
<%=link_to("Say Something!", {:action=> 'new'}, :class=>'action new')%>
<table class="listing" summary="All posts">
<% @posts.each do |post| %>
<tr><td> </td></tr>
<tr>
<td>Post #<%=post.id%> </td>
<td><%=post.text%></td>
<%if post.image_file_name%>
<td>
<%=image_tag post.image.url %>
</td>
<%end%>
</tr>
<tr>
<td><%= link_to("Like", '#', :class=>'action upvote')%></td>
</tr>
<%end%>
</table>
</div>
我试过在我的控制器中写入 layout false
和 #layout false
。 None 生效。
rails 应用没有任何变化。我尝试将 bootstrap 代码放入我的 index.html.erb 文件中,但它没有以 Bootstrap 样式出现。看起来好像很简单HTML。有人知道如何解决这个问题吗? 谢谢。
正如@vanburen 已经写的那样:您必须将 table
class 添加到您的 table
标签中。
所以替换
<table class="listing" summary="All posts">
和
<table class="table listing" summary="All posts">
现在 bootstrap 应该可以识别 table 并更改其样式。
您将在 Docs 中找到更多信息。
编码愉快:).
好的,所以我安装了 Node.js 并重新启动了计算机。此外,这是我更新的 Gemfile
source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2','~> 0.3.11'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
gem 'acts_as_votable', '~>0.10.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
group :doc do
gem 'sdoc', require: false
end
我还发现我必须在控制器中注释掉 layout false
才能使 Bootstrap 正常工作。感谢@Tobias 和@vanburen 的帮助。