[bootstrap] Bootstrap 이용하기 02 (170405)

 Bootstrap 이용하기 02 

• Button 이용하기

- 색상별로 default, primary, success, info, warning, danger이 있다.

- 크기별로 btn-xs, btn-sm, btn-lg 가 있다.

- btn-block을 이용해 100% 크기의 버튼을 이용할 수 있다.

- Anchor 요소에 class를 줘서 버튼 스타일로 이용이 가능하다.

- disabled class로 버튼 사용을 막을 수 있다.

- anchor요소는 disabled와 동시에 href에 "javascript:"를 줘야 새로고침을 막는다.

** 출력 결과 **

• Form 이용하기

- form-group 속 input클래스로 form-control이 와야한다.

- form을 가운데 정렬하거나 크기 조정을 하려면 form밖에 row설정 후 그 안에 col설정을 해준다.

** 출력 결과 **

- inline-form을 이용하면 label과 input을 나란히 둔다.

- form-horizontal을 이용하면 수평이동된 form을 이용할 수 있다.

** 출력 결과 **

• Responsive Util 이용하기
  

- hidden-xs, hidden-sm, hidden-md, hidden-lg : 특정 영역에서 숨겨진다.

- visible-*-inline, visible-*-block, visible-*-inline-block : 특정 영역에서 보여진다.

** 출력 결과 **

•  clearfix 이용하기

 - 아래와 같이 xs-6으로 칼럼을 줄 때, 출력 결과는 아래와 같이 나타난다.

이 때, content2의 높이를 고려해여 배치되었으면 한다면 div를 중간에 만들고 clearfix 클래스를 적용한다.

** 출력 결과 **

• Table 클래스 이용하기

- 일반 table에 class로 "table"을 추가하면 정돈된 테이블을 만들 수 있다.

- 클래스에는 table-hover, table-bordered, table-striped, table-condensed(행의 높이가 줄어든다)가 있다.

- 칼럼의 폭 조정은 colgroup을 두고 칼럼을 주면 된다.

- 정렬을 하기 위해선 div로 감싸고 칼럼을 주면 된다.

** 출력 결과 **

• 이미지 관련 클래스 이용하기

- img-responsive 로 column이 적용되도록 할 수 있다.

- img-rounded, img-circle, img-thumnail를 이용할 수 있다.

** 출력 결과 **

• Glyphicon 이용하기

- glyphicon을 이용하기 위해선 클래스를 알아야 한다.

- http://getbootstrap.com/components/ 를 참고한다.

** 출력 결과 **