[bootstrap] Bootstrap 이용하기 04 (170406)

 Bootstrap 이용하기 04

• bootstrap을 이용한 navigation bar

- jquery를 이용한 nav

** 출력 결과 **

- bootstrap을 이용한 nav

 - 훨씬 편리하게 tab을 만들 수 있다.

 - 탭의 클래스로 nav, nav-tabs 와 하위 a 요소에 data-toggle="tab" 을 준다.

 - contents에 tab-content 와 하위 div에  tab-pane를 주고 로딩 후 첫 화면에 띄울 요소인 id="one"인 div에 active를 준다. 

** 실행 결과 **

- bootstrap nav의 class속성

- nav-justified : nav의 li가 비율에 맞게 꽉차게 나타난다.

- nav-pills : 버튼 형태의 nav를 생성한다.

- nav-stacked : nav가 쌓이는 형태로 생성된다.

** 출력 결과 **

- navbar 이용하기

- navbar-default 로 기본 navbar를 이용할 수 있다.

- navbar-inverse 로 색상이 다른 navbar를 이용할 수 있다.

- 꽉 찬 width 100% navbar는 contain으로 감싸지 않으면 된다.

- navbar 내부의 버튼은 navbar-btn 클래스 적용을 하지 않으면 고르게 정렬되지 않는다.

- navbar-text는 텍스트가 잘 보이도록 설정해주고 pull-right, pull-left는 정렬해준다.

- navbar 내부 링크는 navbar-link를 이용한다.

- navbar 내부 form은 navbar-form을 이용한다. (float역할을 한다)

** 출력 결과 **

- navbar 이용하기2

- navbar-fixed-top : navbar를 상단 고정시킨다.

- navbar-fixed-bottom : navber를 하단 고정시킨다.

- navbar-brand : 링크있는 text를 기본값으로 꾸며준다. (밑줄, 파란 글씨 없애줌)

- xs에서만 하단 navbar 보이게 하기 : visible-xs-block

- navbar에 가리는 contents 보이게 하기 : css로 body에 padding-top 혹은 padding-bottom을 적용한다.

** 출력 결과 **

• Pagination

- 페이지 이동을 할 때 이용하는 UI이다.

- bootstrap의 pagination class를 이용하면 쉽게 만들 수 있다.

- active 클래스로 선택됬음을 보일 수 있다.

- 이전 화살표 : «     다음 화살표 : »

- 1페이지의 이전은 클릭되지 않으므로 이 때는 li에 disabled클래스를 이용하면 좋다.

- pagination의 크기는 pagination-xs, pagination-sm, pagination-lg로 조정할 수 있다. (md는 기본값이라 따로 적지 않는다)

- 심플한 이전, 다음 버튼은 pager class를 이용한다.

- pager를 이용할 때 양쪽 끝에 위치하게 하려면 previous, next class를 이용한다.

** 출력 결과 **