コジマです。
【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がいるので、そこに当て込んでいきます。
<head> <title>もくもくブログ</title> <%= csrf_meta_tags %> <!-- Bootstrap CSS --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> (中略) <div class="container"> <%= yield %> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body>
ほぼコピペ超カンタン(調べるのに時間はかかった)
http://getbootstrap.com/docs/4.1/examples/starter-template/
しかも参考テンプレートまであるんですね。
これを参考にヘッダーナビ部分を改造していきます。
<body> <header> <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="navbar-brand"> <%= link_to("もくもくブログ","/", { :class => "nav-link" } )%> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <%= link_to("記事一覧","/articles/index", { :class => "nav-link" })%> </li> <li class="nav-item"> <%= link_to("記事作成","/articles/new", { :class => "nav-link" })%> </li> <li class="nav-item"> <%= link_to("ユーザー登録","/signup", { :class => "nav-link" })%> </li> </ul> </div> </div> </header> <div class="container"> <%= yield %> </div>
そうすると
かっこよくなった!!
私はとても嬉しい。
body { padding-top: 70px; }
ただ、ナビ部分と本文が被るんでbodyを上方向paddingしました。
Bootstrap内で完結できるかは不明です。(スミマセン)
他の画面もいい感じにできたら
ヘルパー使ってDRYな設計に近づけていこうかな。
それでは今回は以上です。