728x90
반응형
![](https://blog.kakaocdn.net/dn/QueCS/btrq4w7m849/r0nGFKBO6mLz4qSHWVqI31/img.png)
1) 부트스트랩이란?
- 프론트엔드 컴포넌트 라이브러리
- 메뉴, 대문, 폼, 버튼 등의 HTML CSS를 복붙식으로 개발할 수 있게 도와줌
- 빠른 웹개발이 가능
2) 설치방법
CDN 방식으로 빠르게 Bootstrap을 설치하는 방법
① 부트스트랩 홈페이지로 들어간다.
② Get started 클릭!
![](https://blog.kakaocdn.net/dn/3jHn0/btrq6OGeeSu/hkNzhf3cFXob8GaenOc0t0/img.png)
③ 오른쪽 상단에서 필요한 버전을 선택
![](https://blog.kakaocdn.net/dn/KKMWW/btrq4q0G219/xR1BDitgUAHWSgwg7MXb8k/img.png)
④ 중간 쯤에 Starter template 이라는 부분에 있는 코드를 HTML 파일에 전부 복사붙여넣기
![](https://blog.kakaocdn.net/dn/d1gTwf/btrq6PLStZa/J4G98BUSvTkAOPDrI5uYhK/img.png)
⑤ 완성
![](https://blog.kakaocdn.net/dn/M6GXN/btrq6OMYCct/104gOYPoV7Py7fkJ33skck/img.png)
3) 사용법
- 원하는 디자인을 검색해서 복사하고 파일에 붙여넣기 하면 됨
- 반드시 사이트 오른쪽 상단에 본인이 설치한 버전을 클릭한 후에 검색할 것!!
① 사이트에서 원하는 디자인 검색하기
![](https://blog.kakaocdn.net/dn/8w7D2/btrq4p8x9KW/k3joVgPbABSKkrX6nnTxa1/img.png)
② 원하는 디자인을 찾아서 코드 복사하기
![](https://blog.kakaocdn.net/dn/bHfLVE/btrq7U60P1j/W0tyjKpTFdaX7Ngyua0NL1/img.png)
③ 파일에 붙여넣고 저장하면 끝
![](https://blog.kakaocdn.net/dn/dmCFl1/btrq118bcmb/Y4A3fcUwDnw0RRaD7jmiok/img.png)
728x90
반응형
'Coding With Jina > Bootstrap' 카테고리의 다른 글
[React Bootstarp] 리액트부트스트랩 시작하기 (0) | 2022.05.18 |
---|---|
[React Bootstarp] 리액트 부트스트랩 설치하기 (0) | 2022.05.18 |