在我们的设计里，内容列表块的下面是分页导航，接下来是页面的导航路径 ... 这些小东西 Bootstrap 已经设计好了，打开 Bootstrap 项目的网站 ...
打开组件 Components ... 我们先为页面添加一个分页导航 ... 点击分页 Pagination ... 找到一个自己想要的样式 ...
然后复制一下这个样式的代码结构 ...
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>
回到网页的代码模式下，在内容列表块结束的位置 .... （#main-content 结束） 另起一行 ... 把分页的代码粘贴到这里 ...
再回到 Bootstrap 项目网站，在组件这个页面，点击面包屑， Breadcrumbs，就是页面的导航路径 ... 它的作用就是告诉网页的用户当前页面的位置 ...
复制一下面包屑的代码结构 ... 回到网页代码模式 .... 在分页结束的位置 ... 另起一行 .... 把面包屑的代码粘贴到这里...
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
切片
下面我们可以修改下这个面包屑的样式，先回到网页的设计图 ... 在我们的设计里，面包屑的下面只有一条灰色线，中间有一个蝴蝶结的图标 ...
选中切片工具 ... 按住鼠标左键，拖一个区域圈起这个蝴蝶结，这样我们就创建了一个切片，会儿我们可以把这个切片导出为一个图像 ...
放大设计图，微调一下这个切片的尺寸和位置 ... 按住空格键的同时，mac 用户再按住 command，windows 用户按住 ctrl 键，然后向右移动鼠标 ....
切片的大小和位置正好 ... 双击这个切片 ... 给这个切片定义一个名称 ... 输入 bow ...
点击 文件 ，存储为 web 所用格式 ... 按住 空格 键 ... 拖拽设计图 ... 找到刚才的切片 ... 点击选中这个切片 ...
然后在右边的 预设 这里，选择这个切片图像的格式 ... 这里我们可以使用 PNG-8 这种格式 ...
点击 存储 ... 位置选择 桌面，然后在 切片 这里，选择 选中的切片 ... 然后点击 存储 ...
回到桌面上，打开 images 目录，在里面你可以找到切片图像 ... 我们把这个切片图像放在网页目录里面的 images 文件夹里 ...
