이전에 홈페이지나 다운로드 링크를 알려드렸습니다.

오늘도 다운로드 링크와 함께 부트스트랩 3을 어떻게 시작해야 하는지 알아봅니다.

홈페이지에서 Getting started 를 클릭하면 아래와 같은 화면이 나옵니다.




보시면 css, js, fonts 등만을 포함한 최소한의 파일을 다운로드 할 수 있는 링크를 제공하고 있습니다.

다운로드 하시면 홈페이지에서 다운로드하는 것과는 폴더명이 다른 dist 가 붙은 파일로 다운로드를 제공합니다.




다운로드는 이전 포스트에서도 말했든 github 저장소에서 프로젝트 형식으로 다운로드 받을 수 있습니다.


이전부터 부트스트랩은 CDN 을 제공하고 있습니다. 

다운로드를 받지 않아도 cdn 링크만 걸어줘도 사용할 수 있다는 말입니다.

예제는 홈페이지에 나와 있듯 아래 이미지와 같습니다.




부트스트랩에 대한 CDN 은 http://www.bootstrapcdn.com/ 에서 모두 볼 수 있습니다.





이미지에서 보시듯 3.0에대한 링크도 제공하지만 웹폰트인 Font Awesome , 테마인 Bootswatch 와 이전 버젼인 Legacy 도 있습니다.


또 하단에 less 에 대한 사용법이 간단하게 적혀있습니다. 왜그런고하니 부트스트랩은 less 를 사용합니다. 부트트스랩에서 다운로드 받으면 각각의 모듈마다 less 파일이 나뉘어져 있습니다. 

예를들어 form 에 대한 css 는 forms.less 에 정의되어 있습니다. 


홈페이지에선 두개의 링크를 제공합니다. 하나는 less 홈페이지고 다른하나는 사용법에 대한 링크입니다. 

각각 방문해서 참고하시기 바랍니다.


부트스트랩을 다운로드 받으면 각 폴더의 내용을 볼 수 있는데요. 그 폴더의 구조를 알려줍니다.

만약 사이트에서 사용한다면 아래 이미지에서 보시는것처럼 min.css 와 min.js 만 로드하고 폰트를 로드하면 됩니다.

즉, 압축형태를 제공한는 뜻입니다.



참고로 jQuery 를 포함해야 한다고 나와 있습니다. bootstrap.js 나 bootstrap.min.js 는 전부 jQuery 가 먼저 로드가 되어야만 정상작동됩니다.



기본 템블릿.


아래 이미지에 보시면 부트스트랩의 기본 구문에 대해서 나와 있습니다. 이 구문은 어디에나 사용할 수 있는 기본 구조입니다.

아래 이미지에서 h1 에 해당하는것은 필요에 따라 변경되어야겠지요.ㅎㅎㅎ




즉 doctype 을 html5로 선언하고, viewport 선언하고, css, js 등을 로드합니다.

참고적으로 기능적으로 필요한 bootstrap.min.js 는 body 위에 선언했습니다.


익스플로러에만 해당하는 html5shiv.js 와 respond.js 등은 head 안에 지정했습니다.

html5shiv.js 는 익스플로러가 html5 의 구문을 모르기때문에 알려주는 역할을 합니다. 그래야만 html 이 로드될때 제대로 인식하기 때문입니다.


또하나 respond.min.js 는 익스플로러가 미디어쿼리를 지원하지 않기때문에 지원할하고 넣어준것입니다.


해당 템플릿으로 작성된 예제 템플릿이 그 아래 제공되고 있습니다.



반응형 비활성화.


다음은 부트스트랩에서 제공하는 반응형을 비활성화 하는 방법에 대한 글입니다.

반응형만 비활성화 하는 방법 및 단계를 제시하고 있습니다.

예제 템플릿도 제공하고 있습니다. 보아하니 non-responsive.css 도 있군요. 



2.x 에서 3.0으로마이크레이션.


버젼2에서 사용했던 클래스와 현재버젼인 버젼3에서의 클래스 변경에 대한 부분이 나와 있습니다.

많은 부분이 수정되고 변경되어서 저도 햇깔립니다. ㅋㅋㅋㅋㅋ

부트스트랩은 html에서 기본 클래스만 지정하면 기본 스타일은 다 설정해놨기 때문에 쉽게 html 을 작성할 수 있습니다. 

그래서 반드시 알아야하는것이 바로 클래스 입니다.

아래는 변경되고, 추가되고, 제거된 클래스를 보여줍니다.


버젼 2에서 3으로 변경된 주요 클래스 입니다.




아래는 추가된 클래스 입니다.




아래는 버젼 3에서 제거된 클래스 입니다.




다음은 2편에서 봐요....