[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..." %>
この記事が気に入ったらサポートをしてみませんか?