[Vue] Bootstrap (부트스트랩) 설치 및 사용법

 

1. 부트스트랩이란?

 

• 프론트엔트 프레임워크
• 웹사이트를 쉽게 만들 수 있도록 도와주는 CSS, JS 프레임워크
• 휴대폰과 태블릿, 데스크탑 각각에 맞는 크기를 자동적으로 조절
• 웹 사이트 제작, 유지, 보수가 용이하도록 도움
• 웹 사이트 디자인 및 개발 시 쉽게 사용할 수 있는 코드를 제공 --> 개발 시간 단축

 

 

 

 

2. 설치 방법

 

1) 우선 구글에 bootstrap을 검색하면 가장 상단에 나오는 페이지에 들어간다. ( 하단 링크 참고 )

 

 

▼▼▼▼ 

https://getbootstrap.com/

Bootstrap

 

 

 

 

2) 다운로드 버전 선택

 

 

사이트에 들어가면 우측 상단에 이렇게 버전을 선택할 수 있다.

 

 

 

 

선택하면 이런 페이지로 넘어가게 되는데, 왼쪽 목록 중 Download 탭을 누른다.

 

 

 

 

 

npm으로 install 하려고 하기 때문에,

하단으로 쭉쭉 내려와보면

 

 

이렇게 설치 코드를 확인할 수 있다.

 

 ★ 위 코드는 버전에 따라 조금씩 달라지기 때문에 해당 버전에 맞는 코드를 확인하는 것이 좋다. ★

 

 

 

 

 

3) VScode 터미널에서 설치

 

 

위에서 가져온 코드를 적어서 bootstrap을 설치하면 된다.

 

 

 

 

[ 주의사항 ]

★ 작업하려는 폴더가 열려있는 상태에서 설치하기

★ 터미널에서 npm run serve 명령어로 인해 서버가 돌아가고 있다면 프로세스 종료하고 새 터미널에서 설치하기

-> 설치 잘 안되는 경우 막기 위해서

 

 

 

 

 

 

3. 사용법

 

부트스트랩 페이지에 다시 가서 좌측 목록들을 내려보면

 

이렇게 버튼, 카드, 모달 등 친숙한 컴포넌트들이 보인다.

 

 

 

예를 들어 만약 드롭다운 버튼을 생성하고 싶으면 ,

 

이렇게 찾아서 코드를 복사한 뒤

이렇게 붙여넣으면??

 

 

 

 

아주 쉽게 생성이 된다.

 

 

Navbar 같은 경우, 

 

 

화면의 크기에 따라 자동으로 형태가 바뀌는 기능도 있다!!

 

 

 

 

이 외에도 색깔, 크기 등 많은 코드들을 참고할 수 있다.

이렇게 보니 부트스트랩은 개발자들에게 사랑을 받을 수 밖에 없지 않을까..? 라는 생각이 절로 들었다. 🙂ㅎㅎ