1.新建一个web项目ch15，复制ch14相关的css、js等文件的内容。

2.基础导航用法实例

基础导航

//导航条默认是圆角并带有背景

导航

//加一个导航条样式"navbar-brand"，比较醒目。

首页

首页

首页

首页

3.运行效果

1.导航中添加表单的实例

导航 中加表单

导航

首页

首页

首页

首页

//定义一个样式"navbar-form "，此时文本框和文本水平排列。

//"navbar-right"表单在导航的右边

//对于这个文本框，我们可以加上"form-control"，此时文本框变成圆角形式。

搜索

//给按钮一个样式"btn btn-danger",此时搜索按钮变成红色。

2.运行效果

1.导航中出现文本、链接、按钮实例

导航 中加文本、链接、按钮

导航

首页

首页

首页

首页

文本

链接

按钮

2.运行效果

1.顶部固定的导航条实例

在body中设置

顶部固定

//顶部固定只需要在标签里加一个“navbar-fixed-top”属性设置

导航

首页

首页

首页

首页

文本

链接

按钮

2.运行效果

这是之前的运行效果

刷新一下，顶部固定的这个导航跑到最顶部了，并且它把我们的基础导航给覆盖掉了。所以，一旦设了navbar-fixed-top顶部固定，它的导航条就会跑到顶部覆盖原来顶部的东西。

因此，我们可以在头文件中设置

body{ padding-top: 70px;}

//默认导航条系统设置的是50像素，我们给它设置为70像素，

运行效果：

1.设置全屏方角导航

合屏方角导航

//导航条默认是圆角，navbar-static-top设置全屏方角导航

导航

首页

首页

首页

首页

2.运行效果