본문 바로가기

개발/신기술공부

bootstrap 적용하는 방법

반응형

부트스트랩 적용하는 방법 

참조 : http://bootstrapk.com/getting-started/



1. CDN

부트스트랩 CDN

MaxCDN 의 사람들은 고맙게도 부트스트랩의 CSS 와 자바스크립트를 CDN 으로 지원합니다. 이를 사용하려면 아래의 부트스트랩 CDN링크들을 사용하세요.

Copy
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

: 간편하게 쓸수있지만 로딩이 느리거나 혹시나 서버가 끊길수도 있다. 



2. 다운받아쓰기   (V) 현 회사에서 필요한 부분은 그냥 부트스트랩 라이브러리만 다운받아서 보여주는 정도다. 


여기 이분이 잘 설명해 놨다.(부트스트랩을 다운로드 해서 세팅하기) 

http://tworab.tistory.com/71

참고로 부트스트랩은 트위터가 만들었다고 한다. 


: 말그대로 사이트에서 라이브러리를 다운받아서 복붙한뒤 그 파일경로로 라이브러리 위치를 잡아주면 된다.



3. bower, node.js의 npm 이용하기 


node.js를 다운받고 npm(package manager for Node.js packages)을 이용해 다운받는다.

Bower 로 설치하기

Bower 를 사용하여 부트스트랩의 Less, CSS, 자바스크립트, 폰트들을 설치하고 관리할 수 있습니다:

Copy
$ bower install bootstrap

Npm 으로 설치하기

npm 을 이용하여 부트스트랩을 설치할 수도 있습니다:

Copy
$ npm install bootstrap

하지만 여러가지 js라이브러리가 필요한 경우엔? 

프론트 라이브러리 다운 자동화 툴을 사용하면 된다. 


: 키워드는 

bower

node.js

npm

이므로 더이상의 설명은 생략한다. 


반응형
LIST

'개발 > 신기술공부' 카테고리의 다른 글

jQuery.map() 쓰는 방법  (0) 2019.07.05
Elasticsearch 한글형태소 분석기 은전한닢 설치 오류 해결  (0) 2018.03.23
디자인 패턴  (0) 2018.03.21