<!-- 头部 -->
<!-- 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>
