[Bootstarp] 부트스트랩 개념 정리

Bootstarp

1. 웹사이트 개발을 위한 free front-end framework다.
2. 빠르게, 쉽게 웹사이트를 개발할 수 있다.
3. html과 css를 기반으로 다양하게 디자인된 폼, 버튼, 테이블, 내비게이션, 모달창 이미지 슬라이드 등을 지원한다.
4. 반응형 웹페이지를 쉽게 개발할 수 있다.

부트스트랩 페이지의 구성

• 디바이스에 맞게 적절한 렌더링과 확대/축소가 지원되도록 하기 위한 설정

  <meta name="viewport" content="width=device-width, initial-scale=1"> min이 있으면 운용버전, 없으면 개발버전

• 부트스트랩 CSS 스타일 파일링크

• 부트스트랩은 웹 컨텐츠를 감싸는 div요소가 필요하다.

  <div class="container"> ... </div>

부트스트랩의 그리드 시스템

• 뷰포트의 크기를 12열로 나누고 디바이스의 크기에 따라서 각 열의 크기가 적절하게 대응되는 유동적인 그리드 시스템을 지원한다.
• 미리 정해진 클래스(.row, .col-xx-xx)를 이용해서 화면의 레이아웃을 쉽게 구성할 수 있다.
• 그리드 시스템의 규칙

  1. 반드시 .container나 .container-fluid 안에 위치해야 한다.

  2. .row는 행을 만든다.

  3. .col-xx-xx는 열을 만든다

  4. 행의 바로 밑에는 열만 위치할 수 있다.

  5. 그리드의 열은 12개의 열들을 원하는 형태로 구성할 수 있다.

     [1,1,1,1,1,1,1,1,1,1,1,1], [6,6] [2,8.2] [3,3,3,3]

  6. 한 행의 열이 12개를 넘어가면 남은 열든은 자동으로 새로운 행을 감싸진다.

  7. 그리드 클래스

     .row : 행을 만든다.(수직그룹을 만든다) (tr)

     .col : 열을 만든다.(수평그룹을 만든다) (td)

     .col-xs-xx : 스마트폰 용 폭 < 768px .col-sm-ss : 태블릿 용 폭 >= 768px .col-md-xx : 노트북 용 폭 >= 992px .col-lg-xx : 데스크탑 용 폭 >= 1200px
     • 그리드의 클래스는 분기점 크기보다 크거나 같은 너비의 화면을 가진 기기에 적용된다.