這篇文章主要介紹了BootStrap實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式布局，當(dāng)在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏的效果，非常不錯(cuò)，具有參考借鑒價(jià)值,對(duì)bootstrap 響應(yīng)式布局導(dǎo)航欄功能感興趣的朋友一起學(xué)習(xí)吧

廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所示：

<!DOCTYPE html> 
<html> 
<head> 
<title>bootstrap實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式布局，當(dāng)在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="bootstrap.min.css" rel="stylesheet"> 
<style type="text/css"> 
.nav-logo{ 
float: left; 
height: 40px; 
margin-top: 5px; 
overflow: hidden; 
} 
.nav-logo a{ 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body> 
<!--導(dǎo)航--> 
<div class="navbar navbar-fixed-top navbar-inverse" > 
<div class="container"> 
<div class="nav-logo"> 
<a class="" href="#"> 
<img class="img-responsive" src="logo.png" alt="北京市慧谷陽(yáng)光科技有限公司" style="height: 100%;width: auto;" /> 
</a> 
</div> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
</div> 
<div class="collapse navbar-collapse navbar-right" id="navBar"> 
<ul class="nav navbar-nav"> 
<li><a href="#">首頁(yè)</a></li> 
<li><a href="#">公司介紹</a></li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
產(chǎn)品中心<span class="caret"></span> 
</a> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">SmartCall智能呼</a></li> 
<li><a href="#">運(yùn)營(yíng)管理平臺(tái)ＯＭＳ</a></li> 
<li><a href="#">客戶(hù)關(guān)系管理系統(tǒng)</a></li> 
<li><a href="#">電銷(xiāo)系統(tǒng)</a></li> 
<li><a href="#">知識(shí)庫(kù)管理</a></li> 
<li><a href="#">排班管理模塊</a></li> 
<li><a href="#">考試培訓(xùn)系統(tǒng)</a></li> 
<li><a href="#">多媒體調(diào)度指揮系統(tǒng)</a></li> 
</ul> 
</li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
行業(yè)方案<span class="caret"></span> 
</a> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">多媒體呼叫中心</a></li> 
<li><a href="#">保險(xiǎn)行業(yè)</a></li> 
<li><a href="#">制造行業(yè)</a></li> 
<li><a href="#">政府部門(mén)</a></li> 
<li><a href="#">教育行業(yè)</a></li> 
<li><a href="#">酒店/旅游</a></li> 
<li><a href="#">電子商務(wù)</a></li> 
<li><a href="#">社區(qū)服務(wù)</a></li> 
<li><a href="#">鐵路/客運(yùn)</a></li> 
<li><a href="#">醫(yī)療衛(wèi)生</a></li> 
</ul> 
</li> 
<li><a href="#">公司新聞</a></li> 
<li><a href="#">典型客戶(hù)</a></li> 
<li><a href="#">合作伙伴</a></li> 
<li><a href="#">聯(lián)系我們</a></li> 
</ul> 
</div> 
</div> 
</div> 
<script src="../assets/js/jquery-2.2.1.min.js"></script> 
<script src="bootstrap.min.js"></script> 
</body> 
</html>

以上所述是小編給大家介紹的BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: