呆错后台管理框架前台分页样式表通用CSS代码实例

2022-06-03 23:02:32 开发文档

HTML代码标签

{gt name="items.last_page" value="1"}
<div class="w-100 mb-2"></div>
<div class="border bg-white rounded pagesmall py-2 mb-2 d-md-none">{:DcPageSimple($items['current_page'], $items['last_page'], $pagePath)}</div>
<div class="border bg-white rounded page py-2 mb-2 d-none d-md-block">{:DcPage($items['current_page'], $items['per_page'], $items['total'], $pagePath)}</div>
{/gt}

CSS代码

/*分页*/

.page{

padding-left: 15px; 
padding-right: 15px;

}
.pagination{

width: 100%;
margin: 0 auto;
display: flex!important;
justify-content: center!important;
font-size: 1.0rem;
margin-bottom: 0;

}
.pagination .page-item{

margin:auto 0.35rem;

}
.pagination .page-item .page-link{

color: #fff;
border-color: #6f42c1;
background-color: #7952b3;
border-radius: .25rem;

}
.pagination .page-item .page-link:hover{

color: #eee;
border-color: #6f42c1;
background-color: #7952b3;

}
.pagination .page-item.disabled{
}
.pagination .page-item.disabled .page-link{
}
.pagination .page-item.active{
}
.pagination .page-item.active .page-link{

color: #eee;
border-color: #6f42c1;
background-color: #563d7c;

}
.pagination .page-item:first-child .page-link {
}
.pagination .page-item:last-child .page-link {
}
/SMALL/
.pagesmall{

padding-left: 15px; 
padding-right: 15px;

}
.pagesmall .pagination{

width: 100%;
margin: 0 auto;
display: flex!important;
justify-content: space-between!important;

}

42

作者:admin

链接:https://demo.daicuo.cc/cms/detail/index?id=675

来源:呆错框架演示

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

上一篇:呆错支付插件开发过程中测试写入订单的实例

下一篇:呆错后台管理框架后台菜单列表如何扩展?