방법1. CDN 가져오기
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>위의 형태로 <head> 태그 안에 주소를 넣어준다.
script는 </body> 끝나기 전에 넣어준다.
단, 사이트에서 데이터를 가지고 오는 것이기 때문에 인터넷이 느리거나 물리적 거리가 있을 경우 느려지게 된다.
방법2. 터미널 설치하기
2-1. 경로 설정 먼저 잘 체크해준다. (폴더 생성한 파일 안으로 들어가서 부트스트랩 설치해주기!)
<!--4버전-->
npm install bootstrap jquery popper.js
<!--5버전-->
npm install bootstrap@next @popperjs/core**5버전은 IE에서 적용되지 않는 부분이 일부 있다고 한다.
2-2. src > main.js 파일로 들어가서 아래와 같이 import 해준다.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
반응형
SMALL
'Library > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Bootstrap 중단점마다 간격 바꿔주기 (0) | 2022.04.10 |
|---|---|
| [Bootstrap] Bootstrap 사용 및 모달창 UI 만들기 (0) | 2021.10.10 |
| 부트스트랩 사용하기 (0) | 2021.07.16 |