期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

Bootstrap页码分页导航

页码分页

  带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式

【默认分页】

  平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:

<nav aria-label="Page navigation">    <ul class="pagination">      <li>        <a href="#" aria-label="Previous">          <span aria-hidden="true">&laquo;</span>        </a>      </li>      <li><a href="#">1</a></li>      <li><a href="#">2</a></li>      <li><a href="#">3</a></li>      <li><a href="#">4</a></li>      <li><a href="#">5</a></li>      <li>        <a href="#" aria-label="Next">          <span aria-hidden="true">&raquo;</span>        </a>      </li>    </ul>  </nav>

【状态】

  链接在不同情况下可以定制。可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类

  最好将 active 或 disabled 状态的链接(即 <a> 标签)替换为 <span> 标签,或者在向前/向后的箭头处省略<a> 标签,这样就可以让其保持需要的样式而不能被点击

<nav aria-label="Page navigation">    <ul class="pagination">      <li class="disabled">        <span aria-label="Previous">          <span aria-hidden="true">&laquo;</span>        </span>      </li>      <li class="active"><span>1</span></li>      <li><a href="#">2</a></li>      <li><a href="#">3</a></li>      <li><a href="#">4</a></li>      <li><a href="#">5</a></li>      <li>        <a href="#" aria-label="Next">          <span aria-hidden="true">&raquo;</span>        </a>      </li>    </ul>  </nav>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册