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

Bootstrap 이용하기 03

• HelperClass 이용하기

- 글자의 색상 지정(text-muted, text-primary, text-success, text-info, text-warning, text-danger)

- 배경 색상 지정(bg-primary, bg-success, bg-info, bg-warning, bg-danger)

- 닫는 아이콘(close)

- float에 관련된 class(pull-left, pull-right, clearfix)

- 가운데 블록 시키기(center-block)

** 출력 결과 **

• Code 관련 요소 이용하기

- <code>, <kbd>, <var> 이용이 가능하다.

** 출력 결과 **

• FontAwesome 이용하기

- http://fontawesome.io/get-started/ 에 접속하여 다운로드받는다.

- 압축을 푼 뒤 css폴더와 font폴더 안의 파일들을 각각의 폴더에 넣는다.

- 경로에 맞춰 css를 로딩한다. (<link rel="stylesheet" href="css/font-awesome.min.css"/>)

- class에 fa fa-xxx 형식으로 사용한다. (홈페이지에서 더욱 상세히 알 수 있다)

- fa-rotate-180 은 폰트를 180도 회전시킨다.

** 출력 결과 **

• Dropdown 이용하기
  

- dropdown-toggle, dropdown-menu, dropdown-header, divider를 이용하여 dropdown을 생성한다.

- dropdown-menu는 ul 클래스에, data-toggle="dropdown" class="dropdown-toggle"은 이를 품고있는 button에 입력한다.

- <span class="caret"></span> 는 조그만 삼각형을 보여준다.

- 이 삼각형은 css로 아래와 같이 생성할 수 있다.

** 출력 결과 **

1.  li 속 a링크가 없는 상태

2. a 링크가 추가된 상태

3. dropdown-header와 devider가 추가된 상태

• Typography 이용하기

- small 요소

- lead 요소

- 글자 정렬 요소 (text-left, text-center, text-right, text-justify)

- 대소문자 변환 요소 (text-lowercase, text-uppercase, text-capitalize)

- blockquote 요소(blockquote-reverse)

** 출력 결과 **

• alert 이용하기

- 닫기버튼을 이용할 때 alert-dismissable을 이용하면 쉽게 닫기를 할 수 있다.

** 출력 결과 **