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

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;
}