부트스트랩 :
부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 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) 버튼, 상단바, ..
- 카테고리 안에서도 오른쪽의 목록으로 원하는 것을 빠르게 찾을 수 있다
'프론트엔드 > ㄴBootstrap' 카테고리의 다른 글
<bootstrap> bootstrap을 이용한 간단한 메인 페이지 (0) | 2017.07.21 |
---|---|
<bootstrap> bootstrap 이용한 아주 간단한 반응형 레이아웃 (0) | 2017.07.21 |
<bootstrap> bootstrap CSS grid System (0) | 2017.07.17 |