您现在的位置是:首页 > 教程 > pbootcms教程pbootcms教程
PbootCMS自定义分页样式的方法
又菱2023-06-11 22:49:46pbootcms教程已有人查阅
导读要自定义分页,首先要使用分页。根据PbootCMS官方文档,分页标签有两种:系统内置的完整分页条{page:bar}
要自定义分页,首先要使用分页。根据PbootCMS官方文档,分页标签有两种:系统内置的完整分页条{page:bar}
独立的分页元素标签,可自由搭配使用{page:current}、{page:count}、{page:rows}...等
我们先来看第一种:系统内置的完整分页条
代码如下:
而且,每个元素都已经拥有了自己的样式名称,例如:.page-status、.page-inde...等。
接下来只要写上对应的CSS进行美化就可以了。
例如:
怎么样?用PbootCMS作者的话来说:“是不是简单得想哭?”
如果有需求需要对分页条的内容进行自定义,那么看第二种:独立的分页元素标签
以本站的分页代码为例:
教程到此为止,剩下的就靠大家自由发挥了。
总结:还是以前所说的,PbootCMS的各种标签已经非常丰富,能不能做出好的东西,就看能不能熟悉标签,自由组合来达成各种需求。
独立的分页元素标签,可自由搭配使用{page:current}、{page:count}、{page:rows}...等
我们先来看第一种:系统内置的完整分页条
代码如下:
<div class="paging">{page:bar}</div>
可以看到,一个完整的分页条就出来了。而且,每个元素都已经拥有了自己的样式名称,例如:.page-status、.page-inde...等。
接下来只要写上对应的CSS进行美化就可以了。
例如:
/* 分页样式 */
.paging { margin-top: 32px; font-size: 14px; }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }
一个简单的分页样式就完成了:怎么样?用PbootCMS作者的话来说:“是不是简单得想哭?”
如果有需求需要对分页条的内容进行自定义,那么看第二种:独立的分页元素标签
以本站的分页代码为例:
//通过{page:count}来判断当前列表的分页数量,如果超过1页则显示分页条
{pboot:if('{page:count}' > 0)}
//分页容器
<div class="uk-text-center frontier-paging">
<ul class="uk-clearfix">
//{page:index}以及{page:pre}指定首页和上一页的链接地址,并且可以在a标签中自由设置首页或者上一页的文字
<a class="first" href="{page:index}"><i class="fa fa-angle-double-left"></i></a>
<a class="uk-visible@s prev" href="{page:pre}"><i class="fa fa-angle-left"></i></a>
//分页条
{page:numbar}
//同首页和上一页,这里是尾页和下一页
<a class="uk-visible@s next" href="{page:next}"><i class="fa fa-angle-right"></i></a>
<a class="last" href="{page:last}"><i class="fa fa-angle-double-right"></i></a>
</ul>
</div>
{/pboot:if}
添加样式美化:
/* 分页样式 */
.frontier-paging { margin-top: 32px; }
.frontier-paging ul { display: inline-block; vertical-align: bottom; }
.frontier-paging ul span,
.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }
.frontier-paging ul a.page-num-current,
.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }
效果图:(由于演示站没有加载字体图标,箭头就用普通的括号来表示了)教程到此为止,剩下的就靠大家自由发挥了。
总结:还是以前所说的,PbootCMS的各种标签已经非常丰富,能不能做出好的东西,就看能不能熟悉标签,自由组合来达成各种需求。
本文标签:
很赞哦! ()
相关文章
- pbootcms提示提交失败请使用POST方式提交的解决方法
- pbootcms文章列表序号的填写方法
- pbootcms授权中文域名出错的解决方法
- pbootcms模板修改tags实现keywords内容关联匹配的代码实例
- pbootcms文章列表没有缩略图时不显示默认图片的实现方法
- pbootcms制作ajax无刷新加载列表内容的实现方法
- Pbootcms字段为空调用另一个字段标签的写法
- pbootcms提示程序运行异常: syntax error, unexpected '的解决方法
- pbootcms帐号格式不正确,请输入正确的邮箱帐号!解决方法
- pbootcms通过layui上传实现留言文件上传功能的代码实例
- pbootcms模板添加栏目提示该内容栏目编号已经存在,不能再使用
- pbootcms提示URL名称与模型URL名称冲突,请换一个名称!
随机图文
-
pbootcms二开修改网站标题显示方式怎么去掉副标题
使用pbootcms模板时发现标题这块逻辑不太符合常用的效果,默认的是后台有站点标题和副标题,在前台的展示方式是: -
PbootCMS指定栏目标签和控制参数介绍
适用范围:全站任意地方均可使用;标签作用:用于调导航菜单栏目列表,对应后台的“基础内容>内容栏目” -
pbootcms模板利用宝塔面板计划任务自动推送网址到百度的方法
在站点根目录新建一个PHP文件,例如:bAIdu.php,并复制下方代码添加带baidu.php文件中。 注意:两处需要修改的博主都已经在末尾添加了注释,记得修改为自己的,然后保存。 -
pbootcms调用公司简介等单页内容的代码实例
相关参数: id=1 这里的1对应的专题内容里的编号 len=300 300是对应的字符数
留言与评论 (共有 条评论) |