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>

如图：