bootstrap响应式导航如何制作

bootstrap是一个特别好用的网站前端框架，可以让我们制作响应式网站时比较简单。

对于响应式网站制作时，响应式导航是比较重要的部分。下面学做网站论坛就来讲一下响应式导航如何通过bootstrap制作。

先看下bootstrap响应式导航PC端的效果：

再看下bootstrap响应式导航手机端的效果：

bootstrap响应式导航制作步骤：

• 首先肯定是在网站上引入bootstrap框架，方法见：网站如何正确引入bootstrap框架
• 在需要显示网站导航的位置，使用以下的代码去制作自适应导航。

  
  <nav class="navbar navbar-default">
  
  <div class="container-fluid">
  
  <!-- Brand and toggle get grouped for better mobile display -->
  
  <div class="navbar-header">
  
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  
  <span class="sr-only">Toggle navigation</span>
  
  <span class="icon-bar"></span>
  
  <span class="icon-bar"></span>
  
  <span class="icon-bar"></span>
  
  </button>
  
  <a class="navbar-brand" href="#">Brand</a>
  
  </div> <!-- Collect the nav links, forms, and other content for toggling -->
  
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  
  <ul class="nav navbar-nav">
  
  <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  
  <li><a href="#">Link</a></li>
  
  <li><a href="#">Action</a></li>
  
  <li><a href="#">Another action</a></li>
  
  <li><a href="#">Something else here</a></li>
  
  <li role="separator" class="divider"></li>
  
  <li><a href="#">Separated link</a></li>
  
  
  
  </ul>
  
  </div><!-- /.navbar-collapse -->
  
  </div><!-- /.container-fluid -->
  
  </nav>
  
  

• bootstrap响应式导航代码分为二个部分，上面是手机状态下出现的按钮代码，下面是PC状态下的横排导航代码。
• 只需要使用上面的代码，就可以轻松在自己做网站时实现响应式导航了。