Bootstrap 3 + Less

Bootstrap 3

Bootstrap 3 공식사이트: http://getbootstrap.com/
jQuery 공식 사이트: https://jquery.com/
Less 컴파일러: https://prepros.io/

다운로드 및 구성:
1. Text editor 준비 (Sublime Text 3 사용)
2. Bootstrap 다운로드 (Bootstrap v.3.3.6 사용
    http://getbootstrap.com/getting-started/
    3가지 버젼중 Source code 로 다운로드 (Less 사용) 
    압축 풀고 dist와 less폴더안에 내용을 복사한 후
    내 프로젝트에 붙여넣기

3. jQuery 다운로드 (jQuery v.1.12.4 사용)
    Download the compressed, production jQuery 1.12.4
    오른쪽 버튼 -> save as link -> 위치: Boostrap 안에 js에 저장

4.Less 컴파일러 설치 (Prepos App 5.10.2 사용)
    설치 후 프로젝트 폴더를 끌어다 놓기하면 설정 완료
    수정후 저장하면 자동으로 커파일 되게하는 방법: 원하는 파일 Auto Compile 선택

<< 기본 폴더 구성 >>
.
├── bootstrap
|   ├── css
|   |    └── bootstrap.min.css
|   ├── fonts
|   ├── img
|   ├── js
|   |    └── bootstrap.min.js
|   |    └──jquery-1.12.4.min.js
|   └── less
└── index.html



부트스트랩을 내가 원하는데로 바꾸기 (Bootstrap customizing):
공식 사이트: http://getbootstrap.com/customize/


LESS 수정하기 - 1. custom.less 추가하기
1. less폴더안에 custom.less 파일만들기
2. bootstrap.less 수정
  마지막 줄에 @import "custom.less"; 추가
3. bootstrap.css & bootstrap.min.css 에 자동으로
   custom.less 내용이 추가됨

LESS 수정하기 - 2.variables.less 수정하기
- variables.less : 기본 변수 값이 저장된 곳 (색,글씨체, 폼, 버튼 등..)
1. less 폴더 안에 variables.less 열기
2. 수정 원하는 곳을 수정하고 저장
3. 자동으로 prepros pro에서 컴파일해 줌
* bootstrap.css 가 수정되어 저장됨