Bootstrap 사용방법

  BootStrap

http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

디자인, 사용방법 등 예로 나타나 있음. 위에 링크에서 필요할때마다 참고해서 쓴다.

 

  그리드 시스템

▶사용방법

1) .container-fluid 혹은 .container 상위 테그에 클래스를 지정한다.  
2) 그 하위로 .row 클래스를 지정한다.(clear css 속성 동일 - float 해제) 
3) 그리드 시스템 클래스 지정 
  - 그리드 시스템의 클래스 처음 시작은 .col 클래스로 시작된다. 
  - 디바이스 크기를 지정하는 접두사가 붙는다. 
    예) .col-xs-*, .col-sm-*, .col-md-*, .col-lg* 
 - 디바이스 크기 접두사 뒤에 열정렬 숫자(12열)을 나열한다.  
    예) .col-xs-12, .col-sm-6, .col-md-6, .col-lg6 
4) row 클래스는 1행 기준점 마다 지정해야 한다. 
5) 디바이스 크기를 지정하는 접두사  
  - xs : 최소 사이즈 모바일 
  - sm : 탭 사이즈  
  - md : 데스크탑 중간  
  - lg : 데스크탑 최대 
6) 그리드 시스템 클래스는 디바이스 크기 별로 중복 적용 가능하다. 
 예) (1개의 테그에 클래스를 여러개 적용 가능하다.) class="col-ls-6 col-md-4 col-xs-12"
위의 예 설명 : lg 크기 일 때 6열로 정렬, md 크기 일 때 4열로 정렬, xs 크기 일 때는12열로 정렬한다.

 

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

 

▶ 크기를 알리는 클래스 접두사

대략적으로 크기를 지정할 수 있는 클래스옵션이 있으며, 대표 클래스 다음 클래스-* 형태로 클래스를
지정하여 크기를 조절 할 수 있다.  (예) btn bnt-lg

크기의 종류 : 대표 클래스 - xs < 대표 클래스 - sm < 대표 클래스 - md < 대표 클래스 - lg

 

▶ 색상을 표기하는 클래스 접두사

색상을 표기할 때 '대표클래스-*' 형태로 사용이 가능하며 총 6가지의 옵션이 있다.
대략적으로 테마별 옵션의 다음 6가지 옵션을 지정하여 쓰도록 하고 있다.
default , success, danger, primary, warning, info