1. 부트스트랩이란?
- 프론트엔트 프레임워크
- 웹사이트를 쉽게 만들 수 있도록 도와주는 CSS, JS 프레임워크
- 휴대폰과 태블릿, 데스크탑 각각에 맞는 크기를 자동적으로 조절
- 웹 사이트 제작, 유지, 보수가 용이하도록 도움
- 웹 사이트 디자인 및 개발 시 쉽게 사용할 수 있는 코드를 제공 --> 개발 시간 단축
2. 설치 방법
1) 우선 구글에 bootstrap을 검색하면 가장 상단에 나오는 페이지에 들어간다. ( 하단 링크 참고 )
▼▼▼▼
2) 다운로드 버전 선택
사이트에 들어가면 우측 상단에 이렇게 버전을 선택할 수 있다.
선택하면 이런 페이지로 넘어가게 되는데, 왼쪽 목록 중 Download 탭을 누른다.
npm으로 install 하려고 하기 때문에,
하단으로 쭉쭉 내려와보면
이렇게 설치 코드를 확인할 수 있다.
★ 위 코드는 버전에 따라 조금씩 달라지기 때문에 해당 버전에 맞는 코드를 확인하는 것이 좋다. ★
3) VScode 터미널에서 설치
위에서 가져온 코드를 적어서 bootstrap을 설치하면 된다.
[ 주의사항 ]
★ 작업하려는 폴더가 열려있는 상태에서 설치하기
★ 터미널에서 npm run serve 명령어로 인해 서버가 돌아가고 있다면 프로세스 종료하고 새 터미널에서 설치하기
-> 설치 잘 안되는 경우 막기 위해서
3. 사용법
부트스트랩 페이지에 다시 가서 좌측 목록들을 내려보면
이렇게 버튼, 카드, 모달 등 친숙한 컴포넌트들이 보인다.
예를 들어 만약 드롭다운 버튼을 생성하고 싶으면 ,
이렇게 찾아서 코드를 복사한 뒤
이렇게 붙여넣으면??
아주 쉽게 생성이 된다.
Navbar 같은 경우,
화면의 크기에 따라 자동으로 형태가 바뀌는 기능도 있다!!
이 외에도 색깔, 크기 등 많은 코드들을 참고할 수 있다.
이렇게 보니 부트스트랩은 개발자들에게 사랑을 받을 수 밖에 없지 않을까..? 라는 생각이 절로 들었다. 🙂ㅎㅎ
728x90
'Vue' 카테고리의 다른 글
[Vue] URL 파라미터 :id (0) | 2023.03.04 |
---|---|
[Vue] Vue-router 설치 및 사용법 (0) | 2023.03.04 |
[Vue] Components 컴포넌트 (0) | 2023.03.01 |
[Vue] 모듈화 / Import & Export (0) | 2023.03.01 |
[Vue] Vue 모달창 만들기 (0) | 2023.03.01 |