반응형
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/ 를 참고한다.
** 출력 결과 **
반응형
'WEB기초 > Bootstrap' 카테고리의 다른 글
[bootstrap] Bootstrap 이용하기 06 (170407) (0) | 2017.04.07 |
---|---|
[bootstrap] Bootstrap 이용하기 05 (170406) (0) | 2017.04.06 |
[bootstrap] Bootstrap 이용하기 04 (170406) (0) | 2017.04.06 |
[bootstrap] Bootstrap 이용하기 03 (170405) (0) | 2017.04.05 |
[bootstrap] Bootstrap 이용하기 01 (170404) (0) | 2017.04.04 |
댓글