Ruby on Rails5アプリをBootstrap4デザインにする

過去の記事「Ruby on Rails 5 簡単インストール手順( Ubuntu Server )」の説明の通りにRailsをインストールした後、RailsアプリをBootstrapデザインにしてみましょう。

Rails5アプリをBootstrap4デザインにする

Gemfileに以下を加えます。

gem 'bootstrap', '~> 4.0.0.alpha3'

その後、bundle installコマンドを入力します。

$ bundle install

bundle_install

app/assets/stylesheets/application.cssを「application.scss」に名前を変更して以下の記述を加えます。

@import "bootstrap";

application.scssの以下の記述を削除します。

*= require_tree .
*= require_self

application.scssの「@import “bootstrap”;」の下に以下の記述を加えます。

//= require bootstrap

app/assets/javascripts/application.jsに以下のように記述します。

//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

これでBootstrapの設定が完了したので、ビューにBootstrapのクラスを指定します。
過去記事「Ruby on Rails 5 簡単インストール手順( Ubuntu Server )」で作成したUserモデルに対応したビューの新規登録画面を変更します。
「app/views/users/_form.html.erb」を編集します。

<%= form_for(user) do |f| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name, :class => 'form-control' #classを指定する %>
  </div>

  <div class="field">
    <%= f.label :age %>
    <%= f.number_field :age, :class => 'form-control' #classを指定する %>
  </div>
  <div class="actions">
    <%= f.submit :class => 'btn btn-primary' #classを指定する  %>
  </div>
<% end %>

フィールドに「:class => ‘form-control’」を加えます。
Submitボタンに「:class => ‘btn btn-primary’」を加えます。

これでさっそくRailsサーバーを起動させて、「localhost:3000/users/new」にアクセスしてみましょう。

$ rails s
 
# vagrantの場合はホストOSからもアクセスできるようにbindでIPアドレス0.0.0.0を指定します。
$ rails s --bind=0.0.0.0

見た目がBootstrapデザインに変わったことがわかります。
■変更前:
users_new

■変更後:
rails5_bootstrap

ブラウザでソースを見てみると、boostrapのcssとjsを読み込んでいます。

以上でRuby on Rails5アプリをBootstrap 4デザインにする説明をおわります。


PAGE TOP