【Rails#4】Bootstrapを導入しよう

【Rails#4】Bootstrapを導入しよう

コジマです。

【Rails#3】バリデーションを付けよう
の続きです。

https://serene-brook-78971.herokuapp.com/
デプロイしたherokuはこちら

見た目クソダサいページを作っていたので、
Bootstrapを導入することを決意しました。

Bootstrapってのは
かっちょいい画面を簡単かつ速く作るためのフレームワークですね。

ネットで調べると色々出てくるんですが、皆我流だったりするので、
方針に迷った時は公式のHPを見るようにしています。

使用方法

http://getbootstrap.com/docs/4.1/getting-started/introduction/
これを参照しました。

  • headタグ内に必要なmetaタグを設定
  • headタグ内に必要なlinkタグを設定
  • bodyタグの最後に必要なscriptタグを設定

とカンタンな手順でした。
Railsには全てのページで読み込まれるapplication.html.erbという最強viewがいるので、そこに当て込んでいきます。

ほぼコピペ超カンタン(調べるのに時間はかかった)

http://getbootstrap.com/docs/4.1/examples/starter-template/
しかも参考テンプレートまであるんですね。
これを参考にヘッダーナビ部分を改造していきます。

そうすると

かっこよくなった!!

私はとても嬉しい。

ただ、ナビ部分と本文が被るんでbodyを上方向paddingしました。
Bootstrap内で完結できるかは不明です。(スミマセン)

他の画面もいい感じにできたら
ヘルパー使ってDRYな設計に近づけていこうかな。

それでは今回は以上です。

HTML/CSSカテゴリの最新記事