2016-03-23 17 views
0

私はアプリを作成してテストとして実行しています。このアプリケーションは、ブートストラップを使用してボタン、フィールド、ヘッダー、パネルを作成することで構成されています。私がアプリケーションを実行すると、ページの1つが生のhtmlとして表示され、フィールドを通常のhtmlページとして表示します。すべてのアプリページにブートストラップが表示されない

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' 

このファイルは、javacriptファイルにも含まれています。

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

ブートストラップでページを動作させるにはどうすればよいですか?

答えて

0

また、application.scssファイルにブートストラップスタイルをインポートする必要があります。

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

とJavaScriptは次のようにインポートする必要があります。

//= require bootstrap-sprockets 

だけhere言及したすべての手順に従ってください、あなたは大丈夫です。

+0

私はscssファイルにもその行があります。私はちょうどそこにそれを置かなかった。 – metaco57

+0

ドキュメントのすべての手順を正しく実行し、gemをインストールした後にサーバーを再起動しましたか? – FarazPatankar

+0

私は、それ以外のすべてのファイルをアプリケーションで動作させています。 – metaco57

関連する問題