簡體   English   中英

無法將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>&nbsp</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 沒有一個生效。

Rails應用程序沒有任何變化。 我嘗試將引導程序代碼放入index.html.erb文件中,但引導程序樣式中沒有出現引導程序代碼。 看起來好像它的簡單HTML。 有人知道如何解決這個問題嗎? 謝謝。

正如@vanburen已經寫道:您必須將table類添加到table標記中。

所以更換

<table class="listing" summary="All posts">

<table class="table listing" summary="All posts">

現在,引導程序應該識別該表並更改其樣式。

您將在“ 文檔”中找到更多信息。

快樂編碼:)。

好的,所以我安裝了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的幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM