bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何（多去看参考手册）
一、总结
一句话总结：在手机端或者平板端或者显示不够的话就缩起来了。（多去看参考手册）
二、bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
1、相关知识
导航条:
.navbar
.navbar-default
.navbar-inverse
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-header
.navbar-brand
.navbar-nav
.navbar-form
.navbar-btn
.navbar-text
.navbar-link
.navbar-left
.navbar-right
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <title>index</title> 7 <style> 8 *{ 9 font-family: 微软雅黑; 10 } 11 </style> 12 <link rel="stylesheet" href="bs/css/bootstrap.min.css"> 13 <script src="bs/js/jquery.min.js"></script> 14 <script src="bs/js/bootstrap.min.js"></script> 15 <script src="bs/js/holder.min.js"></script> 16 </head> 17 <body> 18 <div class="container"> 19 <h1 class="page-header">Bootstrap框架</h1> 20 <nav class='navbar navbar-inverse'> 21 <div class="navbar-header"> 22 <a href="" class='navbar-brand'> 23 <img src="logo.png" height='100%'> 24 </a> 25 <button class='navbar-toggle collapsed' data-toggle='collapse' data-target='#mynavbar'> 26 <span class="icon-bar"></span> 27 <span class="icon-bar"></span> 28 <span class="icon-bar"></span> 29 </button> 30 </div> 31 32 <div id="mynavbar" class='collapse navbar-collapse'> 33 <ul class='nav navbar-nav'> 34 <li class='active'><a href="">起步</a></li> 35 <li><a href="">全局CSS样式</a></li> 36 <li><a href="">组件</a></li> 37 <li><a href="">Javascript插件</a></li> 38 <li><a href="">定制</a></li> 39 <li class='dropdown'> 40 <a href="" class='dropdown-toggle' data-toggle='dropdown'> 41 <span>网站实例 <span class='caret'></span></span> 42 </a> 43 44 <ul class='dropdown-menu'> 45 <li><a href="">linux</a></li> 46 <li><a href="">linux</a></li> 47 <li><a href="">linux</a></li> 48 <li><a href="">linux</a></li> 49 </ul> 50 </li> 51 </ul> 52 53 <ul class='nav navbar-nav navbar-right'> 54 <li><a href="">Bootstrap中文网</a></li> 55 </ul> 56 </div> 57 </nav> 58 59 60 </div> 61 </body> 62 </html>