分页

  • 使用.vus-page类,作为分页的样式。其内部包含:
  • .pages:分页容器,一般用于<ul>标签。
  • .item:分页项目,一般用于<li>标签。
  • .text:用于文本说明。
  • .ellipsis:用于省略号。
  • .link:用于<a>标签。
  • .form:用于表单。
  • .active:当前选中页码。
  • .disabled:禁用,不可点击。

基础用法

<div class="vus-page">
   <ul class="pages">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

带表单的分页

带选择菜单
带选输入框
<!-- 带选择菜单 -->
<div class="vus-page">
   <ul class="pages">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <select class="vus-input">
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
          </select>
      </li>
      <li class="text">页</li>
   </ul>
</div>

<!-- 带输入框 -->
<div class="vus-page">
   <ul class="pages">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <input class="vus-input vus-text-center" placeholder="页码" />
      </li>
      <li class="text">页</li>
      <li class="form">
          <button class="vus-btn primary">GO</button>
      </li>
      <li class="text">共100页</li>
   </ul>
</div>

带有边框的分页

.pages类中添加.bordered类,设置分页项目带有边框效果。当设置为.bordered时,通过添加.gapless类可清除项目之间的间距。

边框无间距
<div class="vus-page">
   <ul class="pages bordered">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <select class="vus-input">
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
          </select>
      </li>
      <li class="text">页</li>
   </ul>
</div>

<!-- 边框无间距 -->
<div class="vus-page">
   <ul class="pages bordered gapless">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <input class="vus-input vus-text-center" placeholder="页码" />
      </li>
      <li class="text">页</li>
      <li class="form">
          <button class="vus-btn primary">GO</button>
      </li>
      <li class="text">共100页</li>
   </ul>
</div>

带有背景色的分页

.pages类中添加.bg类,设置分页项目带有背景色效果。

<div class="vus-page">
   <ul class="pages bg">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <select class="vus-input">
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
          </select>
      </li>
      <li class="text">页</li>
   </ul>
</div>

尺寸

  • .pages类中添加指定类,可设置不同大小的分页效果。
  • .small:小型分页。
  • .large:大型分页。
小型分页
大型分页
<!-- 小型分页 -->
<div class="vus-page">
   <ul class="pages small">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <select class="vus-input">
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
          </select>
      </li>
      <li class="text">页</li>
   </ul>
</div>

<!-- 大型分页 -->
<div class="vus-page">
   <ul class="pages large">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">4</a></li>
      <li class="item"><a href="#" class="link">5</a></li>
      <li class="ellipsis">...</li>
      <li class="item"><a href="#" class="link">100</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
      <li class="text">前往</li>
      <li class="form">
          <select class="vus-input">
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
          </select>
      </li>
      <li class="text">页</li>
   </ul>
</div>

颜色

  • .pages类中添下列类可以设置不同颜色的分页。
  • .primary:首选、主要(默认)。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、错误。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
  • .white:白色。
Primary(默认)
Success(成功)
Warning(警告)
Danger(危险、错误)
Info(信息)
Dark(暗黑)
Light(亮灰)
白色(white)
<!-- success -->
<div class="vus-page">
   <ul class="pages success">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- warning -->
<div class="vus-page">
   <ul class="pages warning">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- danger -->
<div class="vus-page">
   <ul class="pages danger">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- info -->
<div class="vus-page">
   <ul class="pages info">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- dark -->
<div class="vus-page">
   <ul class="pages dark">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- light -->
<div class="vus-page">
   <ul class="pages light">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>

<!-- white -->
<div class="vus-page">
   <ul class="pages white">
      <li class="item disabled"><a href="#" class="link">上一页</a></li>
      <li class="item active"><a href="#" class="link">1</a></li>
      <li class="item"><a href="#" class="link">2</a></li>
      <li class="item"><a href="#" class="link">3</a></li>
      <li class="item"><a href="#" class="link">下一页</a></li>
   </ul>
</div>