开发手册 欢迎您！
软件开发者资料库

Bootstrap - 分页

Bootstrap分页 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮组开始，简单易学地学习Bootstrap ，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠，旋转木马，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

本章讨论Bootstrap支持的分页功能.分页，无序列表由Bootstrap处理，就像很多其他接口元素一样.

分页

下表列出了Bootstrap提供给的类处理分页.

Class描述示例代码
.pagination添加此课程以获取页面上的分页.
 < ul class ="pagination"> < li>< a href ="＃">& laquo; < li>< a href ="＃"> 1  ....... 
.disabled，.active您可以使用 .disabled 为不可点击的链接自定义链接，并使用 .active 指示当前页面.
 < ul class ="pagination"> < li class ="disabled">< a href ="＃">& laquo; < li class ="active">< a href ="＃"> 1< span class ="sr-only">(当前)< ;/立GT;  ....... 
.pagination-lg，.pagination-sm使用这些类来获得不同大小的项目.
 < ul class ="pagination pagination-lg"> ... < ul class ="pagination"> ... < ul class ="pagination pagination-sm"> ...

默认分页

以下示例演示了上表中讨论的类 .pagination 的使用和减号;

   
  • «
    •    
  • 1
    •    
  • 2
    •    
  • 3
    •    
  • 4
    •    
  • 5
    •    
  • »

    •  

    状态

    以下示例演示了上表中讨论的类 .disabled 的使用 :

       
  • «
    •    1   2   
  • 3
    •    
  • 4
    •    
  • 5
    •    
  • »

    • Sizing

    以下示例演示了如何使用上表中讨论的大小调整.pagination- *:

       
  • «
    •    
  • 1
    •    
  • 2
    •    
  • 3
    •    
  • 4
    •    
  • 5
    •    
  • »

    •    
  • «
    •    
  • 1
    •    
  • 2
    •    
  • 3
    •    
  • 4
    •    
  • 5
    •    
  • »

    •    
  • «
    •    
  • 1
    •    
  • 2
    •    
  • 3
    •    
  • 4
    •    
  • 5
    •    
  • »

    • Pager

    如果您需要创建超出文本的简单分页链接，则寻呼机可以很好地工作。 与分页链接一样，寻呼机是无序列表。 默认情况下，链接居中。 下表列出了Bootstrap为寻呼机提供的类。

    ClassDescriptionSample code
    .pagerAdd this class to get the pager links.
       
  • Previous
    •    
  • Next
    • .previous, .nextUse class .previous to left align and .next to right-align the links.
       ← Older   Newer →
    .disabledAdd this class to get a muted look.
       ← Older   Newer →

    Default Pager

    以下示例演示了上表中讨论的类.pager的用法:

       
  • Previous
    •    
  • Next

    • Aligned Links

    下面的示例演示了如何使用上表中讨论的alignment，.previous，.next:

       ← Older   Newer →

    States

    以下示例演示了上表中讨论的类.disabled的用法:

       ← Older   Newer →