#3-Bootstrap 레이아웃 및 컴포넌트 사용

레이아웃 시작하기

1줄에는 12개의 컬럼이 있다는 것이 부트스트랩의 규칙이다. 

 

기본 구조

1. container로 가로 한줄을 묶어준다.
2. 하위에 "col-화면사이즈-숫자" 형태의 class를 가진 요소를 넣는다. 
   1. col은 colmn을 의미한다.
   2. sm은 화면 사이즈를 정의한다.
      1. xs : 768px보다 작을때
      2. sm : 768px보다 클때
      3. md : 970px보다 클때
      4. lg :  1170px보다 클때
   3. 숫자는 몇개의 컬럼을 포함할 것인지를 선언하는 것이다.
      1. 1줄에 컬럼이 12개가 들어가기 때문에 숫자의 합이 12가 되어야 한다.

컬럼3개 예시

<div class="container">
       <div class="col-sm-4">첫번째</div>
       <div class="col-sm-4">두번째</div>
       <div class="col-sm-4">세번째</div>
</div>

컬럼12개 예시

<div class="container">
       <div class="col-sm-1">1</div>
       <div class="col-sm-1">2</div>
       <div class="col-sm-1">3</div>
       <div class="col-sm-1">4</div>
       <div class="col-sm-1">5</div>
       <div class="col-sm-1">6</div>
       <div class="col-sm-1">7</div>
       <div class="col-sm-1">8</div>
       <div class="col-sm-1">9</div>
       <div class="col-sm-1">10</div>
       <div class="col-sm-1">11</div>
       <div class="col-sm-1">12</div>
</div>

해상도 사이즈 별 컬럼 설정 예시

<div class="container">
       <div class="col-sm-6 col-md-3">1</div>
       <div class="col-sm-6 col-md-3">2</div>
       <div class="col-sm-6 col-md-3">3</div>
       <div class="col-sm-6 col-md-3">4</div>
</div>

 

그 외 컴포넌트 사용하기

아래 사이트에서 컴포넌트 사용방법 숙지 후 사용하면 된다. 부트스트랩을 설치한 환경이라면, 아래 코드를 사용했을 경우 버튼이 노출 될 것이다.

 

버튼 사용 예시

<div class="btn-group" role="group" aria-label="...">
  <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>

 

 

컴포넌트 사용 예시

http://bootstrapk.com/components/

콤포넌트 · 부트스트랩