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