Bootstrap响应式前端框架笔记十一——分页与标签

简介: Bootstrap响应式前端框架笔记十一——分页与标签
+关注继续查看

  在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下:


 <p>标准的分页器控件</p>

 <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="#">&raquo;</a>

  </li>

 </ul>

效果如下:


image.png


为li元素添加disabled类或者active类可以将其设置为禁用或者激活状态,示例如下:


 <p>使用disabled类与active类可以将页标签设置为禁用或激活</p>

 <ul class="pagination">

  <li class="disabled">

   <a href="#">&laquo;</a>

  </li>

  <li class="active">

   <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="#">&raquo;</a>

  </li>

 </ul>

效果如下图:


image.png


   除了分页器控件,Bootstrap中还提供了一种更为简单的分页控件,示例如下:


 <p>只有前进与后退的分页器</p>

 <ul class="pager">

  <li>

   <a href="#">Previous</a>

  </li>

  <li>

   <a href="#">Next</a>

  </li>

 </ul>image.png

效果如下:




这种分页控件默认是居中的,使用previous与next类可以实现两端对齐的效果,示例如下:


 <p>进行两端对齐</p>

 <ul class="pager">

  <li class="previous">

   <a href="#">Previous</a>

  </li>

  <li class="next">

   <a href="#">Next</a>

  </li>

 </ul>

效果如下:


image.png


   Bootstrap中的标签是一种用于展示文本的控件,示例代码如下:


 <p>标签控件演示</p>

 <span class="label label-default">标签</span>

 <span class="label label-primary">标签</span>

 <span class="label label-success">标签</span>

 <span class="label label-info">标签</span>

 <span class="label label-warning">标签</span>

 <span class="label label-danger">标签</span>

效果如下:


image.png


开发者也可以使用badge类来创建气泡,示例如下:


 <p>进行气泡的创建</p>

 <a href="#">链接<span class="badge">3</span></a>

 <button class="btn btn-primary" type="button">

   按钮

   <span class="badge">4</span>

 </button>

image.png

目录
相关文章
|
前端开发 开发者
Bootstrap响应式前端框架笔记二十——工具条的应用
Bootstrap响应式前端框架笔记二十——工具条的应用
95 0
Bootstrap响应式前端框架笔记二十——工具条的应用
|
前端开发 JavaScript 人机交互
Bootstrap响应式前端框架笔记十九——标签页的使用
Bootstrap响应式前端框架笔记十九——标签页的使用
232 0
Bootstrap响应式前端框架笔记十九——标签页的使用
|
前端开发 JavaScript 开发者
Bootstrap响应式前端框架笔记十八——导航滚动监听
Bootstrap响应式前端框架笔记十八——导航滚动监听
188 0
Bootstrap响应式前端框架笔记十八——导航滚动监听
|
前端开发
Bootstrap响应式前端框架笔记十七——下拉列表交互
Bootstrap响应式前端框架笔记十七——下拉列表交互
125 0
|
前端开发 JavaScript 开发者
Bootstrap响应式前端框架笔记十六——模态框交互
Bootstrap响应式前端框架笔记十六——模态框交互
169 0
Bootstrap响应式前端框架笔记十六——模态框交互
|
前端开发
Bootstrap响应式前端框架笔记十五——面板与井
Bootstrap响应式前端框架笔记十五——面板与井
120 0
Bootstrap响应式前端框架笔记十五——面板与井
|
前端开发 数据安全/隐私保护
Bootstrap响应式前端框架笔记十三——警告框与进度条
Bootstrap响应式前端框架笔记十三——警告框与进度条
227 0
Bootstrap响应式前端框架笔记十三——警告框与进度条
|
前端开发 容器
Bootstrap响应式前端框架笔记十——导航栏相关组件(二)
Bootstrap响应式前端框架笔记十——导航栏相关组件
225 0
Bootstrap响应式前端框架笔记十——导航栏相关组件(二)
|
前端开发
Bootstrap响应式前端框架笔记十——导航栏相关组件(一)
Bootstrap响应式前端框架笔记十——导航栏相关组件
170 0
Bootstrap响应式前端框架笔记十——导航栏相关组件(一)
|
前端开发
Bootstrap响应式前端框架笔记九——输入框组
Bootstrap响应式前端框架笔记九——输入框组
278 0
Bootstrap响应式前端框架笔记九——输入框组
相关产品
云迁移中心
推荐文章
更多