在 Bootstrap 里面，设计了很多在页面上常用的组件。 在这一章里， 我们看一下导航栏这个组件。在 Bootstrap 里，导航栏这个组件叫做 navbar ..

下面，我们就在这个空白的页面上创建一个导航栏 ... 如果你想让导航栏在页面上居中显示的话，可以先用一组带 .container 类的 div 标签

div.container

导航栏本身可以使用 nav 这个标签，nav 就是 navigation 的简称。在这个标签上，需要两个类，一个是 navbar，还有一个是 navbar-default ...

nav.navbar.navbar-default

在页面上，你会看到带灰色边框的灰色背景的条 ...

在导航栏上，可以包含网站的标志 ... 我们可以把它放在一组 a 标签里面 .... 在这个标签上，需要一个 navbar-brand 类 ...

a.navbar-brand ...

这里我们用纯文字做为项目的标志 ... 用一组 strong 标签，加粗显示一下 ... ninghao ... 然后在加粗标签之后，再输入一个 .net ....

在它的下面，可以是导航栏上的菜单项目 ... 这个菜单可以放在一组 ul 标签里面 .... 也就是无序的列表标签 ... 在这个标签上，也需要加上两个特别的类 .. 一个是 nav ... 还有一个是 navbar-nav ...

ul.nav.navbar-nav

它里面是每个菜单项 ... 每个菜单项都可以放在一组 li 标签里面 ... 这里我们添加三个菜单项 ... 每个菜单项里面，都有一个 a 标签 ... a 标签里面就是菜单项上的文字 ...

li*3>a

课程 ... 博客 .... 手册 ....

现在，你会看到，页面上的导航栏上面，会有一个标志的文字 ... 还有三个菜单项 .... 课程，博客，还有手册 ...

在激活的菜单项上面，可以加上一个叫 active 的类 ... 它可以为菜单项添加点额外的样式，区别一下 ... 这样用户可以知道自己当前所处的位置，属于哪个菜单项 ...

在菜单项的 li 标签上，去添加这个 active 类 ...

你会看到，应用了这个类的菜单项，默认会有一个灰色的背景。