呆错后台管理框架前台分页样式表通用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;
}