Bootstrap 3.3.7 | Bootstrap 기본 | Bootstrap의 구성

Bootstrap의 구성

Bootstrap은 사용방법에 따라 크게 3가지로 구분이 가능하다.

  • CSS stylesheet
  • Reusable component
  • Javascript component

CSS stylesheet

HTML 자체의 기능을 확장하고 강화할 수 있게 해주는 css들입니다. Bootstrap의 UI 요소중 가장 간단하게 사용할 수 있는 방법으로 Boostrap의 css에 정의된 class들을 tag에 적용하여 사용하는 방법이다.

예를들어 간단한 버튼을 만들기 위해서는 일일이 마우스 이벤트들을 처리해줘야하지만 이미 Bootstrap에 정의된 버튼 css를 사용하면 간단하게 버튼을 생성할 수 있다.

<a class="btn btn-primary" >link with bootstrap</a>

<a >link without bootstrap</a>

확인하기

아래는 Bootstrap에서 제공하는 CSS들을 기능별로 구분해 놓은 목록입니다. 각 카테고리 별로 자세한 내용은 링크를 통해 확인할 수 있다.

Reusable component

HTML만으로는 표현할 수 없었던 화면 구성 요소들을 Bootstrap에서 css와 javascript의 조합을 통해 다양하게 제공한다.
버튼 묶음을 예로 들자면 HTML에서는 버튼을 단순하게 나열하는 것만으로 표시할 수 밖에 없었지만 Bootstrap을 통하면 시작적으로나 기능적으로 묶음으로서의 동작을 구현할 수 있다.

이런 Bootstrap 컴포넌트들을 사용할 때는 단순하게 tag안 class 입력만으로 가능하다.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

확인하기

Bootstrap에서 제공되는 Reusable component는 아래와 같다.

  • Glyphicons : 아이콘 컴포넌트
  • Dropdowns : 드랍다운 형태를 만들어주는 컨테이너 컴포넌트
  • Button groups : 버튼 그룹 컴포넌트
  • Button dropdowns : 버튼 액션에 드랍다운이 추가된 컴포넌트
  • Input groups : 입력폼 묶음 컴포넌트
  • Navs : 탭/버튼 형태의 각종 네비게이션 버튼 묵음 컴포넌트
  • Navbar : 네비게이션 메뉴바 컴포넌트
  • Breadcrumbs : 페이지 이동 경로 표시 컴포넌트
  • Pagination : 페이징 컴포넌트
  • Labels : 레이블/태그 컴포넌트
  • Badges : 알람등에 사용되는 뱃지 컴포넌트
  • Jumbotron : 타이틀 화면 구성용 컴포넌트
  • Page header : 페이지 상단 구성용 컴포넌트
  • Thumbnails : 썸네일 컴포넌트
  • Alerts : 알림 표시를 위한 컴포넌트
  • Progress bars : 프로그레스바 컴포넌트
  • Media object : 다양한 종류의 자료를 목록형태로 표시하기 위한 컴포넌트
  • List group : 목록 표 컴포넌트
  • Panels : 제목틀을 가진 패널 컴포넌트
  • Responsive embed : embed로 삽입된 객체의 반응형 처리를 위한 컴포넌트
  • Wells : 인용문구 표시 컴포넌트

Javascript component

jQuery를 이용하여 보다 다양한 Bootstrap의 기능들을 사용할 수 있다.

  • Transitions : 전환 효과 플러그인
  • Modal : 모달 팝업 플러그인
  • Dropdown : 드랍다운 메뉴 플러그인
  • Scrollspy : 스크롤 스파이 플러그인
  • Tab : 탭 메뉴 플러그인
  • Tooltip : 툴팁 플러그인
  • Popover : 풍선 도움말 플러그인
  • Alert : 알람 메세지 플러그인
  • Button : 버튼전환 플러그인
  • Collapse : 아코디언 패널 플러그인
  • Carousel : 슬라이드 화면 플러그인
  • Affix : 스크롤 고정하게 해주는 플러그인

Customize Bootstrap

모든 웹페이지들이 Bootstrap의 모든 기능을 필요로 하지는 않기 때문에 필요한 기능만을 담은 Bootstrap file을 생성하는 기능을 제공한다.
불필요한 기능들을 로딩하는 부하를 줄이기 위해서 제공되는 서비스이다. 이외에도 각종 옵션들을 자신의 의도에 맞게 수정가능합니다. 색상, 폰트, 각종 사이즈 등등.