div class='container' style="margin-top: 20px; margin-bottom: 20px;">

<div class='row'>
	<div class='col-md-4' ><!-- 子導覽列-->
	<h4 class="border border-top-0 border-start-0 border-end-0 border-primary">我的學習項目</h4>
	<nav class="navbar bg-light">
		<ul class="navbar-nav" style="width: 100%">
			<li class="nav-item" style="border-bottom: 1px solid silver">
			<a href="#" class="nav-link p-1">Link1</a>
			</li>
			<li class="nav-item" style="border-bottom: 1px solid silver">
			<a href="#" class="nav-link p-1">Link2</a>
			</li>
			<li class="nav-item" style="border-bottom: 1px solid silver">
			<a href="#" class="nav-link p-1">Link3</a>
			</li>
		</ul>
	</nav>
	</div>
	<div class='col-md-8' ><!-- 重要的內容-->
	<h4 class="border border-top-0 border-start-0 border-end-0 border-primary">我的 BootStrap 學習重點</h4>
	</div>

</div>
</div>
<footer class="container-fluid bg-dark text-light" style="padding: 20px 0 0 0; font-size: 10pt;">
	<div class="container">
		<div class="row">
			<div class="col-lg-4 text-center align-middle">
				<p class="rounded-circle text-secondary bg-light align-middle" style="height:50px;width:50px;font-size:24pt;font-weight:bold;">羅</p>
			</div>
			<div class="col-lg-4">
				<h4>快速連結</h4>
				<ul>
					<li><a href="#" class="text-light">html</li></a>
					<li><a href="#" class="text-light">css</li></a>
					<li><a href="#" class="text-light">bootstrap</li></a>			
				</ul>
			</div>
			<div class="col-lg-4">
				<h4>重要學習課程</h4>
				<ul>
					<li><a href="#" class="text-light">期中考個人報告</li></a>
					<li><a href="#" class="text-light">單頁式自我介紹</li></a>
					<li><a href="#" class="text-light">本學期的期末報告</li></a>
				</ul>
			</div>
		</div>
	</div>
	<div class="container-fluid text-center text-muted bg-light" style="padding:15px">
		創作者:沉灌鳴
	</div>
</footer >

</body>
</html>