bootstrap3导航栏

<!-- 头部 -->

    <!-- navbar-inverse——指定导航条组件为黑色主题 -->

    <nav class="navbar navbar-inverse">

            <!-- container-fluid全局 -->

            <div class="container-fluid">

              <div class="navbar-header">

                  <!-- 响应式按钮 -->

                  <!-- data-target触发模态弹出窗元素 -->

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

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

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

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

                  <!-- icon-bar  横线                         -->

                </button>

                <a class="navbar-brand" href="#">天云社区</a>

              </div>

              <!-- 折叠（Collapse）插件可以很容易地让页面区域折叠起来 -->

              <div class="collapse navbar-collapse" id="myNavbar">

                <ul class="nav navbar-nav " style="margin-left: 30vw;">

                  <!-- <li><a href="index.html">首页</a></li>

                  <li><a href="article.html">好文</a></li> -->

                  <li class="nav-item" >

                        <a href="#" class="nav-link" >首页</a>

                    </li>

                    <li class="nav-item">

                        <a href="#" class="nav-link">攻略</a>

                    </li>

                    <li class="nav-item">

                        <a href="#" class="nav-link">视频</a>

                    </li>

                    <li class="nav-item">

                            <a href="#" class="nav-link">图片</a>

                        </li>

                        <li class="nav-item">

                                <a href="#" class="nav-link">活动</a>

                            </li>

                            <li class="nav-item">

                                    <a href="#" class="nav-link">讨论</a>

                                </li>

                </ul>

                <ul class="nav navbar-nav " style="margin-left:30vw;" >

                        <!-- <li><a href="index.html">首页</a></li>

                        <li><a href="article.html">好文</a></li> -->

                        <li class="nav-item" >

                              <a href="#" class="nav-link" >登录</a>

                          </li>

                          <li class="nav-item">

                              <a href="#" class="nav-link">注册</a>

                          </li>

                      </ul>

              </div>

            </div>

          </nav>