Bootstrapped template 확인하기 - 샘플코드 다운로드 하기, 압축해제, Bootstrap framewwork 확인하기, starter-template 확인하기, 크롬의 개발자 도구를 통해 페이지 다운로드 확인하기

 

Bootstrapped template 확인하기

템플릿 코드를 확인함으로써 Bootstrap이 어떻게 코딩이 되어 있는지 확인하고 여러분의 프로젝트에 적용할 수 있습니다.

 

샘플코드 다운로드 하기

샘플코드를 아래와 같이 다운로드 합니다.

[downloading the Bootstrap repository] 링크 클릭

http://getbootstrap.com/getting-started/#examples

 

샘플코드가 다운로드 됩니다.

 

 

 

직접다운로드

 

bootstrap-3.3.7.zip

 

 

 

압축해제

샘플코드 압축파일을 압축 해제 합니다.

 

C:\CodeLab\bootstrap-3.3.7

 

 

Bootstrap framewwork 확인하기

아래의 템플릿은 압축을 푼 폴더안의 docs\examples 안에 존재합니다.

해당 템플릿 항목을 클릭하면 미리 보기 할 수 있습니다.

 

 

템플릿 형태 확인

 

 

코드 확인

C:\CodeLab\bootstrap-3.3.7\docs\examples

 

 

 

starter-template 확인하기

starter-template을 eclipse에 복사합니다.

 

[OK]

 

 

템플릿 미리보기한 것과 다른 것을 확인할 수 있습니다.

 

코드 안에 링크한 bootstrap 파일에 대한 경로 설정을 현재 프로젝트 환경으로 변경하지 않았기 때문에 링크된 파일항목을 확인하여 수정합니다.

 

수정한 후 결과가 동일한 결과가 나오는 것을 확인할 수 있습니다.

 

http://getbootstrap.com/examples/starter-template/

 

 

크롬의 개발자 도구를 통해 페이지 다운로드 확인하기

 

크롬의 개발자 도구를 실행한 [Network] 탭을 오픈합니다. >>

이 상태에서 페이지를 다시 Refresh하면 아래와 같이 해당페이지에서 다운받은 파일을 확인할 수 있습니다.

빨간색으로 표현된 파일항목은 정상적으로 다운로드 되지 않은 항목들이므로 파일 유무나 코드상의 오류를 확인해 보아야 합니다.