Bootstrap分页使用方法
来源:互联网 发布:淘宝网络推广公司排名 编辑:程序博客网 时间:2024/05/22 03:09
默认Bootstrap分页样式
这是默认的Bootstrap分页组件样式,效果简洁直观,如果想要符合自己的项目需求,可以将高亮颜色改为自己想要的颜色,其他样式直接引用即可,编写代码如下:<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
当前页面选项高亮与禁用状态
通过引入disabled样式与active样式,可以将当前你的页面选项高亮,并且禁用已经无法翻页的标签,效果很不错:<ul class="pagination">
<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>
分页组件尺寸设置
和按钮元素调用一样,分页组件也同样可以通过样式引用来设定大小,用起来也非常简单:<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
以上样式由大到小进行显示。
Bootstrap翻页组件
如果你需要在文章中调用上一篇下一篇的功能,那么可以直接采用这个翻页组件即可。
这个组件的引用也非常容易,按照以下代码进行引用:<ul class="pager">
<li class="previous"><a href="#">上一篇</a></li>
<li class="next"><a href="#">下一篇</a></li>
</ul>
同样,如果想要调用禁用样式,直接引入disabled样式即可:<ul class="pager">
<li class="previous disabled"><a href="#">上一篇</a></li>
<li class="next"><a href="#">下一篇</a></li>
</ul>
- Bootstrap分页使用方法
- 页面分页插件 Bootstrap Paginator使用方法
- Bootstrap分页插件--Bootstrap Paginator---使用方法 -3三个属性(type, page, current))
- bootstrap分页
- bootstrap分页
- Bootstrap 分页
- bootstrap分页
- Bootstrap 分页
- bootstrap-分页
- bootstrap 分页
- bootstrap分页
- BootStrap 分页
- bootstrap分页
- Bootstrap分页
- bootstrap 分页
- Node.js中Bootstrap-table的两种分页的使用方法
- Bootstrap分页插件--Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- JSON - 入门
- Hadoop2.7 安装
- php基础之连接mysql数据库和查询数据
- 类型操作符重载
- Bootstrap分页使用方法
- SpringMVC事务配置问题
- 2017.01.16
- deeplearning—book—整理——ml
- Java反射机制根据实体生成SQL
- 113---字符串与HTML标记相互转换
- 多项式输出
- callback 回调函数
- USB键盘无法识别解决方法