Advanced 5.Bootstrapについて、デザインを追加してみる

# 1. デザインを追加していこう
htmlやcssは自分で勉強しよう。
https://dotinstall.com/lessons/basic_html_v5
https://dotinstall.com/lessons/basic_css_v5

**Coachより** htmlとcssについて
HTMLは<>ないに書かれたタグでwebサイトを記述する言語
CSSはタグに文字の大きさや色などのようにデザインを記述する言語

**Coachより** Bootstrapについて
HTMLのclassだけでスタイル(cssで記述するもの)とアニメーション(javascriptで記述するもの)を適用するためのCSSとJavascriptのフレームワーク


# 2. bootstrapの使い方

##  2.1. installしてみよう
https://getbootstrap.com/docs/4.4/getting-started/introduction/

* cssは`<head></head>`内、jsは`<body></body>`内の`</body>`の直前に入れることに注意しよう。

###htmlの基本構造
```html
<head>
  <!-- メタデータを表記する -->
</head>

<body>
  <header>
    <!-- ナビゲーションなどの複数のページで共通するもの -->
  </header>

  <!-- コンテンツ：ページの独自の内容 -->
  <div></div>
  <section></section>

  <footer>
    <!-- コンテンツに関する内容 -->
  </footer>
</body>
```

## 2.2. ボタンにclassを追加してみよう
全体の配置のデザインはLayout部分のclassを使う。
https://getbootstrap.com/docs/4.4/layout/overview/

各要素のデザインはComponentを使う。
https://getbootstrap.com/docs/4.4/components/alerts/

試しにボタンのクラスを好きなところに適用してみよう。
https://getbootstrap.com/docs/4.4/components/buttons/

## 2.3. ホテルサイトを自分好みにしてみよう
自分の好みのデザインにしてみよう

手がつけられないひとは順番にやっていこう
### 2.3.1 navigationを追加
<img width="1373" alt="Screen Shot 2020-01-11 at 14.59.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/bff58abe-f1e3-0af2-f5a3-83b80d586a31.png">

`<header></header>`内に次の文を入れる。

```erb:app/views/layouts/application.html.erb
<div class="container">
  <nav class="navbar navbar-expand-sm navbar-light">
    <a class="navbar-brand font-italic" href="/" style="font-size: 30px"><u>Hotel Project</u></a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="menu" class="collapse navbar-collapse d-flex justify-content-end">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="/" class="nav-link">トップページ</a></li>
        <li class="nav-item"><a href="/contacts/new" class="nav-link">お問い合わせ</a></li>
      </ul>
    </div>
  </nav>  
</div>
```

写真も追加したい場合は、`app/assets/images`のフォルダーに使いたい写真を入れ、`<nav ~~~>`の下の行に次の文を入れる。

```erb:app/views/layouts/application.html.erb
<%= image_tag 'hotelproject.png', width: 40, height: 40, class: 'mx-2', alt: 'ホテルのアイコン' %>
```


### 2.3.2 footerを追加
<img width="1661" alt="Screen Shot 2020-01-11 at 14.59.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/7aea7e49-5a49-94bc-a780-d50d1c6c6d6c.png">

`<%= yield %>`の下の行に次の文を入れる。

```erb:app/views/layouts/application.html.erb
<footer class="mt-5">
  <p class="text-center text-muted display-5 bg-light">Hotel Project</p>
</footer>
```

### 2.3.3 TOPページのデザイン
<img width="1412" alt="Screen Shot 2020-01-11 at 15.00.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/db7533e7-0e11-99b1-7263-ddec95677d15.png">

```erb
<div class="container">
  <div class="row">
    <div class="col-md-3">
    </div>
  </div>
</div>
```

と

```erb
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
```

を組み合わせてTOPページを作っていこう。



### 2.3.4 ホテル詳細ページのデザイン
<img width="1366" alt="Screen Shot 2020-01-11 at 15.00.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/b7e0d90c-cd78-6139-32d2-edd791fccd3a.png">


======
これ以降は余裕があれば。

### 2.3.5 都道府県詳細ページのデザイン
<img width="1462" alt="Screen Shot 2020-01-11 at 15.00.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/aa076a41-dc90-e4f4-8c04-f2a9f1a63866.png">


### 2.3.6 レビュー一覧ページのデザイン
<img width="1320" alt="Screen Shot 2020-01-18 at 12.38.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/1c96bc8c-e441-1600-108c-a61bbba65d20.png">


### 2.3.7 レビュー作成ページのデザイン
<img width="1318" alt="Screen Shot 2020-01-18 at 12.38.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/da5e2073-f6b6-2075-e018-38597dbe408b.png">