导航路径:又叫“面包屑”,功能是让用户知道所处的位置。

<!--面包屑-->
<ul class='breadcrumb'>
<li><a href='#'>首页</a> <span class='divider'>></span></li>
<li><a href='#'>餐厅列表</a> <span class='divider'>></span></li>
<li class='active'><a href='#'>餐厅详细</a></li>
</ul>

如图:

分页器:一般用在内容的列表页面,在不同的内容页面来回的跳转。

<!--分页器-->
<div class=' pagination pagination-centered'>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>上一页</a></li>
<li><a href='#'>6</a></li>
<li><a href='#'>7</a></li>
<li><a href='#'>8</a></li>
<li><a href='#'>9</a></li>
<li class='active'><a href='#'>10</a></li>
<li><a href='#'>11</a></li>
<li><a href='#'>12</a></li>
<li><a href='#'>13</a></li>
<li><a href='#'>14</a></li>
<li><a href='#'>15</a></li>
<li><a href='#'>下一页</a></li>
<li><a href='#'>尾页</a></li>
</ul>
</div>

如图:居中显示

同过以下类来控制分页显示的位置

.pagination pagination-centered:居中

.pagination pagination-right:居右

.pagination pagination-centered:居左(默认)

简单的分页器

<!--简单的分页器-->
<div class='pager'>
<ul> <li><a href='#'>上一页</a></li>
<li><a href='#'>下一页</a></li> </ul>
</div>

如图:

居左(上一页)-居右(下一页)的简单分页器

<ul class='pager'>
<li><a href='#'>上一页</a></li>
<li><a href='#'>下一页</a></li>
</ul>

如图:

Bootstrap页面布局18 - BS导航路径以及分页器的更多相关文章

  1. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  2. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  3. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  4. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  5. Bootstrap页面布局10 - BS代码

    网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 ...

  6. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  7. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  8. Bootstrap页面布局22 - BS工具提示

    当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class=' ...

  9. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

随机推荐

  1. ***CI中的数据库操作(insert_id新增后返回记录ID)

    在system/application/config 文件夹和里面的config文件里已经配置了参数 $active_group = "default";$db['default' ...

  2. 亿条数据在PHP中实现Mysql数据库分表100张

    当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度.笔者做了一个简单的尝试,1亿条数据,分100张表.具体实现过程如下: 首先创建100张表: $i=0; while($i<=9 ...

  3. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  4. mysql错误:“ Every derived table must have its own alias”(每个派生出来的表都必须有一个自己的别名)

    自我感悟: 由此可以延伸,我们得到一个结果集,可以通过as XXX的方式,把结果集给当作一张表来用,以实现子查询: 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时候子查询出来的的结果是作为一 ...

  5. 布局文件中fill_parent、match_parent和wrap_content有什么区别?

    fill_parent 宽度或者高度 布满整个屏幕从Android 2.2开始fill_parent改名为match_parent.wrap_content布局元素将根据内容更改大小.

  6. 【poj2828】Buy Tickets 线段树 插队问题

    [poj2828]Buy Tickets Description Railway tickets were difficult to buy around the Lunar New Year in ...

  7. linux在工作中用的比较多的几个命令

    1.chmod +X qmf.txt;给qmf.txt文件添加执行的权限 2.find命令: find ./ -name "*.log" exec  rm -rf { } \;   ...

  8. Winedt打开tex文件报错error reading的解决方案

    我刚装就发现winedt打开一些.tex文件时会出现reading error,然后看不到任何文字(网上有人讨论打开是乱码的问题,但是我的是完全看不到任何东西),我的系统winxp,网上有人说好像是和 ...

  9. jmeter性能测试实战-web登录测试

    一.项目背景: 网站信息: 操作系统类型 二.需求: 登录并发测试 三.场景: 1s增加两个线程,运行2000次 分别看20.40.60并发下的表现 四.监控: 成功率.响应时间.标准差.cpu.me ...

  10. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...