Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置。
<!--面包屑-->
<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导航路径以及分页器的更多相关文章
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- Bootstrap页面布局10 - BS代码
网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
- Bootstrap页面布局23 - BS折叠内容
<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...
- Bootstrap页面布局22 - BS工具提示
当鼠标点击在一个a连接上时,显示提示文字的效果 ---------------- tooltip <div class='container-fluid'> <h3 class=' ...
- Bootstrap页面布局20 - BS缩略图
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...
随机推荐
- ***CI中的数据库操作(insert_id新增后返回记录ID)
在system/application/config 文件夹和里面的config文件里已经配置了参数 $active_group = "default";$db['default' ...
- 亿条数据在PHP中实现Mysql数据库分表100张
当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度.笔者做了一个简单的尝试,1亿条数据,分100张表.具体实现过程如下: 首先创建100张表: $i=0; while($i<=9 ...
- Query通过Ajax向PHP服务端发送请求并返回JSON数据
Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...
- mysql错误:“ Every derived table must have its own alias”(每个派生出来的表都必须有一个自己的别名)
自我感悟: 由此可以延伸,我们得到一个结果集,可以通过as XXX的方式,把结果集给当作一张表来用,以实现子查询: 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时候子查询出来的的结果是作为一 ...
- 布局文件中fill_parent、match_parent和wrap_content有什么区别?
fill_parent 宽度或者高度 布满整个屏幕从Android 2.2开始fill_parent改名为match_parent.wrap_content布局元素将根据内容更改大小.
- 【poj2828】Buy Tickets 线段树 插队问题
[poj2828]Buy Tickets Description Railway tickets were difficult to buy around the Lunar New Year in ...
- linux在工作中用的比较多的几个命令
1.chmod +X qmf.txt;给qmf.txt文件添加执行的权限 2.find命令: find ./ -name "*.log" exec rm -rf { } \; ...
- Winedt打开tex文件报错error reading的解决方案
我刚装就发现winedt打开一些.tex文件时会出现reading error,然后看不到任何文字(网上有人讨论打开是乱码的问题,但是我的是完全看不到任何东西),我的系统winxp,网上有人说好像是和 ...
- jmeter性能测试实战-web登录测试
一.项目背景: 网站信息: 操作系统类型 二.需求: 登录并发测试 三.场景: 1s增加两个线程,运行2000次 分别看20.40.60并发下的表现 四.监控: 成功率.响应时间.标准差.cpu.me ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...