[Bootstrap] page

이번 page주제는 경로/항목에 관련된것과 페이지네이션에 대해 정리하고자한다.

breadcrumb

경로 항목을 /로 구분해서 나열하고싶을때 breadcrumb클래스를 사용한다.

Home / menu1 / menu2  이런식으로 링크문자열을 구분되게 나누고 싶을때 사용

<h4>경로(항목을 /로 구분해서 나열하고싶을때 breadcrumb클래스)</h4>
	<ol class="breadcrumb">
		<li><a href="#">Home</a></li>
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
	</ol>

---

페이지네이션

class="pagination"

pagination은 ul태그에 페이징 처리 스타일을 적용시켜주는 클래스 선택자를 부여한다.

pagination을 적용하면 다음과 같은 효과를 적용
.pagination {
		display: inline-block;
		padding-left: 0;
		margin: 20px 0;
		border-radius: 4px;
}
.pagination > li {
				display: inline;
  }
  
-------------------------------------------------
페이지네이션을 만드는데 이전페이지로 가는 항목은 << 으로 다음페이지는  >> 으로 만들고 
1번페이지가 선택되있게 만들려 한다면? (10페이지 이상은 없어서 클릭 안되게 적용)
  
<ul class="pagination">
		<li class="disabled"><a href="#"> << </a></li><!-- 이전페이지로 가라는걸 <<로 표시 -->
		<li class="active"><a href="#"> 1 </a></li> <!-- 클릭되었을을때 효과부여 active  -->
		<li><a href="#"> 2 </a></li>
		<li><a href="#"> 3 </a></li>
		<li><a href="#"> 4 </a></li>
		<li><a href="#"> 5 </a></li>
		<li><a href="#"> 6 </a></li>
		<li><a href="#"> 7 </a></li>
		<li><a href="#"> 8 </a></li>
		<li><a href="#"> 9 </a></li>
		<li><a href="#"> 10 </a></li>
		<li class="disabled"><a href="#"> >> </a></li><!-- 10페이지 이상 페이지가 안나오면 클릭 못하게 함(위에 이전페이지도 똑같이 적용) -->
	</ul>
</div>  

---

페이지네이션 크기조절

페이지네이션은 크기를 조절할수있는데 이때 사용하는것은 이미 많이해서 너무나 익숙한 lg,sm 이다.
-> class에 pagination-lg, pagination-sm 등 을 이용해서 크기 조절

기존 페이지네이션보다 크게 만들고 싶다면 class에 pagination-lg를 적용

<ul class="pagination pagination-lg"><!-- 기존 페이지네이션보다 크게 -->
	<li class="disabled"><a href="#"> << </a></li><!-- 이전페이지로 가라는걸 <<로 표시 --><!-- 1페이지이전은 없으니까 disabled 적용 -->
	<li class="active"><a href="#"> 1 </a></li> <!-- 클릭되었을을때 효과부여(현재페이지) active  -->
	<li><a href="#"> 2 </a></li>
	<li><a href="#"> 3 </a></li>
	<li><a href="#"> 4 </a></li>
	<li><a href="#"> 5 </a></li>
	<li><a href="#"> >> </a></li>
<ul>
-------------------------------------

반대로 기존 페이지네이션보다 작게 만들고 싶다면 class에 pagenation-sm을 적용

<ul class="pagination pagination-sm"><!-- 기존 페이지네이션보다 작게 -->
	<li><a href="#"> << </a></li>
	<li class="active"><a href="#"> 6 </a></li>
	<li><a href="#"> 7 </a></li>
	<li><a href="#"> 8 </a></li>
	<li><a href="#"> 9 </a></li>
	<li><a href="#"> 10 </a></li>
	<li class="disabled"><a href="#"> >> </a></li><!-- 10페이지 이상 페이지가 안나오면 클릭 못하게 함(위에 이전페이지도 똑같이 적용) -->
</ul>

---

페이지네이션 정렬

가운데 정렬, 양쪽끝 정렬

페이지네이션을 가운데 또는 양쪽끝으로 정렬할수있다.
이때 정렬 뿐만 아니라 디자인 효과도 적용된다.
(모서리가 둥글다)

ul 태그에 class="pager"를 주어서 가운데 정렬을 하고자 한다.

<h4>페이지 가운데 정렬(ul태그 class="pager")</h4>
		<ul class="pager"> <!-- 정렬뿐만 아니라 디자인도 효과준다  -->
			<li><a href="#">이전 페이지</a></li>
			<li><a href="#">다음 페이지</a></li>
		</ul>	
 -------------------------------------

여기서 가운데가 아닌 양쪽끝으로 정렬하고 싶다면 
class="previous"(왼쪽) 또는 next(오른쪽)을 적용한다.

<h4>페이지 양쪽끝 정렬</h4>
		<ul class="pager">
			<li class="previous disabled"><a href="#">이전 페이지</a></li>
			<li class="next"><a href="#">다음 페이지</a></li>
		</ul>	
		

---

2022-08-11