VS code에서 부트스트랩을 설치하는 방법을 알아보자.
링크로 설치하기
1. Bootstrap 사이트 > 시작하기 화면 접속한다.
http://bootstrapk.com/getting-started/
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치
bootstrapk.com
2. 부트스트랩 CDN 내용을 복사한다.
4. head 영역에 복사한 내용을 붙여넣는다. 의존성 문제로 순서는 아래와 같이 적용한다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 테스트</title>
<!-- 부트스랩 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 개인 CSS -->
<link rel="stylesheet" href="./main.css">
<!-- 자바스크립트 CDN -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- 부트스트랩 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>파일로 연결하기
1. 원하는 버전 링크 주소로 이동하여 다른이름으로 저장한다.
2. 다운받은 css파일을 html 파일이 있는 폴더에 넣고, link 태그를 이용하여 연결한다.
<link rel="stylesheet" href="./bootstrap.css">
! 주의 사항
최신 버전이라고 무조건 좋은 것은 아니다. 사용할 플러그인/템플릿을 먼저 확인하고, 이를 지원하는 버전을 사용하는 것이 좋다
'달밤에 코딩하기 > bootstrap' 카테고리의 다른 글
| #4-Bootstrap 활용 (0) | 2021.08.07 |
|---|---|
| #3-Bootstrap 레이아웃 및 컴포넌트 사용 (0) | 2021.08.07 |
| #1-Bootstrap이란? (0) | 2021.08.07 |
