Ruby on Rails講座｜第2回 Bootstrap4の導入とテンプレートでログイン画面を作成
第2回ではBootstrap4の導入と、Bootstrapテンプレートを採用してのログイン画面を作成します。まずは動画をご覧になりながら、Bootstrap4を導入して下さい。
Ruby on Rails 講座2019｜第2回 Bootstrap4を導入してトップページを編集
Bootstrapテンプレートでログイン画面作成
まずは練習でbootstrapが使えるか試します。
views/home/top.html.erbにどこでもいいので
下記ソースコードを貼り付けてボタンが表示されるかどうか確認してみます。表示されることが確認できたら消してください。
bootstrapの部品を入れて表示させて見ます。
例：ボタン サイトはこちら
Buttons · Bootstrap
<button type="button" class="btn btn-info">Info</button>
次にbootstrapのサンプルページをマネて作ります。
signinというテンプレートを今回は使用します。
サンプルページはこちら
Examples · Bootstrap
ソースページを全コピーし、top.html.erbに貼り付け
貼り付けたソースページを整えていきます。
WEBブラウザはSafari
開発→ページのソースを表示で
ソースコードをコピーできます。
BootstrapテンプレートのCSSを編集
画像を/app/assets/images/ に配置
画像のパスを src=”/assets/cow.png” にする
元のコード
<img class="mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
変更後のコード
<img class="mb-4" src="/assets/cow.png" alt="" width="72" height="72">
