2016-03-23 3 views
0

Я создал приложение и запускаю его в качестве теста. Приложение состоит из использования бутстрапа для создания кнопок, полей, заголовков и панелей. Когда я запускаю приложение, одна из страниц отображается как raw html, отображающая поля как обычные html-страницы.Bootstrap не отображается на всех страницах приложения

enter image description here

Приложение написано в рельсах, а файл 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" %> 

У меня также есть бутстраповская-дерзость камень установлен в системе:

gem 'devise_zxcvbn' 

gem 'bootstrap-sass' 

файл также включен в файле JavaScript, а также:

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

Как я могу заставить страницу работать с Bootstrap?

ответ

0

Вы также должны импортировать стили bootstrap в файл application.scss.

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

и Javascript должен быть импортирован как это:

//= require bootstrap-sprockets 

Просто следуйте все шаги, которые упомянули here и вы будете в порядке.

+0

У меня есть эта строка в файле scss. Я просто не положил его туда. – metaco57

+0

Правильно ли вы выполнили все шаги по документации и перезагрузили сервер после установки драгоценного камня? – FarazPatankar

+0

У меня есть все файлы в приложении, работающие соответственно, за исключением этого. – metaco57

Смежные вопросы