bootstrap的導航欄有成熟的組件，在移動端和PC端都能夠做到自適應，這裏只是稍微做了一點修改，做一下筆記~
效果圖：
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 在移動端不縮放 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>導航條</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
/* 導航項的底下指示條，並添加過渡動畫*/
.underline-bar {
height: 2px;
width: 0%;
margin: 0 auto;
background-color: #ffffff ;
transition:width 1.5s; /**/
-webkit-transition:width 1.5s; /* Safari */
}
/* 鼠標經過導航項的時候顯示過渡動畫*/
li:hover>.underline-bar{
width: 100%;
}
/* 選中狀態，指示條顯示*/
.active>.underline-bar{
width:100%;
}
</style>
</head>
<body>
<!-- 定義反白導航條 -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<!-- 申明logo的容器 -->
<div class="navbar-header">
<!-- 針對logo等固定內容的樣式 -->
<a href="#" class="navbar-brand">logo</a>
<!-- 定義隱藏下拉按鈕 -->
<button class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 做隱藏菜單 -->
<div class="collapse navbar-collapse" id="togglemenu">
<!-- 菜單項 -->
<ul class="nav navbar-nav">
<!-- "cative"：定義當前頁 -->
<li class="active">
<a href="#">首頁</a>
<div class="underline-bar"></div>
</li>
<li>
<a href="#">公司新聞</a>
<div class="underline-bar"></div>
</li>
<li>
<a href="#">行業動態</a>
<div class="underline-bar"></div>
</li>
<li><a href="#">招才納賢</a>
<div class="underline-bar"></div>
</li>
<li><a href="#">關於我們</a>
<div class="underline-bar"></div>
</li>
</ul>
<!-- <button class="btn btn-default navbar-btn">按鈕</button> -->
<!-- 定義搜索框和按鈕 -->
<!-- <button class="btn btn-default navbar-btn navbar-right">搜索</button> -->
<!-- 定義表單 -->
<form class="navbar-form navbar-right">
<!-- 聲明表單組 -->
<div class="form-group">
<!-- 聲明輸入框組 -->
<div class="input-group">
<!-- 聲明文本輸入框 -->
<input type="text" class="form-control">
<span class="input-group-btn">
<!-- 放大鏡按鈕 -->
<button class="btn btn-default">
<!-- 用文字代替圖標 -->
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
