thinkphp/laravel框架bootstrap分页样式
thinkphp框架和laravel框架都是国内知名的、使用量超大的框架,在每个网站应用中都会涉及到列表页面,但是在实际开发过程中,我们会遇到页面展示的分页没有css样式,表现的非常的丑。下面分享出一套css样式,可以展现出较好看的样式效果。
样式如下:
#page { background-color: #FFF; text-align: center; height: 75px; display: block; } #page .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } #page .pagination > li { display: inline; } #page .pagination li.disabled, #page .pagination li.active { cursor: not-allowed; } #page .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } #page .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #616161; text-decoration: none; background-color: #fff; border: 1px solid #d0d0d0; } #page .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } #page .pagination li.active span { background-color: #009688; color: #FFF; }