Bootstrapでナビゲーションメニューをつくる

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
	<a class="navbar-brand" href="#"><img src="logo.png" alt=""></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarResponsive">
		<ul class="navbar-nav ml-auto">
			<li class="nv-item active">
				<a class="nav-link" href="#">Home</a>
			</li>
			<li class="nv-item active">
				<a class="nav-link" href="#">About</a>
			</li>
			<li class="nv-item active">
				<a class="nav-link" href="#">Services</a>
			</li>
			<li class="nv-item active">
				<a class="nav-link" href="#">Team</a>
			</li>
			<li class="nv-item active">
				<a class="nav-link" href="#">Connect</a>
			</li>
		</ul>
	</div>
</div>
</nav>

① 全体
・全体を囲う <nav></nav>に, .navbar .navbar-expand-{sm, md, lg, xl} を指定
・色は .navbar-light .navbar-dark .bg-{~~} で指定
・.sticky-top でトップに固定

② ロゴ画像(テキスト)
・.navbar-brand を指定

③ メニューボタン
・<button> に, .navbar-toggler を指定
・data-toggle="collapse" を指定
・data-taarget にメニューの中身のid (class) を指定
・<span class="navbar-toggler-icon"></span> でアイコン表示

④ メニューの中身
・親要素に .collapse .navbar-collapse を指定
・親要素にメニューボタンの data-target で指定したid (class) を指定
・<ul> に .navbar-nav を指定
・<li> に.navbar-item .active を指定
・<a> に.nav-link を指定