k01ken’s b10g

He110 W0r1d!

RailsでBootstrap4のパッケージを使ってみる

開発環境は、Windows 7 Professional(32bit) + ruby 2.3.3p222 + Rails 4.2.1。

1.Gemfileに

gem 'boostrap', '~> 4.1.1'

を追加。
2.以下のコマンドでパッケージをインストール。

bundle install

3./app/assets/stylesheets/ディレクトリ内のapplication.cssapplication.scssにリネームする。
4.application.css内に、

@import "bootstrap";

を追加する。
同時に、

 *= require_tree .
 *= require_self

は削除しておく。
5./app/assets/javascripts/application.js内に

//= require jquery3
//= require popper
//= require bootstrap-sprockets

を追加。
6.テストしてみるために、適当なビューにて、

<%= form_tag("/create", :method => "post") do %>
<%= text_field_tag(:name) %>
<%= text_field_tag(:description) %>
<%= submit_tag("投稿",:class => "btn btn-primary") %>
<% end %>

と入力する。
実行結果
f:id:k01ken:20180616234727p:plain

リンクの色やフォントなども変わっています。

参考サイト
GitHub - twbs/bootstrap-rubygem: Bootstrap 4 Ruby Gem for Rails / Sprockets and Compass.
Railsアプリで Bootstrap 4 を利用する
submit_tag - リファレンス - - Railsドキュメント
Buttons · Bootstrap