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

<!--面包屑-->
<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. hrbustoj 1545:基础数据结构——顺序表(2)(数据结构,顺序表的实现及基本操作,入门题)

    基础数据结构——顺序表(2) Time Limit: 1000 MS    Memory Limit: 10240 K Total Submit: 355(143 users) Total Accep ...

  2. hdu 2044:一只小蜜蜂...(水题,斐波那契数列)

    一只小蜜蜂... Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepte ...

  3. loj 1063(求割点个数)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26780 思路:判断一个点是否是割点的两个条件:1.如果一个点v是根 ...

  4. 【spring 配置文件】spring配置文件的解析

    一.总体结构 二.详解 1.spring <alias >标签 在对bean进行定义时,除了使用id属性来指定名称之外,为了提供多个名称,可以使用alias标签来指定.而所有的这些名称都指 ...

  5. yuv rgb 像素格式1

    ===========大小============= 一般,直接采集到的视频数据是RGB24的格式 RGB24一帧的大小size=width×heigth×3 Byte, RGB32的size=wid ...

  6. c# 模拟 网页实现12306登陆、自动刷票、自动抢票完全篇

    这一篇文章,我将从头到尾教大家使用c#模拟网页面登陆12306网站,自动刷票,选择订票人,到最后一步提交订单.研究过HTTP协议的童鞋们都知道,我们在访问网站时,是有两种方式的,POST和GET方式, ...

  7. UVa10779 Collectors Problem(最大流)

    很容易想到源点向所类型有贴纸连边,容量为Bob一开始有的数量:然后贴纸向汇点连边,容量为1. 接下来就是交换部分的连边了.注意交换一次一次进行,每次只能交换一张. 交换,是对于两种贴纸而言,仅会发生在 ...

  8. 苹果应用商店DNS修改加快下载速度

    具体方法:依次点击进入[设置]→[无线局域网]→[WiFi网络右侧小i图标]→更改DNS地址,可以按照自身需求选择以下某个DNS进行更换. OpenDNS:208.67.222.222和208.67. ...

  9. HDU 4671 Partition(定理题)

    题目链接 这题,明显考察搜索能力...在中文版的维基百科中找到了公式. #include <cstdio> #include <cstring> #include <st ...

  10. Bestcoder Round# 80

    [1003 Sequence] 指数循环节,注意a mod p = 0的情况.此时你的循环节如果返回0,这时你会输出1,而实际上应该是0 #include <algorithm> #inc ...