Bootstrap响应式导航

效果展示

引用需要注意的
不要忘记引用Bootstrap的js文件！
不要忘记引用Bootstrap的js文件！
不要忘记引用Bootstrap的js文件！
不然在窄屏的时候点击右边的图标不会出现下拉菜单。

代码

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigationspan>
         <span class="icon-bar">span>
         <span class="icon-bar">span>
         <span class="icon-bar">span>
       button>
       
       <a href="##" class="navbar-brand">慕课网a>
  div>
  
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页a>li>
            <li><a href="##">系列教程a>li>
            <li><a href="##">名师介绍a>li>
            <li><a href="##">成功案例a>li>
            <li><a href="##">关于我们a>li>
        ul>
  div>
div>

笔记来源