[Rails]自分用のメモとしてログイン画面html css紹介等 bootstrap導入方法[2019年2月12日]

はじめに
今回は、RailsでのBootStrap4の導入方法を書いていく。

準備
・必要なgemをインストールする。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
bundle install

stylesheets内のcssを改名する

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scssでbootstrapをimportさせる。

@import "bootstrap";

application.js
Bootstrapと依存関係をapplication.jsに追記する

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

補足
Bootstrapのtooltipsやpopoverはpopper.jsに依存している
bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
 コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する

ログインのCSSサイト
https://codepen.io/bowie/pen/erEoh

Deviceというgemを使う場合
text_fieldに文字を入れときたい場合、:placeholderオプションを付けるだけ。

<%= f.text_field :email, :placeholder => "Enter your email..." %>



この記事が気に入ったらサポートをしてみませんか?