부트스트랩 페이징 색상 변경 방법 정보
부트스트랩 페이징 색상 변경 방법본문
기본
변경 (회색)
변경 (블랙)
--------------------------------회색버전----------------------------
<style>
.page-link {
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
.page-item.active .page-link {
z-index: 1;
color: #555;
font-weight:bold;
background-color: #f1f1f1;
border-color: #ccc;
}
.page-link:focus, .page-link:hover {
color: #000;
background-color: #fafafa;
border-color: #ccc;
}
</style>
--------------------------------블랙버전----------------------------
<style>
.page-link {
color: #999;
background-color: #000;
border-color: #444;
}
.page-item.active .page-link {
z-index: 1;
color: #ccc;
font-weight:bold;
background-color: #333;
border-color: #444;
}
.page-link:focus, .page-link:hover {
color: #ccc;
background-color: #222;
border-color: #444;
}
</style>
입맛에 맞게 원하시는 색상으로 변경해서 사용하시고
전체 게시판에 지정하시려면 위 스타일을 테마 기본 css 에 적용하세요.
아니면 각 게시판에 적용하시면 될거 같습니다.
--추가팁--
<?php if($write_pages) { ?>
<div class="d-flex justify-content-end pagination mb-4">
<?php echo $write_pages; ?>
...........
left (왼쪽)
center (중간)
end (오른쪽)
pagination (보통)
pagination-lg (크게)
pagination-sm (작게)
border-radius 등등으로 버튼 디자인을 꾸밀수 있는데 이전, 다음 버튼이 추가 수정이 필요한 듯합니다.
초보인 저는 딱 여기까지만..
5
댓글 8개
저는
.pg_wrap {clear:both;text-align:center;padding-top:5px;margin-bottom:-35px;border-top-style:solid}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg {font-weight:bold;text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eeeeee11;border:1px solid #eeeeee11}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:5px}
.pg_page:hover {background-color:#fafafa}
.pg_start {border:1px solid #eee}
.pg_prev {border:1px solid #eee}
.pg_end {border:1px solid #eee}
.pg_next {border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}
.pg_current {display:inline-block;background:#eeeeee11;border:1px solid #3a8afd11;color:#f00;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:5px}
이렇게 사용합니다.
전문 퍼블리셔들을 보면 존경스러워요. 완전 노가다 작업이라는 생각이...