【Bootstrap】ナビゲーションバーの実装。

どうも、とがみんです。

この記事では、Bootstrapを利用したNavbarの実装方法について紹介します。

Contents

実装するもの
実装手順
まとめ
参考文献

実装するもの

以下のようなナビゲーションバーをBootstrapを利用して実装します。

【Bootstrap】
ナビゲーションバー pic.twitter.com/D8FNSTCDx7
— 究極の自由を追求するブログFresopiya (@fresopiya) June 7, 2019

実装手順

まず、Bootstrapを導入します。

<head>
    <link href="Bootstrap/bootstrap.css" rel="stylesheet">
    <script src="Bootstrap/jquery-3.4.1.js"></script>
    <script src="Bootstrap/bootstrap.js"></script>
</head>

<head>

</head>

＞【Bootstrap】Bootstrapの導入方法について

導入後、以下のコードを追加します。

<header>
　<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">
    　<ul class="navbar-nav mr-auto">
      　<li class="nav-item active">
        　<a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
        　<a class="nav-link " href="#">Contents①</a>
       </li>
        <li class="nav-item">
        　<a class="nav-link " href="#">Contents②</a>
       </li>
        <li class="nav-item">
        　<a class="nav-link " href="#">Contents③</a>
        </li>
      </ul>
    </div>

  </nav>
</header>