本文主要大家分享了響應式導航條的具體代碼，供大家參考，具體內容如下
1.基礎導航條navbar navbar-default navbar-header navbar-brand nav navbar-nav
2.導航條中的表單navbar navbar-default navbar-header navbar-brand navbar-form
3.導航條中的按鈕，文本，鏈接navbar-btn、bavbar-text、navbar-link
4.導航條中的項目進行左右浮動navbar-left、navbar-right
5.頂部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom
6.響應式導航條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap從3.0版本開始全面支持移動平台，貫徹移動先行宗旨 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 基礎導航條navbar navbar-default navbar-header navbar-brand nav navbar-nav
創建一個默認的導航欄的步驟如下：
1.向 <nav> 標簽添加 class .navbar、.navbar-default
2.向上面的元素添加 role="navigation"，有助於增加可訪問性。
3.向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
4.為了向導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">前端</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">JS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">js高級程序設計</a></li>
<li><a href="">js設計模式</a></li>
<li><a href="">js DOM</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- 導航條中的表單navbar navbar-default navbar-header navbar-brand navbar-form
步驟如下：
1.向 <nav> 標簽添加 class .navbar、.navbar-default
2.向上面的元素添加 role="navigation"，有助於增加可訪問性。
3.向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
4.navbar容器內放置form元素，在form元素上應用navbar-form樣式即可，同事navbar-left和navbar-right可用-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button class="btn btn-default" type="button">左按鈕</button>
</form>
<form role="search" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button class="btn btn-default" type="button">右按鈕</button>
</form>
</nav>
<!-- 導航條中的按鈕，文本，鏈接：
普通導航欄中使用navbar-brand樣式得a元素
還有：navbar-btn、bavbar-text、navbar-link(這些象征性的設置了margin和顏色)-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="href-"#"" class="navbar-brand">Brand</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-class navbar-btn">和ul一起使用的button</button>
</nav>
<!-- 導航欄中的文本：
如果需要在導航中包含文本字符串，請使用 class .navbar-text-->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div>
<p class="navbar-text">Runoob 用戶登錄</p>
</div>
</div>
</nav>
<!-- 響應式導航條：
一個導航條默認情況下都是全屏100%顯示，所以通常有很多菜單，但在小屏幕上可能顯示不全。
通常需要根據尺寸隱藏或者去除一部分菜單內容。-->
<!-- bootstrap是基於jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。