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>

如图:

Bootstrap页面布局18 - BS导航路径以及分页器

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

<!--分页器-->
<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:居左(默认)

Bootstrap页面布局18 - BS导航路径以及分页器

简单的分页器

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

如图:

Bootstrap页面布局18 - BS导航路径以及分页器

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

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

如图:

Bootstrap页面布局18 - BS导航路径以及分页器

上一篇:Android性能优化典范 - 第1季


下一篇:Bootstrap3 表单-被支持的控件:输入框