PbootCms自定义分页如何制作
作者:80网站模板发布时间:2021-02-28浏览量:76
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等

内置分页效果

PbootCms自定义分页如何制作?要自定义分页,首先要使用分页。

根据PbootCMS官方文档,分页标签有两种:

系统内置的完整分页条

{@page:bar}

独立的分页元素标签,可自由搭配使用

{@page:current}、{@page:count}、{@page:rows}...等

我们先来看第一种:系统内置的完整分页条

代码如下:

<div class="paging">{@page:bar}</div>

可以看到,一个完整的分页条就出来了。

pbootcms建站

而且,每个元素都已经拥有了自己的样式名称,例如:.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网站模板


怎么样?用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教程    分页制作   
关 键  词:pbootcms网站模板下载,pbootcms分页制作,pbootcms使用教程
本文网址:http://www.80oo.cn/jiaocheng/151.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
09-27
织梦cms要花钱授权了,如何转到别的建站程序?其实现在免费的cms有很多,比如易优cms、mipcms、pbootcms等,我们今天介绍一下为了方便把织梦模板转换成PB模板而生的工具,大大方便的操作过程,不过对于复杂的模板效果不太好。工具是死的,人是活的,工具+手动调整=高效解决,工具作者:晨星傲月。具体工具使用在下载包里已经
2021
08-20
现在的论坛有很多,但是找出几个权重比较高的论坛确实很费事,所以说大家要抽空点时间去选择一些高权重的论坛,SEO马龙认为注册个账号,要把自己的个人信息填写好,不要盲目的去发广告,很容易被论坛的BT斑竹给你K掉的,如何做好网站优化内外链建设?从目前来看外链的选择主要有以下几点:1、bbs类:千万别为了一个广告而浪
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
服务热线