回到网页的视图模式 ... 查看一下导航路径这块内容的元素 ... 在 bootstrap.css 里定义了导航路径的样式 ...

点击样式的出处，可以浏览到这块样式 ... 里面定义了导航路径的背景颜色 ... 我们可以在自己的样式表里覆盖这个背景颜色 ...

回到网页的样式表 ...

输入 .breadcrumb{background-color:#fff} 我们把它的背景颜色设置为跟网页背景一样的白色 ...

然后添加一个下边线 ... border-bottom:1px solid #d7d7d7;

蝴蝶结样式

下面我们要在导航路径下边线的中间放一个蝴蝶结图像 ... 回到网页的代码模式 ... 找到导航路径的代码 ... 在它的下面添加一组 <i> 标签，在上面再添加一个类 ... 命名为 .icon-bow

回到样式表 ... 输入 .icon-bow{} ，输入 display:block，这行样式可以把行内元素变成块级元素，这样我们就可以设置元素的高度，宽度，还有背景 ...

先找到蝴蝶结图像 ... 看一下这个图像的大小 ...

宽是 32px，高是 21px

回到样式表，输入 width:32px; height:21px ，然后再设置一下它的背景， background:#fff url(images/bow.png) no-repeat 50% 50%

这行样式会把 bow.png 这个图像设置为 .icon-bow 的背景 ... #fff ，表示背景的颜色是白色 ... no-repeat 表示不重复显示背景 ，第一个 50% 代表背景图片的水平位置，50%表示水平中间的位置，第二个 50% 表示背景垂直的位置，50% 表示垂直中间的位置 ...

.icon-bow{
display: block;
width: 32px;
height: 21px;
background: #fff url(images/bow.png) no-repeat 50% 50%;
padding: 0 10px;
margin: 0 auto;
margin-top: -30px;
}

下面我们要让这个元素居中显示 ... 输入 margin:0 auto ，这行样式的意思是设置上下边距为 0 ，左右边距为自动 ... 这样元素会居中显示 ...

然后让它正好显示在导航路径下边线的上面 .... 输入 margin-top:-30px ，设置上边外边距的值为负的 30px ，这样会把元素向上提拉 30px ... (#切换到视图)

我们在元素的左边和右边各添加一个 10像素的内边距，因为我们设置了元素的背景颜色为白色，所以除了显示蝴蝶结背景以后，多出来的左右内边距会显示白色的背景 ...

回到样式表，输入 padding: 0 10px;

（#切换到视图）

这样我们就完成了导航路径的设计。