[bootstrap] Bootstrap 이용하기 06 (170407)

Bootstrap 이용하기 06

• tooltip 이용하기

- tooltip은 팁이나 설명할 때 이용하기 좋다.

- script로 띄우는 방향(placement), animation, 띄우는 시점(trigger)을 설정할 수 있다.

- 해당 버튼의 속성값 data-placement로 띄우는 방향 설정이 가능하다.

- tooltip("show"), tooltip("hide")로 trigger:"manual"(특정시점에 띄우기)의 설정을 해줄 수 있다.

** 출력 결과 **

• popover 이용하기

- tooltip보다 좀 더 많은 내용을 기록 가능

- data-title="제목" data-content="내용" data-toggle="popover"

** 출력 결과 **

• Carousel 이용하기
  

- carousel은 회전목마라는 뜻이다.

- 이미지 배너 여러개를 넣을 때 주로 사용한다.

- id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000" 를 입력해야한다.

- class="carousel-indicators" : 몇 번째 그림인지 알려주는 동그라미 표시를 생성해준다.

- data-target="#myCarousel" data-slide-to="0" : data-target을 표시할 요소가 필요하다. data-slide-to는 몇 번째 컨텐츠인지 표시하는 역할을 한다.

** 출력 결과 **

• collapse 이용하기

- 접었다 폈다 할 수 있도록 해주는 기능

- panel-group클래스 속에 panel 클래스를 준다.  그리고 그 내부에 panel-heading 클래스와 panel-collapse(접힐 부분)클래스를 준다.

- panel-collapse 의 자식 div에는 panel-body클래스를 준다.

- 페이지 로딩 후 펼쳐져 있을 panel-body에는 상위 div에 in클래스를 적용시키면 된다. ( 다른 panel을 펼치면 in이 옮겨간다 )

** 출력 결과 **

• button group 이용하기
  

- btn-group클래스를 이용하여 여러 개의 버튼이 묶여있도록 만들 수 있다.

- btn-group클래스 적용후 자식 클래스를 btn으로 준다. 

- input type은 다중 선택은 checkbox, 단일 선택은 radio로 해준다.

** 출력 결과 **

• affix 이용하기 

- 일정 높이에서부터 따라오다가 일정 하단 높이에서 멈추는 div를 이용하려면 affix 기능을 이용한다.

- affix 클래스의 css는 고정될 때 상단에서 얼만큼 떨어질 것인지 top을 준다.

- affix-bottom을 absolute로 준다. (????)

- fix될 이미지를 감싸는 div에 data-spy="affix" data-offset-top="500" data-offset-bottom="300"를 준다. (숫자는 치수)

** 출력 결과 **

• modal 이용하기

- 버튼에 id값을 주고 modal창으로 할 div에 modal클래스를 준다.

- fade값은 위에서 슬라이드가 떨어지는 animation 효과를 준다.

- javascript 로 만들 경우 : backdrop - 뒤에 덮어주는 회색 배경

show:false - javascript가 실행될 때 modal 안뜨도록

- data속성으로 만들 경우 : data-toggle="moda", data-target="#myModal"을 넣어준다.

** 출력 결과 **

• scrollspy 이용하기

- scroll을 감시할 요소의 position 속성의 value를 relative라고 지정한다

- 전체스크롤의 경우 body에 position을 지정하고 부분일 경우 해당 부분에 지정해준다.

- 스크롤을 감시할 요소에 data- 속성을 추가한다.

- nav클래스는 decoration:none 등 좀 더 보기좋게 만들어 줌. 기능과는 상관 없다.

** 출력 결과 **

- 부분 scrollspy 이용하기

- 스크롤이 필요한 box에 overflow-y:scroll;을 준다.

- position:relative로 지정해줘야한다.

- box클래스가 적용된 곳에 data-offset="0" data-spy="scroll" data-target="#navbar-example"을 추가한다.

- data-target값은 ul의 부모div에 줘야한다.

** 출력 결과 **

• holder.js 이용하기

- 사이즈별 dummy 이미지를 이용할 수 있다.

- http://holderjs.com/ 홈페이지를 참조한다.

** 출력 결과 **

• display:inline 과 float:left의 차이점

• display:inline   

- span이나 마찬가지이다.

- 폭과 높이를 갖지 않는다.

- width x height = auto x auto

** 출력 결과 **

• display:inline-block

- 폭과 높이를 갖는다.

- inline처럼 한 줄에 정렬된다.

- 개행기호(enter키)까지 해석된다

** 출력 결과 **

• float:left

- p영역이 박스의 범위를 침범하지 않으면서 함께 정렬된다.

- box의 크기를 따로 지정하지 않을 경우 컨텐츠의 최소 width x height를 갖는다. (display:inline의 경우 auto x auto이기 때문에 float을 더 사용하는 경우가 많다)

** 출력 결과 **

box가 자동으로 최소한의 width와 height를 갖은 것을 볼 수 있다.

- p를 한 줄에 나타내고 싶지 않을 때는 clear속성을 이용한다.

** 출력 결과 **