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

最新推荐文章于 2025-07-19 16:11:01 发布

转载最新推荐文章于 2025-07-19 16:11:01 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zell-Dinch/p/3888413.html

本文介绍了网站设计中常用的导航路径（面包屑）和分页器的实现方式，并提供了具体的HTML代码示例，帮助读者理解如何在网页中实现这两种常用的设计元素。

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

<!--面包屑-->
<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>

如图：

转载于:https://www.cnblogs.com/Zell-Dinch/p/3888413.html