Bootstrap 的导航栏可以用一个 nav 标签作为它的包装元素，也可以使用 div 标签，不过为了网站的可访问性，你需要在包装上添加一个 role 属性，它的值是 navigation 或者导航，说明一下这个元素里的东西是一个导航栏 ..

输入一个 nav .. 导航栏的包装上要添加一个 navbar .. 导航栏里的标志，可以放在一个 a 标签里面，上面加上 navbar-brand 这个类 .. 里面的内容输入 ninghao.net ..

如果是导航栏的背景是亮色的，在这个导航栏的包装上，再用一个 navbar-light .. 这个类会改变导航栏里的文字的颜色，让它们更适合在亮色的背景上面显示 ..

我们可以再设置一下导航栏的背景颜色 .. 用一个 bg-faded .. 这样会让导航栏有一个浅灰色的背景 .. 让导航的背景变成暗色的，可以用一个 bg-inverse .. 然后把 navbar-light ，换成 navbar-dark .. 这样导航里的文字更适合在暗色的背景下面显示 ..

另外我们也可以使用其它的几种主要的颜色，比如 primary，success ，info，warning，还有 danger .. 用一个 bg-primary ... 现在导航栏的背景就会使用 Bootstrap 里面定义的主要的颜色 ..

这里我们还是使用亮色背景的导航栏 .. 导航栏里面的具体的项目可以用一个 ul 标签，上面加上 nav 还有 navbar-nav 这两个类 ..

每个项目可以是一个 li 标签，上面要加上 nav-item ，表示这是导航栏里的一个项目 .. 每个项目都是一个链接 .. 导航栏里的链接要再用一个 nav-link 这个类 .. 设置一下项目里的文字 ... 课程 .. 博客 .. 社区 ..

ul.nav.navbar-nav>li.nav-item>a.nav-link

在激活的项目上，再额外添加一个 active .. 这个类会加粗加黑项目里的文字 .. 在这个导航栏里面我们再添加一个搜索框 .. 可以用一个 form 标签 .. 上面加上 form-inline，navbar-form ，表示这是在导航栏里的一个表单，再用一个 pull-right，可以让这个表单靠右显示 .. 它里面放一个 input 元素 .. 在这个元素上要加上 form-control 这个类 ... 再用一个 placeholder 属性 .. 它的值设置成 搜索 ..

在导航栏的右边，你会看到一个搜索框 ..