PbootCMS使用技巧教程(二) - 自定义分页样式
PbootCMS使用技巧教程(二) - 自定义分页的样式。
DistantMemory
DistantMemory
要自界定多页,先要要利用多页。不同PbootCMS关方pdf文件,多页商品标签有不同:程序內置的系统分页查询条
{*page:bar*}


自立的自动分页物质那些固化的标签,可任意套装搭配用到
{page:current}、{page:count}、{page:rows}...等


大发快3先來看首先种:模式原带的完整详细分页查询条码如下所示:
<div class="paging">{*page:bar*}</div>



可不可以看,个详细的分页查询条就起好了。

001.png

且,没个的元素都就拥用了自已的式样品牌,比如说:.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; }


同一个简洁明了的分栏种类就成功完成了:

002.jpg


应该如何样?用PbootCMS小说作家时来:“也不是是比较简单得难过?”


比如有需求分析必须要 对分栏条的项目确定自定位,那么的看其次种:独特的分栏成分商品标签以美国法律保护的自动分页源代码概述:
//通过{*page:count*}来判断当前列表的分页数量,如果超过1页则显示分页条
{pboot:if('{*page:count*}' > 0)}

//分页容器
<div class="uk-text-center frontier-paging">
    <ul class="uk-clearfix">
    
        //{*page:index*}以及{*page:pre*}指定大发快3和上一页的链接地址,并且可以在a标签中自由设置大发快3或者上一页的文字
        <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*}
        
        //同大发快3和上一页,这里是尾页和下一页
        <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; }



疗效图:(犹豫标准站不会有启动字体大小图标图片,上箭头就用普普通通的<>来标识了)

003.jpg


入门教程到此就要,用不完的就靠同学们自卫权充分调动了。


总结:还是以前所说的,PbootCMS的各种标签已经非常丰富,能不能做出好的东西,就看能不能熟悉标签,自由组合来达成各种需求。