Bootstrap并未在所有应用页面上显示

时间:2016-03-23 22:43:21

标签: ruby-on-rails ruby twitter-bootstrap erb

我创建了一个应用程序,并将其作为测试运行。该应用程序包含使用引导程序创建按钮,字段,标题和面板。当我运行应用程序时,其中一个页面显示为原始html,将字段显示为常规html页面。

enter image description here

应用程序是用rails编写的,html.erb文件也是正确编写的:

<% header "Edit #{resource_name.to_s.humanize}" %>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>

 <div class="form-control">
  <%= f.label :email %><br />
  <%= f.email_field :email, autofocus: true, class: 'form-control' %>
  <% if devise_mapping.confirmable? && resource.pending_confirmation %>
    <span class="label label-info"> Currently waiting confirmation for: <% resource.unconfirmed_email %></span>
  <% end %>
 </div>


<div class="form-group">
 <%= f.label :password %>
 <%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
   <span class="help-block">Enter new password</span>
 <% end %>
</div>

<div class="form-group">
  <%= f.label :password_confirmation %><br />
  <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
</div>

 <div class="form-group">
     <%= f.label :current_password %>
     <%= f.password_field :current_password, autocomplete: "off" %>
       <span class="help-block">Confirm password</span>
     <% end %>
 </div>

 <div class="actions">
   <%= f.submit "Update", class: 'btn btn-primary' %>
 </div>
  <% end %>

  <h3>Cancel my account</h3>

  <p>Delete account <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

  <%= link_to "Back", :back, class: "btn btn-default btn-sm" %>

我还在系统上安装了bootstrap-sass gem:

gem 'devise_zxcvbn'

gem 'bootstrap-sass'

该文件也包含在javascript文件中:

//= require jquery
//= require global
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap/dropdown
//= require turbolinks

如何让页面与Bootstrap一起使用?

1 个答案:

答案 0 :(得分:0)

您还必须在application.scss文件中导入引导程序样式。

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

并且必须像这样导入javascript:

//= require bootstrap-sprockets

只需按照here提到的所有步骤操作即可。