反色导航条与响应式导航

反色导航条与响应式导航

---

反色导航条

1.反色导航条实例

Bootstrap给我们定义了两种导航条的样式，一种是default，一种是inverse。

2.运行效果

---

响应式导航

1.新建一个demo02.html

2.响应式导航实例

<nav class="navbar navbar-inverse">

<div class="navbar-header">

<button type="button" class="navbar-toggle" 

//"navbar-toggle" 表示按钮的出现与不出现是根据你屏幕的分辨率来决定的

//它决定当你的屏幕大于768像素时，不出现按钮；当屏幕小于768像素时，出现按钮。

data-toggle="collapse"

//小于768像素时，把这个容器隐藏掉

data-target=".navbar-responsive-collapse">

<span class="sr-only">Toggle navigtion</span>

//在按钮里面给一个图标

<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">

//当屏幕小于768像素时，把下面这些东西隐藏掉

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

</div>

</nav>

3.运行效果

当屏幕大于768像素时：

当屏幕小于768像素时：

点击按钮出现导航，再点击按钮收起导航。