Bootstrap導航欄和下拉選單
阿新 • • 發佈：2019-01-08
導航欄寫法示例：
<nav class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<!--此處寫導航欄的Header-->
<p class="navbar-brand">IT</p>
</div>
<ul class="nav navbar-nav">
<li 此例中，導航欄有個nav標籤作為整個導航欄的容器，它的class是nav navbar-default;下一層則是一個div標籤作為一個Bootstrap的container容器，這裡的作用是限定容器為頁面的中心位置，並左右各據邊界一定距離，讓頁面看起來不偏不倚;裡層責包含的兩個部分，一部分是導航欄的頭（header），div作為導航欄的頭部，class為navbar-header，在這個div裡可以安排一些內容作為導航欄最左邊的頭部;還有一部分就是無序表，作為導航menu，ul的class為nav navbar-nav。
下拉選單示例：
<div class="dropdown" 在下拉選單中，它的容器是div，class為dropdown;裡層由button構成觸發btn，由ul/li無序表構成觸發後的下拉選單列表。button的class為btn btn-primary，還需要設定屬性data-toggle=”dropdown”,才能實現下拉的功能;ul的class為dropdown-menu。
完整程式碼例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<!--此處寫導航欄的Header-->
<p class="navbar-brand">IT</p>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Java</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">Shell</a></li>
<li><a href="#">Python</a></li>
</ul>
</div>
</nav>
<hr>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Php</a></li>
</ul>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script SRC="js/bootstrap.js"></script>
</body>
</html>