套用導覽列篇
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="mybox">
<table class="table table-hover">
<thead>
<tr class="info">
<th>姓名</th>
<th>地區</th>
<th>電話</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>yiru</td>
<td>台北</td>
<td>0911874123</td>
<td>yiru@gmail.com</td>
</tr>
<tr>
<td>Mark</td>
<td class="success">高雄</td>
<td>0914125339</td>
<td>yiru@gmail.com</td>
</tr>
<tr class="Warning">
<td>Puly</td>
<td>屏東</td>
<td>0912654123</td>
<td>yiru@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
請建立3張網頁-
首頁-只有 nav (導覽列)
商品頁- nav + 商品列表 (使用BS-div)排版
表格介紹頁- nav + 表格介紹頁(套用BS-table)
Yiru@Studio - 關於我 - 意如
