zoukankan      html  css  js  c++  java
  • bootstrap 分页

    本章将讲解Bootsrtap支持分页的特性,分页(pagination),是一种无序列表,bootstrap像处理其它界面元素一样处理分布。

    分页(Pagination)

    下表列出了 Bootstrap 提供的处理分页的 class。

    Class描述示例代码
    .pagination 添加该 class 来在页面上显示分页。
    <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      .......
    </ul>
    .disabled, .active 您可以自定义链接,通过使用 .disabled 来定义不可点击的链接,通过使用 .active 来指示当前的页面。
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
      .......
    </ul>
    .pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。
    <ul class="pagination pagination-lg">...</ul>
    <ul class="pagination">...</ul>
    <ul class="pagination pagination-sm">...</ul>

    默认的分页

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:默认的分页</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div style="padding:150px">
    <ul class="pagination">
    <li><a href="#">&laquo;</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="#">6</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul>
    </div>

    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    WEB服务器防盗链_HttpAccessKeyModule_Referer(Nginx&&PHP)
    子查询2
    子查询
    接上篇elasticsecrchi 进行搜索及时提示,数据库以及后台代码
    Django项目之【学员管理系统】
    Django 请求生命周期【图示】
    Django 之一些request封装的常用功能
    Django 认证系统 cookie & session & auth模块
    Django 模型系统(model)&ORM--进阶
    Django 模型系统(model)&ORM--基础
  • 原文地址:https://www.cnblogs.com/melao2006/p/4996602.html
Copyright © 2011-2022 走看看