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、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class="page-header">Bootstrap框架</h1>

         <nav class='navbar navbar-inverse'>

             <div class="navbar-header">

                 <a href="" class='navbar-brand'>

                     <img src="logo.png" height='100%'>

                 </a>

                 <button class='navbar-toggle collapsed' data-toggle='collapse' data-target='#mynavbar'>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                 </button>

             </div>    

             <div id="mynavbar" class='collapse navbar-collapse'>

                 <ul class='nav navbar-nav'>

                     <li class='active'><a href="">起步</a></li>

                     <li><a href="">全局CSS样式</a></li>

                     <li><a href="">组件</a></li>

                     <li><a href="">Javascript插件</a></li>

                     <li><a href="">定制</a></li>

                     <li class='dropdown'>

                         <a href="" class='dropdown-toggle' data-toggle='dropdown'>

                             <span>网站实例 <span class='caret'></span></span>

                         </a>

                         <ul class='dropdown-menu'>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                             <li><a href="">linux</a></li>

                         </ul>

                     </li>

                 </ul>

                 <ul class='nav navbar-nav navbar-right'>

                     <li><a href="">Bootstrap中文网</a></li>

                 </ul>

             </div>

         </nav>

     </div>

 </body>

 </html>