今回はWEBサービスにBootstrapを導入します。
Bootstrapを使うことで、CSSが適用されたデザイン済みのフォーム、ボタン等をウェブサイトに使用することができます。
これにより、CSSの知識不足をカバーしつつ、CSSの知識を得ることができます。

Bootstrapの導入方法

Bootstrapの導入は2通りの方法があります。
CSSやJavascript一式をダウンロードして使用する方法とBootstrapCDNを利用する方法です。メリット・デメリットがあるので選択する必要があります。
今回はBootstrapCDNを利用します。
親ブレードのcssセクションとscriptセクションに、BootstrapCDNを導入します。

        @section('css')
            <!-- 共通CSSおよび画面毎CSSの領域を定義 -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        @show
            @section('script')
                <!-- 共通scriptおよび画面毎scriptの領域を定義 -->
                <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
            @show

ヘッダーの実装

ヘッダーはBootstrapのNavbarを利用します。 NavbarはPCの時はフルサイズで表示され、スマートフォンのように表示領域が狭い場合は開閉可能となるレスポンシブデザインとなっています。

    	<div id="navbar" >
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <a class="navbar-brand" href="#">Navbar</a>
              <button
              	class="navbar-toggler"
              	type="button"
              	data-toggle="collapse"
              	data-target="#navbarSupportedContent"
              	aria-controls="navbarSupportedContent"
              	aria-expanded="false"
              	aria-label="Toggle navigation"
              >
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                @section('header')
                    <!-- 共通ヘッダーおよび画面毎ヘッダーの領域を定義 -->
                    <ul class="navbar-nav mr-auto">
                      <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                      </li>
                      <li class="nav-item dropdown">
                        <a
                        	class="nav-link dropdown-toggle"
                        	href="#"
                        	id="navbarDropdown"
                        	role="button"
                        	data-toggle="dropdown"
                        	aria-haspopup="true"
                        	aria-expanded="false"
                        >
                          Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                @show
              </div>
            </nav>
    	</div>

コンテンツの実装

コンテンツ領域を確保します。
今後はこの中にコンテンツを追加していきます。

        <div class="container">
            @section('content')
            	<!-- 共通コンテンツおよび画面毎コンテンツの領域を定義 -->
            @show
        </div>

フッターの実装

フッターは利用規約等の情報を載せる予定です。

        <footer class="footer">
          <div class="container">
            @section('footer')
            	<!-- 共通フッターおよび画面毎フッターの領域を定義 -->
			    <p class="text-muted">Place sticky footer content here.</p>
            @show
          </div>
        </footer>

ヘッダー・フッター固定化CSSの実装

上記のままではコンテンツ領域が長くなるとスクロールするようになります、ヘッダーやフッターも合わせてスクロールされていくためユーザーの操作性を損ないます。
そこで、ヘッダーを画面上部に、フッターを画面下部にそれぞれ固定化します。

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
body > .container {
  height: 100%;
  overflow: auto;
  padding: 60px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

#navbar {
	position: fixed;
	width: 100%;
	top:0px;
	left:0px;
}

まとめ

今回はWEBサービスにヘッダーとフッターを追加しました。