부트스트랩


부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.

[네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과)



* 주로 반응형 웹이 많이 사용된다. 




1. 설치 


1) 홈페이지 접속 

http://bootstrapk.com/






2) 시작하기





3) 다운로드



* CDN으로도 사용 가능하다 * 


CDN : 콘텐츠를 임시 저장 서버에 옮겼다가 수요가 있을 때 콘텐츠를 사용자에게 전달하는 콘텐츠 전송 네트워크

( 저장 x )

웹 유저의 입장에서는 더 빠르게 사용할 수 있다. 웹 개발자의 입장에서는 다운로드보다 더 느리다( 다운로드는 컴퓨터 자체에서 불러오기 때문) 







3) 원하는 폴더에 압축풀기



* 폴더안에는 

css

js

fonts


폴더가 있다 



4) 파일 정리 


- css 폴더 안의 bootstrap.css or  bootstrap.min.css (min이 압축버전) , bootstrap-theme.css or bootstrap-theme.min.css 를 편한 위치에 옮긴다. 

 




* 나는 기존의 css 파일과 같은 폴더로 옮김 





- js 폴더의 bootstrap.js or bootstrap.min.js 를 원하는 위치로 옮긴다 







** 나머지는 내가 공부한 정도에선 아직 사용 x 




5) head 처리 

 

옮긴 파일들을 HTML 파일에 연결해주고, jquery를 CDN으로 연결

 

 











* bootstrap 사용하기 * 





bootstrap 은 프레임 워크로 원하는 오픈소스를 찾아서 사용할 수 있다 




- 상단의 카테고리를 통해 고를 수 있음 


* components : 한 세트의 화면구성 

ex) 버튼, 상단바, .. 






- 카테고리 안에서도 오른쪽의 목록으로 원하는 것을 빠르게 찾을 수 있다 





+ Recent posts